ADR - html-loading-attribute improved defaults #233
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| --- | ||
| title: "Loading attribute in img and iframe HTML tags" | ||
| date: "2025-15-01" | ||
|
Member
There was a problem hiding this comment. The date is in the wrong format. |
||
| decision: "Loading attribute should be added on all img and iframe tags and set to lazy" | ||
| status: "accepted" | ||
|
Member
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? |
||
| categories: | ||
| - HTML | ||
|
Member
There was a problem hiding this comment. Is HTML a good name for this category? Perhaps we can club all web technologies in one. |
||
| --- | ||
|
|
||
| # Native LazyLoading for img and iframe | ||
|
|
||
| ## Context | ||
|
|
||
| Images not only contribute to bandwidth and data usage but also slow down page loads, most images are often outside the viewport and cannot be viewed anyways on page load unless the user scrolls to them. We can optimise this by using the native loading attribute. | ||
|
|
||
| ## 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. | ||
|
Contributor
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
Contributor
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 |
||
|
|
||
| ## Consequences | ||
|
|
||
| - **Positive:** | ||
| - 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. | ||
|
Contributor
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? |
||
| - It might not play well if JS libraries are used to handle image lazy loading for a smoother / animated UX, like skeletons. | ||
|
Contributor
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 |
||
|
|
||
| ## Status | ||
|
|
||
| - **Accepted** | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@swarad07, the file is missing an extension. It doesn't get listed at all.