Ideas for Improving Your PageSpeed Score

Rian Schmidt

March 14, 2024

Table of Contents:

Keeping Things in Perspective
Every Little Bit Helps
1) Convert images to webp format.
2) Size your images appropriately.
3) Check out your Google Tag Manager, lose unused tags
4) Cache your pages/queries.
5) Look into deferring load of stuff you don't need above the fold.
Then There Are Those OTHER Things
Just a Starting Point

Keeping Things in Perspective

I'll admit that I'm a little cynical about the ultimate desirability of a maximum PageSpeed score, particularly when the cost is reducing the quality of your site in other dimensions. The ultimate Web Core Vitals site is probably something that looks like it came out of the late 90s-- plain text, no styling, no images, and for the love of everything, no Javascript.

But, let's face it, until ChatGPT becomes everyone's source of, well, everything, we're stuck trying to appease the Google gods to get our content up the results. One way that they claim to make that determination is via your Web Core Vitals-- for now, let's focus on page speed.

Every Little Bit Helps

In general, speeding up your page isn't a homerun situation. It's a series of singles. I'll list a few practical ideas as well as some that I've not figured out, if only a) so you don't feel bad that you haven't either or b) can feel smug that you know something I don't.

This is a very much non-exhaustive list, but some ideas that are pretty easy and have a big impact-- maybe doubles over singles.

1) Convert images to webp format.

Every modern web browser, with the expected exception of IE (but not Edge) last I looked, supports webp format. I have yet to hear of a case where someone couldn't see a site with webp images, and they are notably (~25%, right out of the chute), smaller than even JPGs.

2) Size your images appropriately.

I see this all the time. Someone's got an image that's displaying at 200x200 on their site, but the image itself is 2400x2400. Because the browser scales it, people think that's that, but you're still sending the huge image, and the file size increases quadratically-- meaning a 200x200 image is actually 25% of a 400x400, not half. It's 1% of a 2000x2000 image.

3) Check out your Google Tag Manager, lose unused tags

This one surprised me because you can load your gtag asynchronously, but it's made a big difference in initial render speed for me to remove unused tags from Google Tag Manager. The tag manager mechanism itself is pretty fast, but if you've got 10 unused tags being loaded up, it can make a huge difference.

If you're using it, go to Tag Manager, and look for tags that are just leftovers from previous projects or SEO providers. Get rid of those.

4) Cache your pages/queries.

Make sure that you're caching your static pages (i.e., via a CDN cache like CloudFront) or a reverse proxy. I'm talking less about client-side caching here. It's great, but it's not going to help with your initial load.

Sometimes, if you have a dynamic site, the real timesuck is the time needed to query a data source. It's pretty easy to set up a basic data cache with Redis, for instance, that can make a 800ms query into a 20ms query for 99% of your users if you design the strategy right.

There are lots of ways to do this, from implementing it in your application (e.g., Rails) to using something like memcache or Redis to cache data that doesn't change for every user. Think about how you might implement caching at the various layers of the stack.

5) Look into deferring load of stuff you don't need above the fold.

If you have a single-page app that's got a lot of stuff on it, you might be blocking the render waiting for items to load that you can't even see. Look into the defer and async attributes of scripts. For images below the fold, you can add loading="lazy". The goal with all of these techniques is to put off loading whatever isn't critical to the initial render.

Then There Are Those OTHER Things

If you use the Google tools, like the PageSpeed tool, you may see plenty of not-at-all-clear suggestions to "reduce unused Javascript" or "Minimize main-thread work". How? Well... it's complicated.

Also, the tools are not infallible. I've followed the instructions and broken my site. Consider the suggestions that those tools provide as just that. See if you can figure them out, but if not, don't sweat it too much. If the site is otherwise optimized to the best of your ability, it's more productive to spend your time looking at your content and design, for instance.

Just a Starting Point

This is by no means a how to for these techniques, but I wanted to put them out there as ideas for speeding up your page load and render. Doing so will give your users a much more pleasant experience and might convince Google to move you up the rankings for the same content. Good luck!

Circinaut is a Fractional CTO services provider, based in Portland, Oregon, working with clients all across the country. I focus on application development, technology advising, and ongoing support for small and medium-sized businesses.
If your business is in need of a part-time CTO, a fractional CTO, or a contract technical consultant, drop me a line. I'm happy to have a quick chat to discuss your situation with no sales pressure at all (really!).