Kevin Powell just released a video discussing how to implement lazy loading in a website using a single line of CSS (per class/element, of course). This is something that was typically done using JavaScript to speed up initial load of a website. The idea is that images wouldn’t all load when a page is first delivered, which leads to performance issues. Instead, images at the top of a page would be delivered first, and then other images would be delivered as needed – basically as the user scrolls to them. This leads to a performance increase on initial page load, but could potentially result in jumping or staggering behavior on a page as its scrolled.

I’m not sure how this would affect Single Page Applications (like those build using React with React Router) since all of a site’s resources are supposed to be delivered at once and then rendered by the client as needed, instead of sending requests back-and-forth to the server, but I did leave a comment on the video to inquire, so we’ll see if there’s a ready answer.

Here’s a link to the video:

The behavior is implemented by adding the loading=’lazy’ attribute to an <img> tag. Its that easy – and it works with iframes (for videos) too!