Chasing the last few points of pagespeed

This post is a more technical dive into the process of optimising www.philo.co.nz for what is the best possible pagespeed score for Technical Search Engine Optimisation. As Google continues to change how scores are calculated we must continue to adapt to meet the requirements.

https://pagespeed.web.dev/analysis/https-www-philo-co-nz/60fy8crgcu?form_factor=mobile

The Technologies

Being advocates for the benefits of custom software that is built from the ground up, it is important to lead by example. Our website has been around for a few years, but was due a major upgrade from Vue 2 to 3 including a Nuxt 2 to 3 upgrade.

Running on an in house CMS which was to be retired this was replaced in favour of Strapi, a Headless CMS. Strapi's configurability is a huge drawcard for us. It offers a great administration portal which is flexible and easily extended with community add-ons such as image optimisation.

We had built quite a few web systems with Nuxt 3 by this time and could confidently say that Nuxt 3 was an all round a major leap in the right direction for building web optimised sites easily. Previously Nuxt 2 seemed like it would fight us to get half decent optimisation scores, Nuxt 3 got out of the way and left the last few optimisation issues to us.

Lets not forget that the MVP here is Nuxt Vitalizer which just works. Some really great optimisations here without needing to even understand what they are, just install and better Lighthouse Score straight away.

Image Optimisation

One of the usual suspects for slow website speeds are images, especially on multiple form factors is large images. We are very familiar with Image Optimisation via Cloudflare which works great on some of our customer sites.

Allowing customers to upload whatever image they have from any device without any preprocessing is a major time and cost saving for people. Software saves it in a large format, then on the fly it is downscaled to requested dimensions and converted into a web optimised format.

For us, we wanted to try something a bit different and utilise the Strapi plugin which does this for us. Cloudflare is great, but it can be an extra level of complexity for a basic system. Another system which does have problems and outages although they are infrequent.

Strapi has a great plugin called Local Image Sharp which does what it says on the tin "Dynamically resize, format and optimize images based on url modifiers". We can then pull images from Strapi CMS objects, throw a few modifiers on them and build a srcset for the image so the browser can pick the best image format. All cached so next time it serves immediately.

Srcset generation example

<img
  :src="strapiObject.url"
  :srcset="imgSrcs(strapiObject.url)"
  :sizes="imgSizes"
  ...
/>          

const imgSrcs = (src: string) => {
  return [
    `${src}?format=webp&width=250 250w`,
    `${src}?format=webp&width=350 350w`,
    `${src}?format=webp&width=400 400w`,
    `${src}?format=webp&width=800 800w`,
  ].join(', ')
}
const imgSizes = ref(
  return [
    "(max-width:250px) 250px",
    "(max-width:350px) 350px",
    "(max-width:400px) 400px",
    "(max-width:800px) 800px"
  ].join(', ')
)

Remember that mobile device pixel ratios differ to desktop, so for smaller page widths the images can be requested smaller than what the browser will request. So in the above imgSizes, you can modify the max-width to request a src-size that is smaller than the max-width to reduce the image size on the wire.

The other major improvement is deferring large content including banners. Lazy Loading means the page is usable while the images load in, this coupled with web optimised images means they load quick but don't block interaction.

Technical SEO

Nuxt Vitalizer generally does the heavy lifting here to improve performance scores. A lot of the work we as developers need to do are around SEO, Best Practices and Accessibility.

This is the tedious part of the process, working through the suggestions of the light house report. Fixing one issue can cause another to have a larger impact, and transient issues can cause your score to drop dramatically only to recover later for no apparent reason - likely due to the emulated device it ran on.

Best practices like the following are easily fixed and make for quick wins

Cumulative Layout Shift (CLS)

Layout shifts are another major cost to page performance. Managing content sizing explicitly saves a lot of hurt here, images should be fixed already but having your CSS set up correctly. Having a large master CSS file is a sure-fire way to have large layout shifts when it loads deferred [as it should]. CSS loads in and changes the layout causing text to overflow with font size and font changes.

Leveraging localised styling within pages and components that are scoped will make your life much easier.

What is an Ideal Score?

The real answer is it depends, go and test any large website and their score will be terrible. Web vitals score is one element that impacts your page ranking, but one of many. There is no doubt that content and engagement of your site is the primary determinant factor in page ranking, so quality content should be your primary focus to rank higher.

But having a fast site that follows best practices will certainly help you gain and retain users. It will help your website grow and reach a wider audience through organic traffic growth. You can then focus on building content that people engage with which Google takes notice of via your analytics code and ranks you up.

Then once you have a large userbase you can break all the rules as people will come anyway /s