Oct 21, 2021
Time: 3:03 am
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
If you’ve set up a CDN and your website still isn’t loading as fast as you would like, it’s time to get a bit more technical. If you aren’t comfortable with terms like prefetch and asynchronous Javascript loading, it might be time to hire a professional.
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.
While page builders are wonderful for the average small business owner, they can be a real pain when it comes to optimizing your website for speed. Most page builders tend to include a wide array of features and functionality so non-developers can produce visually stunning pages. While this makes it possible for anyone to create a website, it also means that your website is going to get bogged down with loads of unnecessary functionality that will never be used. When Firestarter builds a client website, website speed is at the top of mind. In order to create a website that is both fast and easy to manage, we use a tool called Advanced Custom Fields. ACF makes it possible for website managers to easily change or duplicate page layouts without knowing how to code. If you are using a page builder, consider hiring someone to rebuild your website with custom CSS and Javascript. If you are already using custom CSS consider minifying it to remove comments and whitespace, reducing the parsing time for the browser.
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
Client-side rendering is any elements that are conditional to specific user interactions to become interactive or are reliant on database queries. Commonly Javascript, some examples might be chat functions, form outputs, and search boxes. Analyze which client-side elements provide value and the ones that don’t. For example, Firestarter at one time had an automated chat function to nurture potential leads and website visitors. In a typical month, we only received 1-2 serious leads from the chat function. The question became, would these visitors have filled out a contact form if the chat was not available? After doing some A/B testing, we found that our visitors would in fact fill out a contact form if chat was unavailable. By removing the chat script from our website, we were able to reduce client-side rendering significantly.
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.