Deciphering Largest Contentful Paint (LCP), Part of Google’s Page Rank Criteria
Have you recently heard your web developer talking about Google’s algorithm updates and how they’re impacting your website's page rank in search? It’s a big topic in the web community as it has far-reaching implications and can potentially really hurt a site’s page rank.
The updates are centered around Google’s Core Web Vitals and creating a good experience for a website visitor. Sounds good, right? While you definitely want your visitors to have a good experience while browsing your site, it’s important to know what’s going to impact that experience. You may need to make tweaks to your website in order for Google to determine you are delivering that positive experience.
This post will dive into the details around one of the Core Web Vitals: Largest Contentful Paint (LCP), which is all about the page loading experience.
Looking for details on Cumulative Layout Shift (CLS) and website visual stability? Read our first post in this series: Google Algorithm Updates Put Focus on Cumulative Layout Shift.
What Are Core Web Vitals?
In Google search console, the Core Web Vitals are different search criteria that measure three concepts for desktop pages and mobile pages. The three concepts are: page loading, interactivity, and visual stability.
Google officially calls these:
• LCP = Largest Contentful Paint. Relates to page loading speed.
• FID = First Input Delay. Relates to interactivity.
• CLS = Cumulative Layout Shift. Relates to visual stability.
If you're not scoring well on the Core Web Vitals for both your desktop site and your mobile version in recent months, the new focus on the concepts listed above could be factors negatively impacting your site’s page rank.
Not surprisingly, an emphasis on mobile friendly websites continues to grow. However, many designers still have a desktop bias when they design a site, or when a theme is purchased. Yet the mobile version is what Google is most interested in because more and more searches are through mobile.
Page Loading Criteria, or Largest Contentful Paint (LCP)
According to KISSmetrics, 47% of consumers expect a web page to load in two seconds or less. Additionally, they found that a one second delay in page response can result in a 7% reduction in conversions.
The faster your page loads, the better you’re going to rank. Google wants to see that a website is delivering a good user experience. Page load speed depends on the quality of your web hosting, the number of elements on a page that need to load, the file types and size of images on the page, and the number of plugins in use on the website.
Below is the scoring that Google assigns for a site’s LCP rating.
However, there’s more involved in improving your LCP score than merely compressing files and ensuring fast hosting; changes need to be made at the code level in the CSS of the site.
How to View the Largest Contentful Paint Score for Your Website
There’s an easy way to view your Core Web Vitals scores: Google's free Page Speed Insights. Here you enter the website URL and wait for your scores to appear.
Below your score you will find detailed data on LCP, CLS, FID and more.
Next it gives you a list of opportunities and diagnostics for your site, providing you with helpful tasks that you or your web developer can address. Note the toggle at top right where you choose which Core Web Vital to view.
There are many links on the page that provide in-depth information about what the scoring means, and how you can make changes to address it.
How to Improve Your Largest Contentful Paint Score
Let’s start by examining the first two opportunities on the list, which are receiving a score in the red. The first one is ‘eliminate render-blocking resources’. When the drop down for that line is opened, it states: ‘Resources are blocking the first paint of your page. Consider delivering critical JS/CSS inline and deferring all non-critical JS/styles’.
Uhh, what the heck does that mean?! Don’t worry, we speak geek!
Geek Speak Translation: Basically, what that is telling you is that display of a web page can be delayed by dependencies on slow-loading style-related files. These can be files for fonts, animation effects, interactive features, etc. In other words, those elements shouldn’t load first, before showing the visitor the page.
A word about fonts: they can be slow to load because many are loading from Google Fonts. These fonts are not on your webserver, so they load slower.
‘Delivering inline’ refers to a critical element on the page that you want people to see first, for example, a button that needs to show as red. You’ll want to move that CSS markup out of external CSS and into the inline HTML code. This is a faster way for that button to load.
‘Deferring all non-critical styles’ means waiting on the other elements so they can load after the page is visible to the user. Essentially, this is all about the visitor not experiencing a slow loading page.
The next opportunity is ‘reduce unused CSS’. Page Insights states, ‘reduce unused rules from stylesheets and defer CSS not used for above-the-fold content to decrease bytes consumed by network activity.’
Geek Speak Translation: Ask your web developer to reduce or switch out the number of WordPress plugins that are adding extraneous CSS. Your developer will know how to identify any plugins of issue.
This new focus on LCP may result in more web developers seeking out high-performance themes for WordPress, and more theme developers creating them to meet this need.
In Need of an Experienced Web Developer?
We'd be happy to help you audit your Core Web Vitals, review mobile and desktop rankings, and see what needs to be fixed on your site. Contact us for a free, 30-minute consultation.