LCP measures how long the largest visible element takes to appear when the page opens, nearly always the image at the top or the big headline. To bring it down, first find out which element it is, then go after its cause: a server slow to start answering, a heavy image, an image postponed by mistake, or CSS holding up the first paint. Changing everything at once only muddies the result.
Step 1: find the element
| 1 |
Open PageSpeed Insights, paste the address of the page that matters (not only the home page) and pick the mobile tab.
|
|
| 2 |
In the diagnostics look for the “Largest Contentful Paint element” line. It shows the exact element: an image, a block of text or a background.
|
|
| 3 |
Write the numbers down before touching anything. With no “before”, the “after” proves nothing. How to read the tools is in measuring your site speed.
|
|
Step 2: see what the wait is made of
LCP is not a single number. It is the sum of four waits, and each has its own remedy.
| The wait |
How it shows |
What to do |
| The server is slow to answer |
The whole page starts late, even with few images. |
Page caching and less work for PHP. See high TTFB. |
| The browser finds the image late |
The image comes from CSS (background-image), from a script or from a carousel. |
Put the image in the HTML as a plain <img>, not deferred. |
| The image is slow to download |
The file has far more pixels or weight than the screen shows. |
Reduce dimensions, compress, use WebP or AVIF. See image optimisation. |
| Painting is blocked |
The image has arrived but only shows later. |
Less CSS and JavaScript at start-up, and fonts with font-display. See the PageSpeed warnings. |
Step 3: the fixes that pay most
| 1 |
Do not defer the top image. The loading="lazy" attribute is for what sits off-screen. On the main image it makes the browser wait before asking for it. Some themes and plugins put it on every image: check the HTML.
|
|
| 2 |
Tell the browser it matters. On the main image you can use fetchpriority="high", and when it only appears through CSS or a script, a <link rel="preload" as="image" href="..."> line in the head brings the request forward.
|
|
| 3 |
Give it the right size. A multi-megabyte phone photo in a small box makes every visitor download the whole thing. Shrink it before uploading.
|
|
| 5 |
Test twice and keep the middle value. The first visit to a cached page is always the slowest.
|
|
|
A carousel (slider) at the top is one of the worst cases. The image is requested by a script, sometimes only after another script has loaded, and LCP pays for all of it. If LCP is your problem, a single well-sized image fixes more than any tweak.
|
|
On a phone the element may be a different one. A big headline can beat the image on a small screen. Always test on the mobile tab and see which element it names there. The limits Google counts as good or poor are on web.dev and they change: check them there.
|
|
Found the LCP element and the time is still high? Send us the page address and the report, and we will tell you what belongs to the server and what belongs to the site.
Open a support ticket
|
RECOMMENDED PRODUCT Web hosting with cPanel Domain and SSL included, daily backups and the panel you already know. from 321,75 MT/mo (3-year plan, with coupon) See plans |
Português
English
