Home Home Pre-rendering In Browser using rel=”prerender”

Pre-rendering In Browser using rel=”prerender”

pre-feteching

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.

<link rel="prerender" href="/page/to/prerender"/>

Narayan Prusty
Python like Multiline Strings In JavaScriptPrefetching DNS using rel="dns-prefetch"

Leave a Reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

Narayan Prusty

I am a full-stack web developer. I specialize in Blockchain and JavaScript. This is my personal blog where I write about programming and technologies that I learn and feel interesting to share.

Image3 years ago Web Development
Share this
Related Articles