What is progressive rendering?
Progressive rendering is the name given to techniques used to improve the performance of a webpage (in particular, improve perceived load time) to render content for display as quickly as possible.
It used to be much more prevalent in the days before broadband internet but it is still used in modern development as mobile data connections are becoming increasingly popular (and unreliable)!
Lazy loading of images
Images on the page are not loaded all at once. The image is only loaded when the user scrolls into/near the part of the page that displays the image.
<img loading="lazy">is a modern way to instruct the browser to defer loading of images that are outside of the screen until the user scrolls near them.- Use JavaScript to watch the scroll position and load the image when the image is about to come on screen (by comparing the coordinates of the image with the scroll position).
Prioritizing visible content (or above-the-fold rendering)
Include only the minimum CSS/content/scripts necessary for the amount of page that would be rendered in the users browser first to display as quickly as possible, you can then use deferred scripts or listen for the DOMContentLoaded/load event to load in other resources and content.
Async HTML fragments
Flushing parts of the HTML to the browser as the page is constructed on the back end. More details on the technique can be found here.