LCP: what is it and why does it matter?
April 13, 2021
written by
Chantel Keith
what is LCP?
LCP stands for Largest Contentful Paint and it “measures when the largest content element in the viewport becomes visible,” per Google.
When visiting a webpage, a user’s expectation is typically that the content above the fold will load first as this is often the most important content presented to visitors. The longer it takes for this particular content to appear, the more likely visitors are to navigate away from your website due to a poor user experience. It’s crucial to ensure above the fold content is prioritized over all other content on a webpage, which is why LCP has become quite an important factor when quantifying a positive user experience.
why does a good LCP score matter?
LCP is one of Google’s three Core Web Vitals, along with CLS (Cumulative Layout Shift) and FID (First Input Delay). Google will soon begin considering page experience in their ranking algorithm this coming May, so it’s important to understand what these metrics are and how they can be improved.
LCP focuses on the load time of a web page’s content. More specifically, this metric measures how long it takes the largest above the fold element to appear on the page. A good LCP score is 2.5 seconds or below. Additionally, LCP makes up a significant amount of a webpage’s overall performance score with a weight of 25%.
Fortunately, most modern web browsers will prioritize loading content elements based on their position on the page. In addition, there are several techniques available to help improve your LCP score even further if it appears to be lacking.
how to improve a website’s LCP score
images
Images are often found as the largest element above the fold. Most modern browsers have lazy loading built-in for these resources. Simply by adding a “lazy” attribute to your media assets and setting it to “eager”, will tell the browser to load this element as quickly as possible. You’ll also want to make sure that if you have a slideshow above the fold, any media elements in the first slide are also set to lazy load eagerly. Subsequent slides may be set to load lazily as these are not yet visible on load.
server speed
The most common culprit of a low LCP score is caused by sluggish servers. In a perfect world, we would be serving up static pages to all of our visitors all of the time; however, due to many conflicting technical requirements, this isn’t always possible.
At 300FeetOut, we have the majority of our websites hosted on Pantheon which seems to have pleased Google so far. If your website happens to be hosted on a shared server, you may want to look into upgrading to a dedicated server or considering a CDN such as Cloudflare to quickly serve up cached content to visitors.
resource optimization
The way a webpage’s CSS and JS resources are loaded can also cause delays in above the fold content rendering. One of the common best practices for resource loading is to minify CSS and JS files to shave over half a second or so of LCP time. Additionally, inlining critical above the fold CSS while deferring below the fold CSS and JS can improve your LCP score. Lastly, preloading important images, fonts, videos, CSS or JS files will help as well.
It will be helpful to focus on improving your LCP score before working on CLS as most of the performance issues affect both the LCP and CLS scores. Feel free to contact us if you’d like assistance with an audit of your website or need help getting your Core Web Vitals in shape before it begins affecting your website’s ranking.