ADR - html-loading-attribute improved defaults #233
Conversation
✅ Deploy Preview for axelerant-engg-handbook ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
swarad07
changed the title
hussainweb
left a comment
hussainweb
left a comment
There was a problem hiding this comment.
@swarad07, please see my comments. @Kalaiselvan88, you might want to review this.
| @@ -0,0 +1,32 @@ | |||
| --- | |||
There was a problem hiding this comment.
@swarad07, the file is missing an extension. It doesn't get listed at all.
| @@ -0,0 +1,32 @@ | |||
| --- | |||
| title: "Loading attribute in img and iframe HTML tags" | |||
| date: "2025-15-01" | |||
There was a problem hiding this comment.
The date is in the wrong format.
| title: "Loading attribute in img and iframe HTML tags" | ||
| date: "2025-15-01" | ||
| decision: "Loading attribute should be added on all img and iframe tags and set to lazy" | ||
| status: "accepted" |
There was a problem hiding this comment.
Are you intentionally setting this to "accepted". Do we need to discuss this or is this something so obvious we don't need to discuss?
| decision: "Loading attribute should be added on all img and iframe tags and set to lazy" | ||
| status: "accepted" | ||
| categories: | ||
| - HTML |
There was a problem hiding this comment.
Is HTML a good name for this category? Perhaps we can club all web technologies in one.
| ## Decision | ||
|
|
||
| - We shall ensure every <img> and <iframe> tag has the `loading` attribute and it is set to `lazy` | ||
| - The `loading` attribute has a default value set to `eager` which loads the image immediately irrespective of whether they are in the viewport. |
There was a problem hiding this comment.
Does this not load all the images on page load and opposite to lazy load? Should this value be rather lazy instead as per https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#loading
There was a problem hiding this comment.
I think above is conveyed in 1st point however having this line here is kind of confusing as if we are deciding to set the value to eager. Maybe this line can be in context rather?
| - Improved page loading performance due to lazy loading of images. | ||
| - Reduced data usage. | ||
| - **Negative:** | ||
| - Changes to <img> and <iframe> component templates needed in the CMS, JS framework, and UX library kits whenever a new project is bootstrapped. |
There was a problem hiding this comment.
Can we add a caveat that we change codes that are within our control like custom code only considering this -ve?
| - Reduced data usage. | ||
| - **Negative:** | ||
| - Changes to <img> and <iframe> component templates needed in the CMS, JS framework, and UX library kits whenever a new project is bootstrapped. | ||
| - It might not play well if JS libraries are used to handle image lazy loading for a smoother / animated UX, like skeletons. |
There was a problem hiding this comment.
I feel it would be better to explain what is the negative consequences we expect and explain "play well" part
Added my comments as well in addition to existing ones. Also it would be good to refer https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading#images_and_iframes for reference as well |
3 participants
No description provided.