Optimizing LCP, Largest Contentful Paint result

Notes about Core Web Vitals optimization challenge

Gennaio 4, 2023

Core web vitals are a set of metrics that measure the user experience of web pages. They focus on loading performance, interactivity, and visual stability of page content. The Core Web Vitals metrics are: Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS).

LCP (Largest Contentful Paint) is a metric that measures the time it takes for the largest content element on a page to render. It is a key metric for understanding the performance of a page, as it is the first major visual element that users see when they visit a page.

Optimizing Web Core Vitals results, notes

To speed up the loading of the site and improve performances I’ve removed Facebook script sdk.js and loaded it only when the user requests to login, when the login HTML layer is shown.

Also implemented YouTube facade. YouTube iframe has a js file greater than 500kb!

Merged and minified local CSS and javascript, also ported jQuery, normalize and other external resources in local files (and merged all together).

Final page HTML output is minfied and cached (to minify I’ve used this PHP).

I’ve reduced the size of the CMP to avoid Web Vitals consider it the LCP element. With Quantcast CMP it was a bit tricky, done using their advanced CSS feature (CSS code below in comments).

Another tip read around the web is to remove lazy attribute from important pic if it is the LCP element (done, but I can’t verify if it is working, since that image was already the LCP element).

Here this site suggests to add fetchpriority attribute on important image (inserted, but I can’t verify if it is working, since that image was already the LCP element).

I also changed the expiry time of the assets in the CDN, from 1h to 365d, it needs to be checked because there are also JS and CSS resources in the CDN which could be unpleasant to have difficulty refreshing cache. (Not tested, but I have to).

Exaustive article here about image tag and performance CWV.

Fixed all Best practices, SEO and Accessibility pointed by Google page speed test.

I hope this is enough!

TO DO: Check if results get better in Search Console > Essentials.


PHP expert. Wordpress plugin and theme developer. Father, Maker, Arduino and ESP8266 enthusiast.

Comments on “Optimizing LCP, Largest Contentful Paint result”

2 thoughts

  1. Luca ha detto:

    Hi Giulio, how have you fixed Quantcast CMP? There’s an example site where I can see the final result please? Thanks!

  2. Giulio Pons ha detto:

    I don’t know if “fixed” is the correct word. I’ve modified the CSS settings overrides with these rules. They reduce a bit the CMP size and delay the visualization after 3 seconds. In my case now the first image is the LCP element (this was what I want) and global Performances value has improved from < 50 to ~60 or grater depending on page templates.
    Here is the css used:
    #qc-cmp2-ui {transform:scale(.9);}
    .qc-cmp2-container {position: relative; z-index: 10000; -webkit-animation: 3s ease 0s normal forwards 1 fadein; animation: 3s ease 0s normal forwards 1 fadein;}
    @keyframes fadein{ 0% { opacity:0; } 66% { opacity:0; } 100% { opacity:1; } }
    @-webkit-keyframes fadein{ 0% { opacity:0; } 66% { opacity:0; } 100% { opacity:1; } }

Comments are closed


Count coloured cells on Google Sheets with reference

In a Google spreadsheet if you need to count cells based on their background color you can use this code…

Maggio 22, 2020

Social buttons: the fastest way for WordPress, without plugins

NOTE: the code in this post is written for WordPress but you can easily translate it in any language. You’re here…

Settembre 15, 2015

Get Google Plus Follower count from PHP in WordPress

I’ve found a similar function to retrieve the number of followers of a Google Plus page, inside WordPress, but it…

Maggio 7, 2014

Refresh a Google Adsense banner with Javascript

Often bloggers and site owners use galleries to have a greater number of pages, adding pages means adding clicks. Each…

Novembre 9, 2013

Top Social Stories plugin and widget for WordPress

Just released a plugin for WordPress that can be used to track your posts on Facebook, Twitter and Google+. When…

Novembre 3, 2013

PHP google images mini bot

UPDATE 2013/12/12: Now, in the  Mini Bot Class there is a version of this function that is still working. You…

Marzo 30, 2010