Search Console: Fix “LCP issue: longer than 2.5s (mobile)” Issue

This content is marked source of information.

LCP metric is used to evaluate the usefulness of the page for the user. LCP is measured by Google via several devices with variable network bandwidth. If the average LCP is longer than 2.5 seconds, it leads to bad user experience.

LCP is now known to be the most accurate metric to measure good user experience. Historically, FMP (first meaningful paint), overall load time, and speed index metrics were considered important in user experience reports, however, LCP has gained attention due to its realistic approach to measure user experience.

What causes higher LCP (Largest Contenful Paint) time?

Technically speaking, longer LCP is caused by slow server response times, render-blocking JS & CSS resources, other internal and external resource load times, and client-side rendering factors. In easy words or practically following issues can lead to higher LCP:-

• Poor Server Performance i-e: low bandwidth available on the server
• Poorly configured cache setup
• Technical faults such as too many redirects and then 200
• Too many scripts and style files in the head of html document
• Too many or even one image with too high size that takes longer time to fetch and load
• Heavy fonts or multiple font imports
• Low internet bandwidth on the client-end

Steps to Fix Longer LCP time Issue

Okay. Let me tell you one thing. Optimizing or fixing one thing on the page will not show you quick improved results in the core web vitals assessment or even page speed insights tests.

Here you need to understand the LCP means LARGEST contentful paint. The largest paint happens when nearly all resources on the page have been loaded COMPLETELY.

So we need to look into everything that is playing part in LOADING. With the help of developer tools, we can find out which ones are LCP elements on our page and where they’re taking time to load.

LCP has 4 sub-parts. Each LCP element can be investigated for each of the 4 sub-parts to figure out where exactly the load time is high. Once we know that exact rendering phase, we can optimize that part for that resource.