Search Engine Optimisation is the process of obtaining as high a search result position as possible through optimising your site for web crawlers such as the Google crawler.
Google judges sites on many criteria but the main criterion is the user experience of your site.
Sites should be super quick to load content, become interactive and have very little interruption (layout shifts) to the overall page structure after initial load. Particularly on mobile as this is the most significant user base.
Google has recently made Core Web Vitals a key part of their site analysis algorithm. These are: the largest contentful paint (LCP), first input delay (FID) and cumulative layout shift (CLS).
Largest Contentful Paint
This is, as the name suggests, the largest piece of content on your page.
Normally this is the hero image that spans the full width at the top of the page.
First Input Delay
The time it takes before the site is interactive for the user. Think clicking buttons and typing input into fields.
Heavy client-side Javascript usage can hog the main thread and force user input to the end of the queue. This leads to an unresponsive site and frustrated users.
Cumulative Layout Shift
Have you ever been on a site where you try and click a link or button only for it to shift just before you click it?
Yup, you've been a victim of layout shift. If you're like me I wouldn't hang about on that site for very long.
Measuring Performance with Lighthouse
Lighthouse is the most common measurement tool and can be found in the Chrome Developer tools. It gives you high-level scores and Performance metrics as well as a list of opportunities for improvement.
However, results can vary wildly between runs due to the specification of your machine as well as what is running on it at the time that the Lighthouse audit was run etc.
Measuring Performance with Google Analytics
This is the best way to measure Performance. You can add a performance measurement script on the client-side that will capture LCP, FID and CLS averages when the client loads the page. Those measurements can then be sent to Google Analytics where they can be analysed.
By measuring on the client you get real data from real users which spreads across different device types. This is the same way your site will be measured by Google so gives you the most accurate representation of your site performance.
Performance improvement tips
- Font Optimisations (TLDR: use web-safe fonts or self host Google Fonts)
- Preload and Preconnect to important resources
- Remove unused or unnecessary third-party scripts
- Remove invalid HTML
- Remove unused CSS
- Lazy-load images using the loading="lazy" HTML property
