In this article I will show you how to download and render a webpage before its actually requested. Before you continue with this article please read my article on preloading resources. In that article I explained critical time, caching requirement and many other basic concepts which will be used in this article.
What is pre-rendering?
Preloading resources using the rel=”prefetch” is just to store a file in browser cache for faster retrieval later on. Resources like HTML files, images etc needs to be downloaded and rendered before displayed to the user. Preloading only downloads and stores in cache whereas pre-rendering downloads and renders it, actually in opens the resource in a new invisible tab.
Pre-rendering is an advanced feature, and misusing it can lead to a bad experience for your users. It can increase bandwidth usage, high memory consumption etc.
If a resource cannot be pre-rendered by the browser then its downloaded and stored in cache which is pre-loading.
Pre-rendering can be done using rel=”prerender” attribute on the link tag.