How to Reach a 100/100 PageSpeed Score

Getting your site to score a perfect 100/100 on PageSpeed Insights is very simple: Minimize the amount of bytes sent to the client to as little as possible, while of course maintaining the same quality of the website.

Here’s how to get there.

Use the Right Image Formats

Images are usually the heaviest thing of websites. If you are loading pngs or jpgs, you are doing it wrongly. You should be sending avif or webp, which are image formats that are optimized for the web. These can save up to 2.5x the amount of bytes, significantly increasing your pagespeed score. You can use compressor.io to compress your images, and convert it to webp with https://cloudconvert.com/jpg-to-webp.

Here's an example of this in your website's code:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Product image" width="600" height="400" loading="lazy" decoding="async">
</picture>

Also remember to set the width and height of your image.

Preloading Important Content

Every browser makes decisions about what to load first. You can help it make smarter decisions by using the <link rel="preload"> tag. This is your way of saying, “Hey browser, this thing is important — grab it early.”

For example, if your site uses a custom font or a large banner image that appears above the fold, you can preload it like this:

<link rel="preload" as="image" href="/images/hero.avif" type="image/avif">

This ensures the browser prioritizes loading this resource first before other resources that might not matter as much.

Defer Non-Critical JavaScript

JavaScript is powerful but it can also slow down your website significantly. If your site can show useful content before the JavaScript runs, then you should absolutely do that. Don’t block the page from loading just to run a script that doesn’t need to be there right away.

Use the defer attribute on your <script> tags to tell the browser to download the script in the background, and only run it after the page is parsed.

<script src="/main.js" defer></script>

Lazy-Load Images Above the Fold

Not everything on your page needs to load immediately. If there’s an image or video far down the page that most users might not even scroll to, then it makes sense to load it only if and when they do.

Modern browsers support this natively using the loading="lazy" attribute.

<img src="/images/gallery.jpg" loading="lazy" alt="Gallery photo">

This will also improves your Largest Contentful Paint and Time to Interactive scores — two of the biggest factors in your PageSpeed score.

Does PageSpeed Even Matter?

For users on fast internet, maybe not much. A page that loads in 1.2 seconds versus 1.5 seconds won’t change their life. But not everyone has fast internet. Some people are on spotty mobile networks, older devices, or shared Wi-Fi with ten other collestreaming video. For them, even small delays are frustrating.

And the numbers back it up.

For every extra second your site takes to load, around 7% of conversions are lost. If your page takes three seconds, you could lose up to half your visitors before they even see what you offer. Slow websites means significantly higher bounce rates.

So while a perfect PageSpeed score isn't extremely important. It does have an impact for your visitor's attention, and connection quality. So if you can optimize your site to make it faster, why not?