Video fallback image causing enormous performance issues on mobile devices.

Hey gatehealing,

Thank you for the inquiry.

Where can we check the issue? Please provide the site URL in the private field. Are you using an image compression plugin?

Best regards,
Ismael

Hi,

Thank you for the info.

What happens when you disable the Enfold > Performance > File Compression settings? The score decreases because the video image can’t be rendered without the compressed stylesheets, resulting in a significant delay in rendering the largest content element on the page.

Best regards,
Ismael

Hi,

The site above is currently unavailable when we checked. It redirects to a default “Site Not Found” page hosted by Dreamhost. Is the site down? Please provide the login details in the private field so that we can do additional testing.

Thank you for your patience.

Best regards,
Ismael

Hi,

You don’t really need to compress the images prior to uploading, but it will help a lot if you could resize the image to an optimal size before uploading them, for example, 1920x1080px. Resizing the images before uploading will result in smaller thumbnails in terms of file size. If you want to manually compress the images after resizing, please check the online tools that we linked above. You can test it first with the video thumbnail to see if you get a better result.

Best regards,
Ismael

Hi,

We came across another thread with a similar issue, and it was resolved by disabling lazy loading and preloading the image.

To preload the image, you can add the following code to the functions.php file:

function ava_preload_image_in_wp_head()
{
    $image_url = 'https://gatehealing.com/wp-content/uploads/IMG_9494-845x684.jpeg';
    $mime_type = 'image/jpeg';
    $image_handle = 'counseling-services';
    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');

You can also try this plugin: https://wordpress.org/plugins/preload-lcp-image/#installation

Best regards,
Ismael

Hi,

apparently using that plugin still leaves that /counseling-austin-tx/ page in the 60’s for mobile on pagespeedinsights.

Yes, it won’t address every performance issue, but it should improve LCP. Have you done any performance optimizations on the site beyond the recommendations provided here and in the articles we shared above?

That plugin only works if I go in on each and every page and post on my site (over 100 posts and 20ish pages) and manually configure it for every single one of them.

Yes, it has to be done manually for each page. Let us know if using a different cache plugin helps.

For additional help regarding site optimization, you might want to consider hiring a freelance developer. You can contact our partner, Codeable.

// https://kriesi.at/contact/customization

Best regards,
Ismael

Hey!

Lazy loading functions properly in the theme. Enabling this option globally resolved the “Defer offscreen images” issue as mentioned above. You may need to resize your images and make sure they are not wider than 1920px, similar to the previous one.

It’s common to add css modifications and install plugins, especially if you’re aiming for specific features, layouts, or designs, even with a different theme.

Have you tried a different caching plugin?

Best regards,
Ismael