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

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

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

Viewing 15 posts - 1 through 15 (of 34 total)
  • Author
    Posts
  • #1815082
    Charbel

    Hello Team,

    Hope all is well.

    How to fix the Largest Contentful Paint in Google PageSpeed Insights to improve LCP for Desktop/Mobile which is related to the background image.

    Here is the test: Largest Contentful Paint element 1 element found.

    https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fcharbelnemnom.com%2Fazure-defender-for-app-service-in-azure-security-center%2F&tab=desktop

    As we all know, Largest Contentful Paint (LCP) is a Google user experience metric. It is set to become a ranking factor starting June 2021.

    Example: https://charbelnemnom.com/azure-defender-for-app-service-in-azure-security-center/

    P.S. I am using Cloudflare caching and WebP is enabled but is not working. Lazyloading is also disabled in JetPack.

    Your help is highly appreciated.

    Thank You!
    -Charbel

    #1815774
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1815813
    Charbel

    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

    #1816101
    David
    Staff
    Customer Support

    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.

    #1816689
    Charbel

    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!

    #1817191
    David
    Staff
    Customer Support

    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.

    #1818386
    Charbel

    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!

    #1818548
    David
    Staff
    Customer Support

    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.

    #1818565
    Charbel

    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!

    #1818811
    David
    Staff
    Customer Support

    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.

    #1818829
    Charbel

    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

    #1818851
    David
    Staff
    Customer Support

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

    #1818877
    Charbel

    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!

    #1818882
    David
    Staff
    Customer Support

    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.

    #1818896
    Charbel

    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!!!

Viewing 15 posts - 1 through 15 (of 34 total)
  • You must be logged in to reply to this topic.