This guide is going to take an in-depth look at the former, Largest Contentful Paint. We will explain what LCP is, how it can be measured and improved, its impact on search engine optimization, and much more.<\/p>\n
What is LCP?<\/h2>\n
Google<\/a>, the search kings behind LCP, encapsulate the measurement with the following description:<\/p>\n \u201cLargest Contentful Paint (LCP) is an important, user-centric metric for measuring perceived load speed because it marks the point in the page load timeline when the page\u2019s main content has likely loaded.\u201d<\/em><\/p><\/blockquote>\n With the LCP, this only covers content that is present within the viewport. This means if any content exists beyond the screen, it isn\u2019t counted as part of the metric.<\/p>\n As mentioned above, the Core Web Vitals have been introduced to improve user experience for those visiting websites. However, what difference does LCP make in that regard?<\/p>\n In essence, LCP is an aspect that assists with optimizing website speed. Now whether you\u2019ve worked on SEO for 10 days or 10 years, you\u2019ll understand that speed has been integral for success. Visitors don\u2019t like slow websites, and (crucially for organic search) neither does Google.<\/p>\n In fact, they dislike it so much they introduced these Core Web Vitals to push site owners into further refining page load speed.<\/p>\n If the LCP isn\u2019t performing to an acceptable level, this will negatively impact how long it takes for the webpage\u2019s main content to load. This content is the reason why users are visiting in the first place. As a result, the longer this takes to display correctly, the more likely a visitor will depart for an alternative site \u2013 aka one of your competitors.<\/p>\n There\u2019s no guesswork required when it comes to understanding what is and isn\u2019t an acceptable LCP score. This is because Google provides clear guidelines about how they judge LCP speed. Here are the measurements used:<\/p>\n Achieving a \u201cgood\u201d grade is, obviously, the main target. While \u201cneeds improvement\u201d is certainly a step in the right direction compared to a \u201cpoor\u201d score, optimization (and the best results from an SEO perspective) is only achieved by hitting the 2.5 seconds or less threshold.<\/p>\n The good news is that it\u2019s relatively easy to measure your LCP performance. First you need to know the types of elements that fall under the LCP umbrella. These include:<\/p>\n It doesn\u2019t take much effort to understand your webpage\u2019s LCP performance. All that\u2019s required is for you to look at the page, identify the largest block-level element, and see if any further work is necessary. For instance, you might decide to optimize an image by making the file size smaller. Alternatively, you could opt to remove an element entirely if it\u2019s taking too long to download.<\/p>\n Also keep in mind that you don\u2019t have to necessarily refine every single page on your website. As Google puts it<\/a>: \u201c\u2026If at least 75 percent of page views to a site meet the “good” threshold, the site is classified as having “good” performance for that metric.\u201d However, there is some trepidation with this stat. For example, if you have 74% \u201cgood\u201d page views alongside 26% \u201cpoor\u201d ones, your site will be classed as having \u201cpoor\u201d LCP performance overall.<\/p>\n Note: due to Google\u2019s policy with their mobile-first index, it makes sense to first measure and optimize performance via the mobile viewport. Once done, you can move onto the desktop side of things.<\/p>\n Are your webpages failing to land in Google\u2019s \u201cgood\u201d books for LCP? If so, you will want to change the situation \u2013 and fast.<\/p>\n Before you decide to implement changes, however, it\u2019s important you first measure LCP performance accurately. Fortunately, whenever you want to check Core Web Vitals, there are numerous tools available. These include:<\/p>\n After using one of the aforementioned tools, you can compare your webpages against the recommended indicators. Are they hitting that all-important \u201cgood\u201d grade? If the answer is \u201cNo\u201d, it\u2019s time to look at ways to improve LCP for your site.<\/p>\n Here are some top tips to follow:<\/p>\n When you want to fix Core Web Vitals (and not just LCP) you require a strong foundation for performance. One of the key starting points is selecting a high-quality web host provider that delivers fast speeds for your website.<\/p>\n First analyze how your current hosting plan is doing. If your pages are loading slowly due to the host\u2019s server location not aligning with your primary audience\u2019s location, it\u2019s time to start searching for a new provider. However, even if your current host is performing well (just not great), you\u2019ll still want to switch things up. Even a minimal boost in hosting speeds can make a massive difference overall.<\/p>\n As the name implies, a content delivery network (CDN) is used by website owners to speed up their content being transferred to users. Naturally, if this boosts the loading speed of your content, it in turn improves your LCP performance.<\/p>\n A CDN is particularly beneficial if your website caters to an international audience. Say your website is located on a server in the US, but there\u2019s a chunk of visitors based in France. Rather than them having to deal with reduced load speeds due to location, the CDN will ensure they gain quick access to your site.<\/p>\n No, this doesn\u2019t necessarily mean changing the dimensions of your images. What it does mean, however, is you should optimize the file size of your images. If your images are in a format like PNG and haven\u2019t been altered since their original creation, they could be adding unnecessary weight to your webpages.<\/p>\n There are a number of ways you can refine your images without compromising their quality. Firstly, you can switch to a more suitable image format \u2013 either JPEG or WebP work \u2013 to lower the file size. Additionally, you can further minimize their size with the assistance of an image compressor. There are many free image optimization tools available<\/a> to download or use online.<\/p>\n By minifying CCS files and superfluous Javascript on your webpages, this will naturally help with your LCP improvement efforts. Think about it: if you compress files on your website which are unnecessary, this results in an improvement in page load speed.<\/p>\n Google even has this handy info<\/a> about optimizing CSS:<\/p>\n \u201cRemove any unused CSS entirely or move it to another stylesheet if used on a separate page of your site. For any CSS not needed for initial rendering, use loadCSS to load files asynchronously, which leverages rel=”preload” and onload.\u201d<\/em><\/p>\n Now you might not feel like they\u2019re a priority, but text files can add a surprising amount of weight to your webpages. However, it\u2019s possible with resources like Gzip<\/a> to compress your text files.<\/p>\n It typically won\u2019t make as much difference as, for instance, compressing your images will. Yet when you\u2019re attempting to squeeze everything out of your pages to achieve that \u201cgood\u201d score for LCP, condensing your text files can ultimately make all the difference.<\/p>\n If you\u2019ve done SEO auditing<\/a> in the past, you\u2019ll be well aware that Google prioritizes sites that are fast. While page speed already features as part of its ranking algorithm, they\u2019re taking the next evolutionary step in this area with their Core Web Vitals. Now Google wants to ensure all elements of your site are performing fast, so you ultimately deliver a quality user experience.<\/p>\n Do you benefit from a fast site already? In this case, you might believe you\u2019re in the clear with LCP. However, various recent studies have been conducted that demonstrate a lot of sites are missing the mark. For example, in August 2020 Screaming Frog noted that, out of the 20,000 well-ranking URLs they tested, 57% mobile and 56% desktop URLs didn\u2019t achieve a \u201cgood\u201d LCP score.<\/p>\n As for how LCP impacts your SEO ranking, the data is not yet clear. Ultimately, there are many ranking factors that come into play. Yet with the emphasis Google has placed on the Core Web Vitals as a whole, it seems likely LCP will play an important role in the future as page experience becomes a primary focus for the search engine giants.<\/p>\n LCP, as with page speed in general, is important and it needs to be a focus of your SEO efforts. Although with the technical nature of LCP, you may not feel comfortable trying to make any fixes to your website on your own. This is where you can receive professional assistance with our managed SEO<\/a>.<\/p>\n Also make sure to keep a continual eye on our comprehensive Knowledge Hub<\/a>. With this resource, you can learn all about Core Web Vitals 2022 updates and beyond.<\/p>\n![\"\"](\"https:\/\/www.staging-uk.clickintelligence.com\/wp-content\/uploads\/2022\/04\/Blog-graphics-5-e1652700874323-300x190.png\")
As for what \u201cmain content\u201d means, this is viewed as the largest media or block of context that\u2019s situated within the user viewport. Aspects that\u2019ll typically come into the equation include block-level text elements (think heading and paragraph tags), images, background images, and video poster images.<\/p>\nHow does LCP impact user experience?<\/h2>\n
What is a good LCP score?<\/h2>\n
\n
![\"\"](\"https:\/\/www.staging-uk.clickintelligence.com\/wp-content\/uploads\/2022\/05\/Blog-graphics-7-e1652701638183-300x78.png\")
<\/p>\nHow is LCP measured?<\/h2>\n
\n
![\"\"](\"https:\/\/www.staging-uk.clickintelligence.com\/wp-content\/uploads\/2022\/05\/Blog-graphics-6-300x169.png\")
<\/p>\nHow can LCP be improved?<\/h2>\n
\n
Select a quality web host provider<\/h3>\n
Use a content delivery network<\/h3>\n
Refine the size of your images<\/h3>\n
Minify CSS<\/h3>\n
Compress text files<\/h3>\n
How does LCP impact SEO?<\/h2>\n
In conclusion<\/h2>\n
![\"New](\"https:\/\/no-cache.hubspot.com\/cta\/default\/4203198\/9eb0ac7f-9041-40db-a6df-e7ba5b92cf53.png\")
<\/a><\/span>