Largest Contentful Paint

Hi there,

In the PageSpeed Reports beneath the Treemap, there is Show audits relevant to option – and select the LCP.

There are 3 main opportunities:

Reduce initial server response time
This will impact the LCP times for TTFB and potentially the Load Delay and Load Time. This time is related to how long it takes the server to process the request.
NOTE: It maybe the Host is throttling the staging sites performance, its quite common to see, so a big improvement may be seen when the site is pushed to production. You may want to confirm this with the host.

Largest Contentful Paint element
The LCP element is the image, and in the image’s HTML we can see the lazyload class. That is an indicator that the image is being lazyloaded.
Whatever plugin you’re using to lazy load the image, use its settings to ignore that image. As you don’t want it to lazyload images that above the fold.

Eliminate render-blocking resources
Use Perfmatters to resolve the issue. It has options to defer the loading of resources, which in this case the JS file.

Hi there,

Background Images are loaded via CSS.
So they prone to performance issues, as first the stylesheet must be loaded and parsed by the browser before the image request can be made.

One method is to:

1. add a Featured Image to the page, which will be used as the hero background.

2. use the Disable Element metabox to disable the featured image, so the Theme doesn’t output it at the top of the page.

3. select the Container with the Background Image.
3.1 activate its Dynamic Data and set it to display the Featured Image as the background. This is our fallback.
3.2 in Advanced > Additional CSS Class(es) add: page-hero

4. Add this PHP snippet to the site:

add_action( 'wp_head', function() {
    if( is_front_page() ) {
        $featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'medium_large');
        $featured_img_url_full = get_the_post_thumbnail_url(get_the_ID(),'full');
        echo '<link rel="preload" media="(max-width: 768px)" as="image" href="'.$featured_img_url.'"/>';
        echo '<link rel="preload" media="(min-width: 769px)" as="image" href="'.$featured_img_url_full.'"/>';
        echo '<style>
        @media(max-width: 768px) {
            .page-hero:before { background-image: url('.$featured_img_url .') !important;}
        }
        @media(min-width: 769px) {
            .page-hero:before { background-image: url('.$featured_img_url_full .') !important;}
        }
        </style>';
    }		
},1000);

On the home page that snippet will preload a featured image based on the screen size ( Full for desktop, Medium Large for mobile ) and then overwrite the background image of the page-hero container