Seeing LCP issues reported in Google Search Console Core Web Vitals reports? In this blog post RankYa simplifies what LCP errors are all about, and what you can do for fixing them.
What is LCP & Why is it Important?
Search Console LCP (Largest Contentful Paint) issues are related to rendering of a web page. It is the loading of the main web page area that internet browsers such as Google Chrome needs to parse/calculate so that it can show that main web page area to website visitors within short amount of time (less than 2.5 seconds).
Video Tutorial Details What are LCP Issues
Video Tutorial Showing Insights for Fixing LCP Issues
To simplify: for Google Chrome to show web page Menu area, compared to showing web page footer area, different CSS or JavaScript calculations need to be computed by Chrome. This means, Largest Contentful Paint is an important main web page area shown to people before other parts of a web page is loaded.
When LCP takes too long to load *more than 4 seconds, this provides a bad user experience, hence Search Console Core Web Vitals reports groups website URLs, and then shows these URLs as “Poor URLs” or URLs that need improvement. Below image shows the scores for mobile and desktop.
Core Web Vitals are a Google ranking factor, poor URLs can cause a website to get less clicks coming from Google search.
LCP issue: longer than 2.5 s
Need Improvement: web site visitors using Google Chrome visited your web page, but waited longer than 2.5 seconds before seeing the main web page area (Largest Contentful Paint).
Depending on your resources, type of Content Management System your website is built upon, as well as competitiveness of your industry, you can often times ignore fixing “URLs that Need Improvement” as this LCP issue is less severe. But if you do have the time and resources you may conduct basic web site optimization techniques.
When you see “LCP issue: longer than 2.5 s (mobile)” in search console, do keep in mind that, loading the web page main area in less than 2.5 seconds is not easy for most websites built on popular content management systems such as WordPress Shopify WiX or even Blogger.
LCP issue: longer than 4 s
Poor URLs: Any web page visited by any device, when loading the main web page area takes longer than 4 seconds, Google Search Console will report these (both Mobile and Desktop) as Poor URLs, and show you “LCP issue: longer than 4 s (mobile)” message.
How-to Troubleshoot LCP Errors
Simply analyze Search Console example URLs.
Use free tools such as PageSpeed Insights or Web Developer Toolbar “Performance” Analysis.
How-to Fix LCP Issues
Once you identified what is causing LCP issues on your website, follow these basic insights to fix these errors:
Improve Server Response Time
A web page is a RESOURCE on a web server. The time it takes for a web server to respond to HTTP request requesting a resource will directly impact how fast a web page can start rendering.
Imagine a website visitor located in Melbourne Australia requesting a web page hosted in Canada, it will take many different servers to communicate with each other before the web page address can be found, and rendered.
Now imagine a website visitor located in Melbourne Australia requesting a web page hosted in Melbourne Australia, this will most likely require couple of Mobile Towers to find the URL (Uniform Resource Locator).
- Choose a better and faster hosting provider: Opting for a more powerful server or a hosting solution optimized for speed can make a significant difference in performance. Furthermore, often times, this may be cheaper alternative for fixing Core Web Vital issues.
- Implement caching: Caching stores static versions of web pages, allowing the server to deliver them much faster on subsequent requests. Consider server-side caching, browser caching, and CDN caching.
- Optimize your database: A slow database can bottleneck your server’s response time. Regularly optimize your database by removing unnecessary data, indexing properly, and ensuring efficient queries.
- Use a Content Delivery Network (CDN): A CDN distributes your website’s static assets (images, CSS, JavaScript) across multiple servers geographically closer to your users, reducing latency. This can be important if your target audience is around the globe, but, using CDNs may not be ideal for most local businesses. Because finding the right server location can help with many things related to Google rankings.
Optimize Images
Large, unoptimized images are a common culprit for poor LCP scores. Here’s how to optimize them:
- Choose the right image format: although using WebP format may offer superior compression and quality it may not be the best solution. Regardless of image format used on a web site, you can optimize WebP JPEGs or PNGs.
- Compress your images: Reduce file sizes without significant quality loss using plugins or software programs. RankYa tip: stop using Image Optimization Plugins that modify image URL. For example.png image file name is different compared to example.png.webp as far as Google search engine indexing is concerned.
- Use responsive images: although most modern Content Management Systems do use img srcset, if yours doesn’t consider serving responsive images.
- Specify image dimensions: Including width and height attributes for images can help loading of images as well as prevent layout shifts as the page loads.
- Lazy-load offscreen images: Defer the loading of images that are not immediately visible in the viewport. This can be achieved using the loading=”lazy” attribute on img tag. You can also use decoding=”async” on img tags to decode the image asynchronously and allow other content to be rendered before image loading completes.
Reduce render-blocking Stylesheets and Scripts
Browsers need to download and parse CSS and JavaScript files before they can render the web page. Render-blocking resources delay the initial rendering and can significantly impact LCP.
- Minify CSS and JavaScript: Remove unnecessary characters (whitespace, comments) from your CSS and JavaScript files to reduce their size.
- Defer or asynchronously load JavaScript: Use the defer or async attributes for non-critical JavaScript files. defer executes scripts after the HTML is parsed, while async executes scripts asynchronously without blocking parsing.
- Optimize and Inline Critical CSS: Identify the CSS necessary for rendering the Largest Contentful Paint area (usually above the fold area) and then include it directly in the HTML head section. This will allow the browser to render the visible part of the page immediately often times, just optimizing the CSS loading will fix LCP issues.
- Remove unused CSS and JavaScript: Eliminate any CSS rules or JavaScript code that are not actually used on web pages. Chrome DevTools can help identify unused code through Coverage Report.
What’s Next?
Core Web Vital errors shown in Google Search Console aren’t going to fix themselves, and, any Poor URLs that aren’t fixed is significantly affecting your search engine rankings. You now know how to improve your website’s LCP score so that you can provide faster, more enjoyable user-experience for your website visitors, and Google will reward you accordingly.
Google search engine results page and Google ranking requirements are changing (and will continue to change). This means, user-experience is a critical part of Search Engine Optimization for top Google rankings, in fact, by simply improving the user-experience of a website you can immediately increase website traffic.
