Hello @davidborrink ,
Optimization of site performance is a difficult task and often browser behavior can make it harder to choose the right approach.
There can be plenty of reasons why the images are loading after the content. However, the most common one that I can assume is the lazy loading feature of the images.
Lazy-loading images have been a commonly used mechanism to significantly improve page load performance. Basically, it makes the image load after the main content (texts, fonts) loads.
There are tons of plugins that can be used to enable the lazy-loading feature. As lazy-loading is a common technique to improve site performance, WordPress has included this by default.
If you want to disable this default behavior, you can use this filter in your active theme’s functions.php file or use a snippet plugin –
add_filter( 'wp_lazy_loading_enabled', '__return_false' );
A detailed description of the lazy load feature in WordPress can be found here.
If you are using any plugin for cache/lazy-loading you can deactivate them first. Also, you can improve image loading performance by optimizing them first.
I hope the above information helps.
Thank you 🙂
Hi Rashed,
Thank you for taking the time to respond to my situation. I took that filter and put it in the functions.php file, but the same behavior remains.
In Firefox, there is a message that the site is waiting for a TLS handshake from Amazon before the image shows up, so that is another clue that I didn’t mention in my original post. It still doesn’t explain why Safari is bringing up the image very quickly. I don’t know if Safari has features (or lack of features) that cause the quicker rendering of the featured image.
Hello @davidborrink ,
I took that filter and put it in the functions.php file, but the same behavior remains.
That’s interesting.
Are you using any caching plugin that enables the lazy load feature?
In general, WooCommerce itself seems not to be the problem here. So, the basic troubleshooting steps will be these –
1. Activate another theme, recommended ones are the default ones i.e. Twenty Twenty/Storefront
2. Deactivate all plugins except WooCommerce and then activate them one by one.
It is important to check the status of the problem after each plugin activation and theme changes.
It still doesn’t explain why Safari is bringing up the image very quickly. I don’t know if Safari has features (or lack of features) that cause the quicker rendering of the featured image.
I suspect safari is not supporting the lazy load feature and hence you see the instant loading of the images.
Also, I would like to mention that the time it takes for me to load the images is only a fraction of a second so in regular use this should not be a problem for your users.
Let me know if there is anything else that you need help with.
Thank you 🙂
Hi there,
We’ve not heard back from you in a while, so I’m marking this thread as resolved.
Hopefully, you were able to find a solution to your problem! If you have further questions, please feel free to open a new topic.
Thank you 🙂