#5539 - Scan for places we could use lazy loading
-
By PDStig
- Added
- 1 view
| Identifier | #5539 |
|---|---|
| Issue type | Feature request or suggestion |
| Title | Scan for places we could use lazy loading |
| Status | Open |
| Tags |
Good for training (custom) Roadmap: Over the horizon (custom) Type: Performance (custom) |
| Handling member | Deleted |
| Addon | core |
| Description | I just recently added lazy loading to images on theme image entries (e.g. theme image editor).
Find other places we could use lazy loading on images and other media when we do not immediately need the image to load and would prefer our deferred JavaScript loaded first. For example, common theme-based images (backgrounds etc) should be eager loaded. But maybe user-submitted media (galleries, avatars, attachments, etc) can be lazy loaded. Icons could probably be lazy loaded as well except when using the compiled svg sprite file (though consider moving this to the very bottom of the DOM if possible so it loads after the JavaScript; the priority should be user interaction.) Add a unit test that checks templates for explicit uses of img / audio / video / embed tags (double check on loading attribute compatibility) with a src pointing to uploads/* that do not have loading="lazy". I think for the most part anything from the uploads directory (and therefore not theme-based) should be lazy loaded. |
| Steps to reproduce | |
| Related to | |
| Funded? | No |
The system will post a comment when this issue is modified (e.g., status changes). To be notified of this, click "Enable comment notifications".
Comments
Adding testing to ensure most things are lazy-loaded seems like a sledgehammer, as it seems to me the decision is more subtle. For example, if you are viewing a gallery image, wouldn't you want that to be prioritized in loading rather than lazy? But something like a news thumbnail, that would make sense to be lazy.
There are more subtle considerations. You shouldn't make an image lazy if you don't have HTML image and width set, because then you get layout shifts which itself hurts performance.
To me this is more a case-by-case optimization thing, than something to fix via some uniformly-enforced standard.
E.g. the theme image screen froze for several seconds while it was loading all the images before I added lazy loading.
Typically anything "below-the-fold" (would not be visible to users immediately because it's further down the page or collapsed in a menu etc) should be lazy-loaded unless as you said it would break layout (but then in that case we could instead have a "skeleton" container until the image loads to maintain structure... this is assuming we know the image dimensions right away which we can usually figure out).