CLS is killing my Speed Score

Hey James,

Thank you for the inquiry.

The CLS is actually good, but the overall score on mobile is a bit low because of LCP (Largest Contentful Paint), which is related to the background image (Custom-Ice-Background.webp) in the first color section. We recommend reducing the size of the image to 1440px or lower and installing a compression plugin before uploading it back as the background.

You can also enable lazy loading in the Enfold > Performance > Responsive Images And Lazy Loading panel, then add this code in the functions.php file to preload the image.

function ava_preload_image_in_wp_head()
{
    $image_url = 'https://iceworksus.com/wp-content/uploads/2024/02/Custom-Ice-Background.webp';
    $mime_type = 'image/jpeg';
    $image_handle = 'custom-ice-machine';
    echo ' 	<link rel="preload" href="' . esc_url($image_url) . '" as="image" type="' . esc_attr($mime_type) . '" id="' . esc_attr($image_handle) . '">';
}
add_action('wp_head', 'ava_preload_image_in_wp_head');

Best regards,
Ismael

Hi,

Thank you for the update.

Also, the file in question is only 32KB in size so I don’t know how this is the problem

Apparently, 32KB is still considered large for mobile by the pagespeed insight tool, so you need to reduce the size of the image. Have you done any speed optimization for the site, such as installing a caching and image compression plugin? If not, please check the links below and follow the steps.

// https://kriesi.at/archives/scoring-100-100-in-google-pagespeed-insights-gtmetrix-pagespeed-and-yslow
// https://gtmetrix.com/wordpress-optimization-guide.html

Best regards,
Ismael