wp-rocket
wp-rocket copied to clipboard
wp-media
Lazyload not working properly on Safari/Chrome 15.4 if loading=lazy is present on the image
Before submitting an issue please check that you’ve completed the following steps:
- [x] Made sure you’re on the latest version
- [x] Used the search feature to ensure that the bug hasn’t been reported before
Describe the bug
Lazyload will fail on the first couple of images on the page if they somehow contain loading="lazy" when using iOS 15.4 Safari/Chrome.
Video comparing behavior on 15.4 vs. 15.3.
https://drive.google.com/file/d/11i0xxEKciie7HpvWc0EiYCx28aPKHfrP/view?usp=drivesdk
The initial load works properly. When the page is re-visited, the first images are not lazyloaded.
There is no console error. And the image swapped.
15.4 added support to native lazyload.
https://developer.apple.com/documentation/safari-release-notes/safari-15_4-release-notes
Since Chrome for iOS 15.4 is also affected by the issue, then the change is likely done on WebKit, since Chrome for iOS is forced to use it.
Since it's the main difference between 15.4 vs. 15.3, it is likely what is causing the behavior.
Removing loading=lazy on lazyloaded images fixed the issue on 5 different websites.
We could sanitize lazyloaded images to make sure they don't include loading="lazy" at the same time.
https://github.com/wp-media/wp-rocket/blob/6f905396f43c1831c370848e9c36bf14e72ab545/inc/Dependencies/RocketLazyload/Image.php#L454-L469
To Reproduce Steps to reproduce the behavior:
- Use iOS
15.4Safari or Chrome - Enable lazyload
- Make sure that the
loading="lazy"is added to the image after it's processed - See error
Expected behavior Lazyload should work properly on all Safari browsers.
Screenshots N/A
Additional context Tickets:
- https://secure.helpscout.net/conversation/1846557294/337237
- https://secure.helpscout.net/conversation/1854681070/338402
- https://secure.helpscout.net/conversation/1821189163/332608
Backlog Grooming (for WP Media dev team use only)
- [ ] Reproduce the problem
- [ ] Identify the root cause
- [ ] Scope a solution
- [ ] Estimate the effort
Related - https://secure.helpscout.net/conversation/1858594675/338974/
maybe related https://secure.helpscout.net/conversation/1859522245/339096
Related - https://secure.helpscout.net/conversation/1858594675/338974
Temporarily fixed by removing loading=lazy using manipulate buffer helper plugin.
Related - https://secure.helpscout.net/conversation/1892367990/344316/
Temporarily fixed by removing loading=lazy using manipulate buffer helper plugin.
related: https://secure.helpscout.net/conversation/1915957845/347723?folderId=2683093
Related - https://secure.helpscout.net/conversation/1913205820/347217/
Temporarily fixed by removing loading=lazy using manipulate buffer helper plugin.
is it possible to share the plugin/function being used to strip the loading=lazy? We're having this issue with a client site (http://influitive.com/) and trying to figure out how to resolve. We have an active WP Rocket account but can't log in as the password reset links are going to a 503 page - otherwise I would have submitted a ticket normally (account email [email protected]).
@JoshuaVB WP Rocket customer service linked me this plugin https://jmp.sh/AEmEIZD
It worked, but i've since then decided to disable lazy-loading via WP rocket since Wordpress has implemented native lazy loading since WP 5.5, so I decided to just use that.
@JoshuaVB the helper plugin @melissahie shared is the one.
@melissahie a quick clarification about the native lazyload.
It has a 1250px (up to 2500px on 3G) threshold from the viewport vs. our lazyload has a 300px threshold from the viewport.
That means the native lazyload will trigger loading images way too early, and in some cases, it will load unnecessary images that the user won't reach on their visit.
Native lazyload is a scriptless solution to lazyload images. They already did an effort in dropping the threshold from 4000px to 1250px. But it's not the best performance gain possible regarding deferring images load :)
@DahmaniAdame thanks for the detailed explanation. it's what i was trying to find out when I was deciding between native vs WP rocket lazy load! I'll take a look again and see which one is best for my website.
@melissahie @DahmaniAdame Thanks for providing the plugin! It worked perfectly simply by adding to the site, a very tidy fix. We use Divi and so presuming that was the culprit.
I agree with @DahmaniAdame that Native lazyload threshold is too high, it may be that they really want to give the browser enough time to load the image before you reach it on slow networks. Either way, it triggers too many "below the fold" errors for us to use it in production, so this is a great fix - thank you!
Related https://secure.helpscout.net/conversation/1940750121/354049/
Hello, do we know on which version this fix will be released? I want to uninstall the hotfix plugin once this fix has been released.
