Site Speed has always been an important factor for both user experience, search engine crawling and indexing. There are many case studies about the importance of site speed, most notably the Amazon study which showed for every 100ms of improvement, they grew incremental revenue by 1%. Off the back of such studies, Google has included PageSpeed as a ranking signal in its algorithm, making it critical to make sure your website loads fast. The reasons for it are twofold:
- Users have a very limited attention span, and if your site takes longer than 4 seconds, they will leave. 2 seconds or less is considered by Google to be optimal.
- Similarly, search engine crawlers have a limited amount of resource that they can allocate to each site on the Internet. Consequently, sites that load quickly are crawled more thoroughly and more consistently than slower ones.
Best Practices
LCP (largest contentful paint): The amount of time to render the largest content element visible in the viewport, from when the user requests the URL. The largest element is typically an image or video, or perhaps a large block-level text element. This is important because it tells the reader that the URL is actually loading. So. minimise the time from clicking on a link to seeing the majority of the content on-screen:
- Remove any unnecessary third-party scripts
- Prefetch as many resources as possible
- Create template specific Cascading StyleSheet (CSS) and JavaScript (JS) files to reduce the amount of unused code.
- Upgrade your web host
- Set up lazy loading so that images only load when someone scrolls down your page.
- Remove large page elements such as videos or large images
- Minify your CSS
- Using a headless CMS can improve security as well as LCP and other CWV metrics.
FID (first input delay): The time from when a user first interacts with your page (when they clicked a link, tapped on a button, and so on) to the time when the browser responds to that interaction. This measurement is taken from whatever interactive element that the user first clicks. This is important on pages where the user needs to do something, because this is when the page has become interactive. Some considerations:
- Minimise (or defer) JavaScript to make the page quicker to interactive with – especially useful for 3rd party tags that can’t be removed
- Remove any non-critical third-party scripts
- Use a browser cache to assist faster loading of content faster
CLS (Cumulative Layout Shift): CLS measures the sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page. The score is zero (good) to any positive number (less good), where zero means no shifting (good) and the larger the number, the more layout shifts on the page (less good). This is important because having pages elements shift while a user is trying to interact with it is a bad user experience. If you can’t seem to find the reason for a high value, try interacting with the page to see how that affects the score. Some considerations:
- Use set size attribute dimensions for any media (video, images, GIFs, infographics etc.) so that the user’s browser knows exactly how much space that element will take up on that page. This will remain unchanged as the page fully loads.
- Add new UI elements below the fold