Continuing on with our series exploring what Core Web Vitals (see our first our first post here) means for WordPress development, we will be looking at LCP (Largest Contentful Paint). We’ll take a look at what it is, and how we can improve page load speeds by optimising the largest assets your site may contain.
What is largest contentful paint?
LCP is the amount of time it takes to render the single largest element, usually an image but can extend to text, videos and SVGs. Google Lighthouse, Google’s site metric analysis & performance tool used to measure all of the core web vitals indicates that sites should try and keep LCP under 2.5 seconds.
LCP usually only considers the content directly in the users viewport, meaning content below the fold will not be considered as LCP is more about the users perceived loading experience.
How to improve LCP?
There are four common causes that can affect LCP:
- Slow server response
- Slow resource load times
- Client-side rendering
Slow server response
A faster server response can improve LCP by providing cached site pages & assets. Establish third-party connections early by using techniques like `preconnect` and if required point users to nearby Content Delivery Networks so speed this up.
Slow resource load times
The main resources that can affect load times are usually images, these are the main culprits for slow LCP, especially if they appear above the fold.
There is a lot of different ways in which you can help alleviate the loading of these assets.
Optimise & compress the images
Newer image formats
Use newer image formats like WebP, these display similar image quality but at a much lower file size. Be aware some of these newer formats are not supported in older browsers.
Use responsive images, for example you may have a hero image at 1400px wide for your desktop users but you would not want to serve that to your mobiles users as loading would take significantly longer. Using the <picture> element you can serve different image sizes for different screen breakpoints.
Client side rendering
Libraries like React, & Vue have made building single-page web applications incredibly easy. However if these are not optimised correctly it may result in longer loading times. Be sure to use minification, defer unused scripts and remove unnecessary polyfills.
When it comes to LCP performance, there is no one solution to suit all. It really depends on the user criteria, how the site is designed or what the valuable content is that you wish to show your users.
Many of the solutions above should reduce your sites LCP score significantly and provide a better user experience overall.
Internal day: February 2021
How brand guidelines help to deliver your B2B website design project
Do you have an exciting strategic project coming up that you would like to talk about?