Every single HTTP request decreases loading performance. For a simple image, the attribute loading="lazy"
can be used in order to defer the loading of off-screen images until the image appears on the screen. Lazy loading of images improves performance by reducing initial page load time, initial page weight, initial page rendering, and system resource usage.
- Initial page load time – with lazy loading, the page is loaded faster because only images that are visible on the screen are loaded.
- Initial page weight – because images that aren’t visible won’t be downloaded. Hence, the whole page weight will be smaller.
- Initial page rendering – less images to render, the faster the whole page will be rendered for the user.
- System resource usage – this refers to less resource usage like CPU, network, etc.
Continue reading “Lazy loading CSS background images for better website loading performance”