[Support request] How to fix Largest Contentful Paint element for page-hero?

[Charbel]

One more question please @David,

How can I add the Post Category Tag back? This was lost after removing the Header Element.

Thank You!

[David]

The image layout looks good to me.
But the same issues still apply regarding performance.

What function did you use to include the reading time in the post meta ? As you will need to update that to include the Category Terms. Can you share the code ?

[Charbel]

Thank you @David,

Please find below the function that I am using for the Reading Time:

/***** Adding Reading Time Blog *****/
function tu_estimated_reading_time() {
    $post = get_post();
    $content = $post->post_content;
    $wpm = 300; // How many words per minute.
    $clean_content = strip_shortcodes( $content );
    $clean_content = strip_tags( $clean_content );
    $word_count = str_word_count( $clean_content );
    $time = ceil( $word_count / $wpm );
    return $time . ' minutes';
}
add_filter( 'generate_post_date_output', function( $output ) {
    $output .= '<div class="read-time">Reading time: ' . tu_estimated_reading_time() . '</div>';
    return $output;

Could you please advise?

[Charbel]

Hello @David,

Hope you are doing well.

Quick update from my side.

Please note that I just reverted back to the Header Element for Post. Since we did not see any improvement for the Largest Contentful Paint element – 1 element found under Diagnostics using both approach (Header Element / Display the Featured image). Google PSI is always complaining about the Featured image with both methods.
Additionally, the layout design with Page Hero for the Header Element is nicer.

What I have done is the following steps (changes):

1- I removed the content from the Header Element for all posts (post_title, post_author, category, post_date, and modified_date) by adding <!--This is a comment--> as described in Step 1 here: https://docs.generatepress.com/article/how-to-create-a-page-hero/#step-1-add-the-content

2- I disabled/removed the function for Adding Reading Time in functions.php that I shared in the previous comment (above): https://generatepress.com/forums/topic/how-to-fix-largest-contentful-paint-element-for-page-hero/page/2/#post-1818951

3- I created a new Hook for Post to display Reading time by executing the following PHP function in the Hook (generate_after_entry_title). X Min. Read – Set to Priority 10.

<?php
function custom_estimated_reading_time() {
    global $post;
    $content = $post->post_content;
    $wpm = 300; // How many words per minute.
    $clean_content = strip_shortcodes( $content );
    $clean_content = strip_tags( $clean_content );
    $word_count = str_word_count( $clean_content );
    $time = ceil( $word_count / $wpm );
    return $time . ' Min. ';
}
?>
<div class="read-time"><?php echo custom_estimated_reading_time() ; ?>Read</div>

4- I created a new Hook to Generate Post Meta Before Title by executing the PHP function in the Hook (generate_before_entry_title) set to Priority 5. If I used Priority 10, the Post Meta won’t gets displayed before the Title. I followed @Tom post here to get this function working: https://generatepress.com/forums/topic/show-the-categories-and-the-date-above-the-title/#post-340500

<?php
remove_action( 'generate_after_entry_title', 'generate_post_meta' );
add_action( 'generate_before_entry_title', 'generate_post_meta' ); 

add_filter( 'generate_post_date_output', 'tu_categories_to_date' );
function tu_categories_to_date( $output ) {
    $categories_list = get_the_category_list( _x( ' | ', 'Used between list items, there is a space after the comma.', 'generatepress' ) );
    $categories_list = sprintf( '<span class="cat-links"><span class="screen-reader-text">%1$s </span>%2$s | </span>',
        _x( 'Categories', 'Used before category names.', 'generatepress' ),
        $categories_list
    );

    return $categories_list . $output;}
?>

Conclusion:
I like the new Layout/Design by integrating those 4 steps. Could you please advise if what I have done above is correct?

I have noticed that Google PSI is now complaining about Excessive DOM size.
Maximum DOM Depth (13): Author Name Link: <span class="author-name" itemprop="name">
Maximum Child Elements (110): <div class="entry-content" itemprop="text">

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

Could you please advise for any performance improvement?
I saw your post here to Avoid an excessive DOM size, but I am not sure if this works on my site: https://generatepress.com/forums/topic/avoid-an-excessive-dom-size/#post-1656825

Finally, any advise about improving the LCP for the Header Element (feature image)?: <div class="page-hero grid-container grid-parent overlay">

Your help is highly appreciated. I spent too much time try improving it.

Many Thanks, @David!!!

[David]

Those changes look fine to me.
To cover Excessive DOM Elements, the Maximum Child Elements is the ‘problem’ one – anything over 65 will raise the flag.
https://web.dev/dom-size/#how-the-lighthouse-dom-size-audit-fails

Apart from reducing the amount of content on the page or using page breaks there isn’t much you can do about this.

Note this is just a Diagnostic, it doesn’t directly impact performance. It only becomes a problem if the site requires a lot of CSS or Javascript eventListeners. The more DOM elements and the more styles/scripts can lead to longer layout calculation times or longer delays for the browser to respond to user input. If it were an issue you would most likely see CLS problems or long input delay times.

LCP – considering removing the Header Element which would load slower then the default Featured Image, i am not sure ther is anything that we can do to make an improvement, as the underlying issue still exists ie. lots of other code being loaded before the image can be displayed. Last attempt – try this:

1. remove the Featured Image background from the header element.
2. Add this PHP Snippet:

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

[Charbel]

Thank You @David, much appreciated!

The Excessive DOM Elements and Maximum Child Elements are clear to me now. Thanks!

Please note that I have added the PHP Snippet you shared above to remove the Featured Image background from the header element. I forced clearing the cache from all CDNs. What this code exactly do? I did not notice any changes.

You might need to run Google PSI more than once: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fcharbelnemnom.com%2Fenable-adaptive-application-controls-in-azure-security-center%2F&tab=desktop

Could you please check again from your side. Do you see any improvement?
I still see the Largest Contentful Paint element 1 element found: <div class="page-hero grid-container grid-parent overlay">

Thank You!

[David]

That code adds a preload link to request the featured image – you cab see it appears higher up the network requests here:

And immediately after that request it adds the inline CSS to apply the image to the Header Element Background.
This improves the loading time of that image.

If you want you can move it up higher in the critical path. Change the last line of the code from this:

});

to:

},0);

This will ‘should’ make it the very first request in the chain.

If that does not improve the LCP timings and you’re still seeing huge differences in times when running multiple PSI tests then the issue is not related to the LCP element.

[Charbel]

Thank you @David for these in-depth details!

Please note that I have changed the last line of the PHP code from this:

});

to:

},0);

I forced clearing the cache from all CDNs. I still don’t see any changes from my side.
Could you please check and confirm the LCP timings?

If you confirm that the last changes did not improve the LCP timings, could please give me guidance on where should I look to improve?

Thank You!

[David]

Well the code did what it was meant to do:

You can see the image request is now being made near the very top of the requests… ( your server must be injecting those 3 codes above directly into the header ).

So theres no way to make the image request happen any sooner. And i think i can say that all these tests demonstrate there is nothing more we can do to improve the LCP as the issue is not the loading of the image. When i run a PSI test i am still seeing huge fluctuations in the metrics. Which is server related or most likely the advert scripts interfering. You should try testing a page without the adverts

[Charbel]

Thank You @David for confirming!

Yes, those 3 codes above are directly injected into the header by Ezoic.
Those are not running on my server, Ezoic uses CDN/DNS integration. So those Ads are causing this fluctuation in PSI.
Yes, a page without ads runs very fast as expected. I am trying to find the performance and speed balance with Ads. We all know there is a performance hit with ads. So on Desktop, I am at 96+ but mobile is less < 70.
Is there anything that can be done to improve Mobile speed?

I will keep the PHP code you shared implemented, it won’t cause any issue, right?

Many Thanks!

[David]

Yes, you can keep the PHP code as it ‘should’ help with performance.

There isn’t anything we can do about server level or 3rd party scripts. You should address the issue with Ezoic as i get the feeling your going to find it difficult to improve Core Web Vitals metrics with its current configuration. You can see here on this webpagetest report:

https://www.webpagetest.org/result/210611_BiDcCP_162f45138cf04645eb9212e4d005d9d7/1/details/#waterfall_view_step1

Never seen this on a non Ezoic site, the site is making 140+ requests ( across 40+ networks ). the majority of which are adverts, all before DOM Complete, which is saturating bandwith, CPU utilisation and generating a lot of long tasks. I think any browser is going to have a crisis trying to calculate whats going on accurately which may explain why the Layout API cannot provide a constant LCP timing.

In most other sites that use non-ezoic ad services we see, and advise users, to defer the scripts loading so it doesn’t interfere with the first load, FCP and LCP events.

[Charbel]

Thank you @David, much appreciated!

Could you please share a PHP function that I could use to defer the script loading so it doesn’t interfere with the first load, FCP, and LCP events? I prefer not to use a plugin to defer the scripts.

Many Thanks!

[David]

We don’t have a PHP Snippet for that unfortunately… plugins like Flying Scripts are the best option although i am not sure that will work with Ezoic as the scripts are served from outside of WordPress…. It really is something to address with Ezoic

[Charbel]

Many Thanks, @David!!!

[David]

You’re welcome

[Author]

Posts