View Issue Details
| ID | Project | Category | View Status | Date Submitted | Last Update |
|---|---|---|---|---|---|
| 5539 | Composr | core | public | 2024-01-08 17:32 | 2024-07-25 21:11 |
| Reporter | PDStig | Assigned To | PDStig | ||
| Priority | normal | Severity | feature | ||
| Status | assigned | Resolution | open | ||
| Summary | 5539: 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 | ||||
| Attach Tags | |||||
| Time estimation (hours) | |||||
| Sponsorship open | |||||
| related to | 3816 | Resolved | Chris Graham | Performance-centric image overhaul |
| related to | 5536 | Resolved | PDStig | 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 | PDStig | New Issue | |
| 2024-01-08 17:32 | PDStig | Status | Not Assigned => Assigned |
| 2024-01-08 17:32 | PDStig | Assigned To | => user4172 |
| 2024-01-08 17:35 | PDStig | Description Updated | |
| 2024-01-08 17:37 | PDStig | Note Added: 0008168 | |
| 2024-01-08 17:37 | PDStig | Tag Attached: Roadmap: v11 | |
| 2024-01-08 17:37 | PDStig | Tag Detached: Roadmap: v11 | |
| 2024-01-08 17:38 | PDStig | Tag Attached: Roadmap: v11 | |
| 2024-01-08 17:38 | PDStig | Tag Attached: Type: Performance | |
| 2024-01-08 17:38 | PDStig | Tag Attached: Good for training | |
| 2024-03-30 03:35 | PDStig | Tag Detached: Roadmap: v11 | |
| 2024-03-30 03:35 | PDStig | Tag Attached: Roadmap: Over the horizon | |
| 2024-03-30 03:35 | PDStig | Project | Composr alpha bug reports => Composr |
| 2024-03-30 03:46 | PDStig | Category | General / Uncategorised => core |
| 2024-07-24 22:23 | Chris Graham | Relationship added | related to 3816 |
| 2024-07-24 22:28 | Chris Graham | Note Added: 0008914 | |
| 2024-07-24 22:46 | PDStig | Note Added: 0008918 | |
| 2024-07-25 21:11 | Chris Graham | Relationship added | related to 5536 |
