How to Increase Your PageSpeed Score: 10 Ways to Speed Up a Website

How to Increase Your PageSpeed Score: 10 Ways to Speed Up a Website

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.

Frequently Asked Questions

On most sites the biggest gain comes from images: modern formats (WebP, AVIF), correct sizing, lazy loading for off-screen images and prioritising the largest image.

The browser's built-in loading="lazy" does not hurt when used correctly. Just do not lazy-load the main image on the first screen, because that delays LCP.

AVIF usually produces smaller files, while WebP encodes faster and is very widely used. Both work in current browsers, and the picture element lets you offer AVIF, WebP and a JPEG fallback together.

Search Console uses real user data, which is updated over a 28-day window. It can take a few weeks for improvements to show in the reports.