If you’re reading this guide, I will assume you have analyzed your website with the PageSpeed Insights tool and received a less than desirable score for Largest Contentful Paint.
What is LCP?
LCP is a metric introduced with the Page Experience update that measures how long it takes for the largest visible element to load on a particular web page. Google may use LCP as an indicator of when the main content of the page has finished loading and is now ready for the visitor. What does this mean for you? It means the longer it takes to load the largest section of content on your website, the longer Google’s search algorithm will interpret that it takes for the page to be ready for a user. Long page load speeds signal a bad user experience to Google, which is now an official ranking factor.
How can I improve LCP?
The most common cause of a bad LCP score are:
- A slow server
- Render-blocking resources
- Slow resource loading times
- Browser rendered elements
Using A Content Delivery Network
In order to increase server response time to browser requests (when someone clicks on a link to your page) the first and easiest method is to set up a Content Delivery Network (CDN). A CDN, like our personal favorite Cloudflare, distributes your cached web page to different servers across the country or even globally. Doing this will allow browsers to request content from a server in the same geographic area as the user, decreasing the distance the data has to travel. A website using a delivery network versus a single server can be the difference between a good PageSpeed Insights score and a poor one. Configuring a CDN is easy, there are loads of online resources available and Cloudflare’s customer support will help guide you through the process if necessary.
Reducing the Load on the Main Threadwork
Before a browser can load the content, it by default loads any scripts located in the <head>. If you are using a page builder (like Elementor or Divi), a heavy theme, or lots of fancy fonts you will likely have several scripts that need to be loaded before the browser can render any content. If you are using Google Chrome, head over to the page that needs improvement, right-click and select ‘inspect’. From the developer panel, select the ‘Network’ tab. Here you can press CTRL+R to reload the page to see the browser requests populate. You can filter these requests by size and view the ‘Waterfall’ to gain a better understanding of which requests are blocking others or are causing the largest delays.
The first thing you should consider is removing any unnecessary scripts. If you are using WordPress, a common unnecessary script is the wpblock and wpemoji libraries which are loaded by default. By adding a bit of PHP code you can disable these scripts before they ever start taking up precious time on the threadwork.
One of the most impactful changes that increase page load speed, is using native fonts. While various fancy fonts may improve the appearance of your website, take time to consider if they actually add value to the customer experience. If not, using native fonts can increase page load speed by ~15% instantly.
If you’ve made the suggested changes above, your website is likely already scoring significantly better on PageSpeed Insights. Since removing page builders and fonts can be a daunting task, some website owners may not be ready to take that step. If your website still has several scripts loading in the <head>, you might consider prefetching critical assets required to render the LCP and adding a ‘defer’ tag to non-critical scripts that would typically take over the main threadwork upon execution.
Optimizing the LCP Itself
If you’ve already applied the above methods, or are looking to improve your LCP score further, consider optimizing the content itself for page speed. If you are using a video in the hero of your page, ask yourself if an image would provide the same value to a visitor. If you are using images, ensure they are compressed to a manageable size. If you download images from a website like Adobe stock, they often come as large high-resolution images. Use one of the many free image compression tools to reduce your larger images to less than 500kb and smaller logos and images to less than 100kb. If you are concerned about losing image quality, resizing the dimensions to the actual rendered size may help. If your CMS supports them, image formats like WEBP can further reduce file size.
Reducing Client-Side Rendering
By serving browser requests from a reliable CDN, Removing unnecessary scripts, and optimizing images, you should be able to significantly improve the LCP score. Not only that, but these tactics should improve First Input Delay and Cumulative Layout Shift as well.