-
Notifications
You must be signed in to change notification settings - Fork 19
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
lazy-loading images above the fold should be an error #439
Comments
The check to upload is https://github.com/Shopify/theme-check/blob/master/lib/theme_check/checks/img_lazy_loading.rb. We should try hard to keep this on the static analysis side, since that's all Theme Check does now. Note that for LOC or bytes, we can't rely on single file, we need to compute "rendered" total. Tracing the path of include/render/section. We've done similar in checks such as |
I think this warrants a bit more research on our end. A chat with @tyleralsbury led me to believe that the network priority of the image was not affected by being above the fold when using native loading=lazy. Things I'd like to know:
|
Annnnd, this came out today: https://web.dev/lcp-lazy-loading/ Should read it :) |
This is the major complication. Pre-SE, we could make an assumption that, for example, the product information and gallery are at the top of the product page for a given theme. We could then assume that, at least the first image, would not need to be lazy loaded. But even this is questionable with Sections Everywhere. |
This would be very nice. |
Confirmed. The browser needs a render to start the download. https://twitter.com/rick_viscomi/status/1415683309007515648?s=20 |
Maybe instead we either remove the rule entirely or instead make it a warning (not error) for the opposite, e.g., "Only lazy load images that are below the fold otherwise your performance could suffer". We're going to work on the platform side, but this is really important to stop doing ATM since it's basically default training theme devs to lazy load everything. cc'ing @krzksz who may work on a PR for theme check |
Is there a way to remove this check on all themes without having to create a yml config for all root inside all themes? (Working in VSCode) |
A common anti-pattern is to use lazy loading images (
<img loading=lazy>
) above the fold. This causes the browser to immediately discover the image and boost the HTTP priority of the resource on the network and choke out loading of critical javascript or css.This was highlighted recently by Rick Viscomi in the #webperformance channel:
![image](https://user-images.githubusercontent.com/1622597/121353248-a4abc880-c8fb-11eb-8fe9-9e714177bc14.png)
Ideally, theme-check should encourage
<img loading=lazy
for only images below the fold, but discourage above the fold.A few potential mechanisms to determine above/below the fold:
shopify theme dev
to create an analysis of the output to inform theme-check. (maybe to generate an equivalent.map
file?){% comment %}below-the-foled{% endcomment %}
value for theme-check to look for. (maybe the hot reloading browser analysis could auto inject?)The text was updated successfully, but these errors were encountered: