But Wait, There's More
loading="lazy"
95% support.
Tell the browser to lazy load an image or iframe.
<datalist>
97% support.
A way to create a list of suggestions for an input.
How it differs from <select>:
- Can be used with several types of inputs.
- Typing filters the list.
- User can enter an arbitrary value.
inert attribute
92% support.
Completely disables interaction with an element and its descendants and hides them from assistive devices.
blocking="render"
71% support, but can be a progressive enhancement.
Tells the browser to block rendering until a resource is loaded and evaluated.
Stylesheets and scripts in <head> automatically block rendering already. But in some cases it's useful to be explicit:
- Critical fonts added via
<link>. - Stylesheets and scripts inserted dynamically by other scripts.
- Async scripts for things like A/B testing. Allows these to load asynchronously but still waits for them to finish evaluating before rendering.
fetchpriority attribute
70% support, but can be progressive enhancement.
Tells the browser to prioritize loading a resource over others, thereby enabling some control over how images and linked resources load.
Go take the survey!
You can't actually take the survey anymore because it's closed. But you can still go through it and see what all the questions were. It's a fantastic resource and this presentation barely scratches the surface of what's in there.
See the survey