Native HTML: Lazyloading
Tags: html, css, lazyloading, whatwg
Published: 2019-01-11 11:58:57

This is a slightly different post to normal, normally I talk about things that are either already implemented in a browser or have just recently been added to the spec. Today I'll be looking at something that is still waiting to be merged into the spec.

I hope this will give you a better understanding of how the spec develops over time but also give you the confidence to suggest your own improvements. The [whatwg](https://github.com/whatwg/html) team is very open to hearing new ideas.

## W3 Bug report

Our story starts in 2012. Josh, from the BBC Web team, posted this bug to the [w3 website](https://www.w3.org/Bugs/Public/show_bug.cgi?id=17842).

>The BBC updated their BBC News mobile website, recently. One of the ways they optimised it for mobile devices was by deferring loading images until after the page has loaded.

>I haven't looked into how this is done in detail, but they used DIVs for placeholders in the positions where the images will go. For example:

>`<div class="delayed-image-load" data-src="http://static.bbci.co.uk/news/200/media/images/59388000/jpg/_59388680_59388679.jpg"></div>`

>After the page has loaded, the DIV is changed into an IMG element.

>Clearly, this isn't very semantic, and wouldn't work at all if JavaScript is disabled. But they have a good reason for doing this, which is why I believe there is a need for a way of deferring the loading of images until after the page has been parsed. This could also be applied to other embedded content elements, like IFRAME and OBJECT.

>The way I think this should be done is by using the DEFER attribute, which would work in the same way as it does in the SCRIPT element.

To break this down, they'd like to be able to have an `<img>` tag with a `defer` attribute that leads to the image not rendering until the site is `ready`.

```html
<img src="https://via.placeholder.com/150" defer />
```

This would lead to the images not loading until after first painting making the site appear to load quicker.

## GitHub Issue

The conversation went stale after a couple of years but, in 2017, Josh brought it up again this time on GitHub.

{% github https://github.com/whatwg/html/issues/2806 %}

Josh's idea had changed a little but the principle remained the same. Rather than a `defer` attribute, a `lazyload` attribute would be used the intention would be to only load images in the viewport.

```html
<img src="https://via.placeholder.com/150" lazyload />
```

At the time of this post, the issue has 67 thumbs up, 11 hooray and 29 heart reactions. One of GitHub's huge benefit is the ability to easily show support for issues.

This time the conversation kept going and lead to a pull request!

## GitHub the pull request

The pull request comes from a Google employee named Ben. People are adding bits and looking through the spec to make sure it all makes sense. As of 21 days ago, all the comments have been addressed and they're waiting for tests to be added.

{% github https://github.com/whatwg/html/issues/3752 %}

## The potential spec

Let's have a look at the description, we can't pop over to Mozilla to have a look this time as we're too early.

>The attribute provides a hint to the user agent to aid in deciding whether to load an element immediately or to defer loading until the element will be viewable, according to the attribute's current state.

>**on**
Indicates a strong preference to defer fetching the element's resource until it will be viewable.

>**off**
Indicates the element's resource must be fetched immediately, regardless of viewability.

>**auto**
Indicates that the user agent may determine the fetching strategy (the default).

>The attribute's `missing value default` and `invalid value default` are both the `auto` state.

Here are some practical examples

```html
<!-- 
  this image will not be fetched until it 
  is in the viewport, meaning the page loads
  faster and uses less data.
-->
<img src="https://via.placeholder.com/150" lazyload="on" />

<!-- 
  this image will be fetched as soon as the
  page opens, this is how website work currently
-->
<img src="https://via.placeholder.com/150" lazyload="off" />

<!-- 
  this image will probably work the same as off
  but there is space for interpretation
-->
<img src="https://via.placeholder.com/150" lazyload="auto" />

<!-- 
  If the lazyload value is invalid or missing
  the attribute will default auto
-->
<img src="https://via.placeholder.com/150" lazyload="bar" />
<img src="https://via.placeholder.com/150" />
```

## Wrapping up

In my opinion, anything we can pass over to the browser leads to a better web. Having all images lazy load with no effort for the development team makes sense to me. Do you have any thoughts? Let me know down below.

If you have something you think the spec is missing head over to the [issue](https://github.com/whatwg/html/issues/2806) and let them know. Updating the spec is a really delicate process the more help they get before any browsers have implemented it the better.

Thank you for reading, I know this was a little different to my other posts but I thought it was interesting all the same.


❤🦄🦄❤🦄❤🦄🦄❤