Website performance is an increasingly important factor to pay attention to for both user experience and SEO purposes. Three key website performance metrics to focus your attention on are Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS). Let’s explore what each of these things are and then look at the tools you can use to optimise these to improve your website performance.
1. Largest Contentful Paint (LCP)
What is Largest Contentful Paint?
LCP measures the time it takes for the largest content element (typically images or text blocks) to load and become visible to the end user. Ideally, you should aim for this to complete within 2.5 seconds to provide a good user experience.
How to optimise Largest Contentful Paint.
-
Improve Server Response Times: Slow server responses can delay LCP. You can implement server-side caching such as Redis or OPcache and reduce the time taken to fetch and process your site’s resources from the server.
-
Use a Content Delivery Network (CDN): CDNs distribute your website’s content across multiple servers worldwide, reducing the physical distance between the location of the server and the location of the user.
-
Optimise Images: Compress your website’s images and try to use modern formats wherever possible such as WebP. You can also use a lazy loading technique to defer the loading of off-screen images which helps speed up the initial load.
-
Eliminate Render-Blocking Resources: CSS and JavaScript files that block rendering should be minimised. To eliminate render-blocking resources, you can defer non-essential JavaScript by loading the scripts after the main content has loaded. Include necessary CSS inline directly in the HTML to ensure it loads immediately, then asynchronously load non-critical CSS or JavaScript. You can use attributes like async or defer to prevent these resources from blocking rendering.
2. First Input Delay (FID)
What is First Input Delay?
FID measures the time from when a user first interacts with your site (such as clicking a button) to the time the browser responds. A good FID score is under 100 milliseconds.
How to optimise First Input Delay.
-
Minimise JavaScript Execution: JavaScript is often the cause of poor FID. To resolve this, break up long tasks, defer non-critical scripts, and try to reduce the impact of any third-party code.
-
Make Use Of Web Workers: Offload more complex calculations to web workers so that the main thread remains free to respond to any user interactions quickly.
-
Optimise Interaction Readiness: Prioritise making any interactive elements such as buttons or forms available to the user as soon as possible. Try to consider using techniques like input delay budgets to allocate time that can be spent on handling user interactions to provide a smooth user experience.
3. Cumulative Layout Shift (CLS)
What is Cumulative Layout Shift?
CLS measures the visual stability of your site by tracking any unexpected layout shifts. A good CLS score is less than 0.1.
How to optimise Cumulative Layout.
-
Set Size Attributes for Media: Always define both a width and height for images, videos, and other media to prevent them from causing layout shifts as the page loads.
-
Avoid Insertions Above Existing Content: Dynamically inserting content above existing content can push it down, leading to layout shifts. Instead, make sure that you reserve enough space for these elements in advance.
-
Manage Ads and Embeds Carefully: Ensure any advertisements and other embedded content like videos, social media widgets, and third-party content have reserved space to avoid resizing them dynamically.
Keep updated with the latest from Pipe Ten by subscribing below.
Tools for Analysis
-
Google PageSpeed Insights: Provides a detailed report on LCP, FID, and CLS, along with recommendations on how to improve and optimise your website’s pages.
-
Google Lighthouse: A tool integrated into Chrome DevTools that simulates different loading scenarios to analyse the performance of a website. It generates detailed reports with actionable recommendations, helping developers optimise their websites for a better user experience and improved search engine rankings.
-
Google Web Vitals Extension: A Chrome extension that offers real-time feedback on core web performance metrics, specifically focusing on Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS). This extension is useful for developers and website owners to monitor and optimise these crucial metrics as they browse. Available in the Chrome Web Store.
Continuous Monitoring and Testing
Regularly monitor your website’s performance using tools like Google Search Console and real-user monitoring (RUM) services. Testing on various devices and network conditions ensures your optimisations are effective across different user scenarios.
By focusing on LCP, FID, and CLS, you can significantly improve your website’s speed, usability, and overall user experience, leading to higher engagement and better SEO performance.
Author: Gavin Kimpton
A founder of Pipe Ten, Gavin has been professionally embedded in the digital sector spanning 3 decades since the original dot com boom of the late nineties. He has extensive experience in the design of many major international website launches and is a seasoned expert in the world website application hosting and domain registration management. Over the past twenty plus years at Pipe Ten Gavin has navigated the ever-evolving landscape of internet governance, witnessing the birth of new top-level domains (TLDs) and the proliferation of security and compliance within the industry. Gavin spearheaded Pipe Ten to be a Nominet accredited channel partner with a profound understanding of the symbiotic relationship between domain names and the broader digital ecosystem.