View Issue Details
| ID | Project | Category | View Status | Date Submitted | Last Update |
|---|---|---|---|---|---|
| 0005539 | Composr | core | public | 2024-01-08 17:32 | 2024-07-25 21:11 |
| Reporter | Patrick Schmalstig | Assigned To | Patrick Schmalstig | ||
| Severity | Feature-request | ||||
| Status | assigned | Resolution | open | ||
| Product Version | |||||
| Fixed in Version | |||||
| Summary | 0005539: Scan for places we could use lazy loading | ||||
| 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. | ||||
| Tags | Good for training, Roadmap: Over the horizon, Type: Performance | ||||
| Time estimation (hours) | |||||
| Sponsorship open | |||||
| related to | 0003816 | resolved | Chris Graham | Performance-centric image overhaul |
| related to | 0005536 | resolved | Patrick Schmalstig | Theme Image Editing menu |
|
|
Actually a unit test might not be so easy to do. A better approach would be possibly a standards check or make it a part of the health check for pages. |
|
|
I think this issue needs a bit more of an explanation as to what is being achieved here. What are we improving by making images load lazily? Performance on the core functionality of the page itself? Reducing bandwidth on mobile devices? Lowering stress on the server? 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. |
|
|
The biggest is page performance and saving bandwidth. 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). |
| Date Modified | Username | Field | Change |
|---|---|---|---|
| 2024-01-08 17:32 | Patrick Schmalstig | New Issue | |
| 2024-01-08 17:32 | Patrick Schmalstig | Status | non-assigned => assigned |
| 2024-01-08 17:32 | Patrick Schmalstig | Assigned To | => Patrick Schmalstig |
| 2024-01-08 17:35 | Patrick Schmalstig | Description Updated | View Revisions |
| 2024-01-08 17:37 | Patrick Schmalstig | Note Added: 0008168 | |
| 2024-01-08 17:37 | Patrick Schmalstig | Tag Attached: Roadmap: v11 | |
| 2024-01-08 17:37 | Patrick Schmalstig | Tag Detached: Roadmap: v11 | |
| 2024-01-08 17:38 | Patrick Schmalstig | Tag Attached: Roadmap: v11 | |
| 2024-01-08 17:38 | Patrick Schmalstig | Tag Attached: Type: Performance | |
| 2024-01-08 17:38 | Patrick Schmalstig | Tag Attached: Good for training | |
| 2024-03-30 03:35 | Patrick Schmalstig | Tag Detached: Roadmap: v11 | |
| 2024-03-30 03:35 | Patrick Schmalstig | Tag Attached: Roadmap: Over the horizon | |
| 2024-03-30 03:35 | Patrick Schmalstig | Project | Composr alpha bug reports => Composr |
| 2024-03-30 03:46 | Patrick Schmalstig | Category | General / Uncategorised => core |
| 2024-07-24 22:23 | Chris Graham | Relationship added | related to 0003816 |
| 2024-07-24 22:28 | Chris Graham | Note Added: 0008914 | |
| 2024-07-24 22:46 | Patrick Schmalstig | Note Added: 0008918 | |
| 2024-07-25 21:11 | Chris Graham | Relationship added | related to 0005536 |
