Core Web Vitals (CWV) represent page experience metrics that Google uses to rank websites according to users’ experiences and perspectives, making them an important ranking factor. Specifically, Core Web Vitals allow you to understand your site’s performance based on data collected from users in real time, indicating components of site speed, interactivity, and stability. Learn more information from our article where we explain Core Web Vitals in detail.
Largest Contentful Paint (LCP) is an important metric for user experience that measures the perceived loading speed, as it marks the moment when the main content of the page is likely to be displayed. A low LCP value indicates to the user that the respective page is useful.
According to Google’s UX recommendations, to provide a positive browsing experience, the largest image or block of text should be rendered within the first 2.5 seconds.
According to Google’s documentation on LCP, the following elements are taken into account for measuring the LCP score:
- Images
- Video
- Background images loaded through CSS
- Heading tags
- Tables
- Lists
- Any other block-level element containing text
For example, Google provides an image to illustrate the loading of the largest text block and then the other elements.
The goal or ideal target is to achieve the recommended loading speed on the majority of pages within your website. According to Google: „if at least 75% of page visits receive a ‘Good’ rating, the site will be classified as having a ‘good’ (GOOD) performance for that metric.” You can learn more about how Google defines the „GOOD” rating threshold by reading the information from the following link: here.
How does LCP impact your SEO strategy?
We are already accustomed to the fact that Google values a fast website and that metrics like „page speed” are already integrated into the ranking algorithm. LCP is just another way Google ensures that website owners provide a good user experience and speed across the entire platform, not just on a specific page, and this assurance works in favor of both parties: Google can identify valuable sites, and users will stay longer on the page and perform more actions.
Now you might be thinking: „I have a site that moves pretty quickly, and I even tested it and have a loading speed under 3 seconds. I’m good, right?”
Not quite…
While having a good loading speed is clearly a desirable factor on any platform, Screaming Frog details in this study (link to study) that most web properties are not ready for the LCP threshold.
According to the data, less than half of the analyzed sites (over 20,000 URLs) achieved a GOOD rating. More specifically, 43% of mobile results and 44% for desktop had a GOOD LCP. The average display time obtained in the study was 3.13 seconds for mobile and 3.04 for desktop.
The study also correlated the LCP rating with positions in Google Search results. The data is indeed very interesting, but there are many factors to consider before definitively stating how LCP affects top positions.
Even though the algorithm update will last until spring 2021 (March 2021), it is more than evident that Google wants to give website owners and e-commerce platforms enough time to optimize pages for these UX metrics.
Additionally, Google has announced that it will „actively test” a „fast page” label for sites in the Google index that historically have met or exceeded thresholds for positive ratings for Core Web Vitals, including LCP in this list. Consequently, websites with the „fast page” label are expected to see an increase in organic traffic and time spent on the site.
How do we improve the score for Largest Contentful Paint (LCP)?
Google offers several options for testing Largest Contentful Paint: in the lab (predefined conditions) and in the field (live UX data).
These are:
- Search Console (field)
- PageSpeed Insights (field)
- Web Vitals Extension (lab)
- WebPageTest (lab)
- Chrome UX Report (field)
- Chrome DevTools (lab)
- Lighthouse (lab)
When it comes to testing in the lab vs. in the field, it is a matter of obtaining data, but certainly, both are useful in adjusting and optimizing to reach the „GOOD” threshold. Although you will get more variation in results, lab data provides instant feedback.
However, live or in the field data is much more important when looking at the bigger picture of your site. The values obtained will depend on many intangible factors such as mobile vs. desktop, internet speed, device performance, and so on. Field data is important because it provides insight into how your property performs for all users, not just for you.
To begin the optimization process, Google has provided a roadmap with the most important actions to diagnose a vital element of web page functioning (core web vital).
Note: From the following list, the first 3 points are the most effective, and after implementing the discovered actions, I recommend saving and publishing the changes and not wasting time with 4 and 6. Points 4 through 6 are „important but not essential.” The last point does not apply to 90% of websites.
- Use the new Core Web Vitals report in Search Console to identify pages or groups of pages that need improvement (based on field data).
- After identifying the pages that need improvement, use PageSpeed Insights (provided by Lighthouse and Chrome UX Report) to diagnose using lab and field data for a page.
Are you ready to start the optimization process using lab data? Use Lighthouse and Chrome DevTools to measure Core Web Vitals data and obtain practical guidance to improve the obtained score and pass the GOOD CWV threshold. - Need a customized dashboard for Core Web Vitals? Use the updated CrUX dashboard or the new Chrome UX Report API for field data or the PageSpeed Insights API for lab data.
- Need more information? Web.dev/measure will measure your page and provide you with a prioritized set of optimization guidance using PageSpeed Insights data.
- Finally, use Lighthouse CI for pull requests to ensure there are no regressions in Core Web Vitals before implementing a page change.
Most of the time, the Largest Contentful Paint score is affected by:
- Response time – server/software
- Resources on the page and required bandwidth
- Browser software and plugins
- JavaScript used on the site and CSS code
<iframe width=”722″ height=”438″ src=”https://www.youtube.com/embed/AQqFZ5t8uNc” frameborder=”0″ allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
Many of the actions recommended by Google to optimize LCP are likely already part of your SEO strategy to have a more performant/rapid site.
General Recommendations for Improving LCP
To improve the overall score of Core Web Vitals, as well as Largest Contentful Paint, we recommend the following actions to be performed for your website:
- Remove unused JavaScript code and compile JS code into a single file to be loaded on the site.
- Remove CSS code and compile it into a single file.
- Completely remove Flash elements (if any) and iframes from the site.
Here are a few tips to keep in mind:
- Text will always be rendered faster than other elements that need to be separately fetched, such as images. Therefore, it’s a good idea to use heading tags to denote larger elements.
- Design changes may be necessary where the largest content is simply too slow.
- Optimizing JS and CSS code helps with loading times. However, be cautious about the number of third-party scripts (fonts.google.com / api.x.com, etc.).
- LCP is set in the viewport of the page for mobile/desktop. Footer elements are not relevant for LCP, so it’s best to focus on above-the-fold elements or those that appear in the initial page load.
Conclusions
Like other metrics in the Core Web Vitals set, LCP is of particular importance in distinguishing a site with low performance. Google wants every user, regardless of the device used and the internet connection, to have the most pleasant browsing experience from and to the search engine used.
How is this a bonus for Google?
Very simple. Whoever provides the fastest and most accurate solution is the „best.” Just like in primary school when the teacher asked a question, and the first to answer received a „bravo” or was rewarded with a candy.
If the search engine provides the best results for the user, then it will be the most relevant to use for internet searches.