From image optimisation and lazy loading to CSS, JavaScript and caching: 10 steps to speed up your website, with example code.
If your PageSpeed Insights report shows a red or orange score, do not worry: most slowness comes from a handful of familiar causes. This guide covers ten ways to speed up your website, starting with the ones that bring the biggest gains, with example code. If you are not sure how to read the report yet, start with how to use PageSpeed Insights.
1. Measure First, Then Improve
Before changing anything, test your home page and a few of your most visited pages on mobile three times and note the median results. Knowing which metric is weak means you spend time on the right thing: a high LCP points to images and the server, a high TBT to JavaScript, a high CLS to elements without dimensions.
2. Convert Images to Modern Formats
Images are the heaviest part of most sites. At the same visual quality, WebP and AVIF usually produce much smaller files than JPEG and PNG, and all current browsers support them. You can offer a fallback for older devices with the picture element:
<picture>
<source srcset="cover.avif" type="image/avif">
<source srcset="cover.webp" type="image/webp">
<img src="cover.jpg" alt="Cover image" width="1200" height="630">
</picture>
3. Serve Images at the Right Size
Loading a 3000-pixel file for an image displayed 300 pixels wide wastes bandwidth. Resize images to the largest size they are shown at, compress them and offer several sizes for different screens with srcset. Setting width and height on every image prevents content from shifting while it loads (CLS).
4. Prioritise the Largest Image
The large image at the top of the page is often the LCP element, and if it loads late, LCP suffers directly. Tell the browser this image is important and never lazy-load it:
<img src="hero.webp" alt="Hero image" width="1200" height="630" fetchpriority="high">
5. Lazy-Load Off-Screen Images
Lazy loading makes images and iframes below the fold load only when the user approaches them. It is built into browsers, so no extra library is needed:
<img src="gallery-1.webp" alt="Gallery image" width="600" height="400" loading="lazy">
<iframe src="https://www.example.com/map" title="Location map" loading="lazy"></iframe>
The rule is simple: images visible on the first screen load immediately, everything else loads later.
6. Slim Down CSS and JavaScript
- Remove unused code: plugins, libraries and styles you no longer use still load on every page.
- Minify: stripping whitespace and comments reduces file size.
- Do not block rendering: load scripts that are not needed to draw the page with
defer, and inline the critical CSS for the first screen.
<script src="/js/app.min.js" defer></script>
7. Load Fonts Wisely
Every font weight is a separate file. Load only the weights you use, prefer the WOFF2 format and use font-display: swap so text is not invisible while the font downloads:
@font-face {
font-family: "Poppins";
src: url("/fonts/poppins-regular.woff2") format("woff2");
font-display: swap;
}
8. Audit Third-Party Code
Analytics, advertising, maps, live chat and social media code can add a heavy load to your page. Question whether each one is really needed. Loading analytics and advertising code only after the visitor accepts cookies is the right approach for privacy laws and lightens the first load as well.
9. Server, Compression and Caching
- Server response time: a slow server holds back every other improvement. Page caching and an up-to-date PHP version make a difference.
- Compression: text files (HTML, CSS, JS) should be sent compressed with Brotli or gzip.
- Browser caching: give files that do not change a long cache lifetime, and change the file name or version parameter when you update them.
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/css application/javascript
</IfModule>
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/webp "access plus 1 year"
ExpiresByType text/css "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"
</IfModule>
10. Improve Responsiveness (INP)
Loading fast is not enough; the page also has to react quickly to taps and clicks. Since March 2024 Google has measured this with INP. Break long JavaScript tasks into smaller pieces, remove unnecessary event listeners and load heavy libraries only on the pages that need them. See our Core Web Vitals 2026 guide for details.
Check the Result
Repeat the test after every change and compare the medians. The lab score changes immediately; real user data can take up to 28 days to update. We cover the mobile side separately in mobile-friendly website.
Conclusion
The secret to a better PageSpeed score is to start with the steps that bring the biggest gains: images, the priority of the main image, unnecessary JavaScript and the server side. If applying these to your current site takes too long, starting with a structure built for speed may be more efficient. With our Quick Website package your site is built from simple, mobile-friendly sections; if you need custom features, see our custom website with an admin panel service.