- [Instructor] What if I told you the absolute biggest,
most impactful performance optimization you can implement
with images is to just not load the images at all?
Sounds like not what you want, right?
Actually, it's exactly what you want.
Let me explain.
Say you have a standard web page.
There is a header and maybe a featured image
and then some content and some images and videos,
and maybe an iframe or something else.
When the browser loads this page,
it loads in all of the images,
even if the user never scrolls and never gets to see them.
Or rather, that's how it used to work until very recently.
Loading images, videos, and iframes
the user never scrolls to has always been
a major performance issue on the web.
We're simply wasting data that we shouldn't be wasting.
To deal with this issue,
developers started adding lazy loading JavaScript libraries
that would wait for the user to scroll close to an element
before the image was loaded by the browser
so that instead of loading all the images on a page,
only the images the user would actually get to see
inside the viewport were loaded by the browser.
This developer pattern became so popular
that it became what we colloquially call a cow path,
and once that was well enough established,
developers at Google decided
this should probably be part of the web platform.
So now, native lazy loading is either active in
or soon to be active in all modern browsers.
This is a huge step forward for performance.
This new lazy loading can be activated on all images,
videos and iframes telling the browser to defer loading
of these assets until they come within
a calculated distance from the viewport.
That distance is calculated by the browser
to attempt to provide enough time to actually get
and display the asset before the user sees it.
Native lazy loading is activated
using the loading attribute on the element in question.
There are two relevant values to choose from here.
Lazy, meaning the asset is loaded only when it's close
to the viewport,
and eager, meaning the asset is loaded immediately,
even if it's nowhere near the viewport.
There's also a fallback here called auto,
but it's not yet in the specification
and it's not supported by all browsers
who have implemented this feature.
So it's not recommended to use auto.
Instead, use either lazy or eager on all your images.
Now, this loading attribute is also non-destructive,
meaning older browsers who do not understand this attribute
will simply ignore it and load all the assets
as it would normally do.
The loading attribute is something you should add
to all of your projects right now
because it makes a huge difference on performance
and it is non-destructive.
If you want lazy loading support in older browsers as well,
you can use a JavaScript solution like lazysizes,
which has an extension plugin called native loading,
which serves up the JavaScript solution
only to browsers that do not support the loading attribute
and the new built in lazy loading feature.
But lazy load all your images, all your videos,
and all your iframes because in the future
that will be the default.