How to fix Largest Contentful Paint element for page-hero?

Hi there,

I believe you're using the post's featured image as a background for the Header Element?

You can try David's suggested PHP here - https://generatepress.com/forums/topic/cls-problem-with-slideout-overlay-and-page-hero/#post-1774501

And further advice here - https://generatepress.com/forums/topic/cls-problem-with-slideout-overlay-and-page-hero/#post-1775314

The code basically preloads the background image and assigns it as the background image using CSS.

Make sure you clear Cloudflare's cache after applying this so it serves the latest change of the site.

Hello @Elvin,

Thank you for your kind support!

Yes, I am using the post’s featured image as a background for the Header Element, as well as, on the home page for the latest post.

I applied @David’s suggested PHP as described here: https://generatepress.com/forums/topic/cls-problem-with-slideout-overlay-and-page-hero/#post-1774501

I modified the @media max-width to 700px instead of 500px since all my feature images are 700px width.

add_action( 'wp_head', function() {
    if( is_single() ) {
        $featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'medium'); 
        echo '<link rel="preload" as="image" href="'.$featured_img_url.'"/>';
        echo '<style>
        @media(max-width: 700px) {
            .page-hero { background-image: url('.$featured_img_url .');}
        }
        </style>';
    }		
});

It doesn’t seem to work either. It does seem to improve the Largest Contentful Paint Element.
This is the largest contentful element painted within the viewport.

I cleared the Cloudflare cache multiple times:

Post: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fcharbelnemnom.com%2Fdetect-a-brute-force-attack-with-azure-sentinel%2F

HomePage: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fcharbelnemnom.com%2F&tab=desktop

Any suggestion, please?

Thank You!
-Charbel

Hi there,

if i check the PSI reports you linked to i see the FCP time is 2.8s - that needs to be improved first, as LCP will never be less then LCP, and any improvements made to FCP will generally improve the LCP time.

So looking at the PSI report there are several opportunities to improve:

1. Reduce initial server response time - this is something you should check with your host.
2. Defer offscreen images - use a Lazy Loading plugin to defer their loading
3. Reduce unused JavaScript & (under Diagnostics ) Reduce the impact of third-party code - these are 3rd party advert codes which don't need to be loaded in the critical path. You can use a Plugin like Flying Scripts to reduce defer the loading of those scripts.

You need to make those improvements before you can looking at optimizing the LCP.

Thank you @David for your help and feedback as always!

Please note that the PSI report that you saw from the link I shared above is showing both, the Original summary which is dated to the last 28 days where the FCP/LCP are between 2.2 to 2.7.
However, if you look at the Lab Data (current performance) below, we see much better results, FCP/LCP are below < 1.2.

I need to improve the Largest Contentful Paint element for the background image which is indicated under Diagnostics section - 1 element found.
It's the same for the home page, as well as, for the post.

Could you please advise?

Thank You David!

As note the Origin Summary is for ALL pages that data has been collected - not the specific page you see under the Lab Results.
The code provided by Elvin isn't going to work as you have webP image conversion. So currently with that code being added your just loading a JPEG file that isn't used as the server is converting a later request to webP.

When i re-run the PSI test you linked to above - i get really huge fluctuations in LAB timings - these are the Mobile test:

FCP: 2.8 LCP: 2.8
FCF: 2.8 LCP: 3.6
FCP: 2.8 LCP: 4.1
FCP: 2.8 LCP: 8.4 (!!!)

The one static part is the FCP - which is above where you want it to be. The LCP sometimes matches that timing which is good - but the fluctuations show that other code is being loaded 'sporadically' and interfering with the render of that image.

I ran a few chrome Dev performance tests and each time the load order for various scripts changes. You may want to speak to the host about this.

One thing i see is a lot of advert scripts being loaded sometimes before the LCP request. Ideally you should defer ALL advert scripts so they don't bog down the browser from completing the render.

Thank You @David for the details, much appreciated!

Please note that I have removed the code-shared by @Elvin since I use Cloudflare and it's converting the images to webP. As you confirmed, I won't get the benefit of that.

Please note that I spoke to my host and I upgraded the size of the server and added the Accelerated Networking feature.
Accelerated networking enables single root I/O virtualization (SR-IOV) to a VM, greatly improving its networking performance. This high-performance path bypasses the host from the datapath, reducing latency, jitter, and CPU utilization, for use with the most demanding network workloads.

Additionally, I have also enabled Cloudflare Argo smart routing feature.

So I made the maximum performance possible to the server/network, however, I can't take out the advert scripts.

Could you please recheck and advise if we can do something to the Largest Contentful Paint element - 1 element found under diagnostics?

Post: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fcharbelnemnom.com%2Fdetect-a-brute-force-attack-with-azure-sentinel%2F

HomePage: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fcharbelnemnom.com%2F&tab=desktop

Any suggestion, please?

Many thanks, David!

The issue remains the same.
I am still seeing huge variations in Lab Data timing when i run multiple tests
Below the Lab Data in the PSI report you can can check > Show audits relevant to: LCP.

You will see only the opportunities and diagnostics relevant to the LCP.

None of the tests report any issues with image sizes.
The 3 issues that always show ( some tests show more are):

Reduce initial server response time
Reduce unused JavaScript
Eliminate render-blocking resources

Those are the issues to be resolved to improve LCP.

In regards to advert scripts - i didn't mean remove them, but to defer their loading so the criticial path is loaded, FCP and LCP are rendered and then those scripts are loaded.

However, as a general rule Background images are always going to be slower loading as they rely on CSS. May be worth exploring NOT using a Header Element and just display the Featured image.

Thank you @David, much appreciated!

Could you please advise how to test and remove the Header Element and just display the Featured Image?
I would like to explore that option and see if I get some improvement.

Thank You!

In Appearance > Elements - Quick Edit the Header Element you have set to display on Posts and set the Status to Draft. This will temporarily remove it and the default them settings should apply.

Thank you @David,

It looks nice, however, I did not clear the cache publicly yet, so I can see it from my side only.
Now the picture is clearer without text on it.

However, what I have noticed is the Title and details are above the featured post image.
I would like to have the Featured Image image first and then the rest (Title, etc).
Could you please advise if this is possible?

Thanks!
-Charbel

Go to Customizer > Layout > Blog --> Featured Images, select the Posts tab, and change the Image location to Above Title.

Thank you @David, much appreciated!

I cleared the cache from my side. You should be able to see it now from your side.

Could you please advise if I still can I improve something?
Is the layout correct now? It's a big change from the Background image to display the Featured Image.
Does any suggestions please?

Thank You!

Not seeing the change yet, and neither is Google - may take a while for the CDN to propagate or some other server page caching needs clearing.

Hello @David,

Maybe you can check another article here which is not cached on CDN yet.

https://charbelnemnom.com/audit-subnets-that-do-not-have-network-security-group-associated/

Could you please verify the design layout and performance?

Many Thanks!!!