QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads 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"/>

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

Leave a Reply Cancel 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`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

Image8 years ago Web Development
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
Related Articles
  • Preloading Resources In Browser using rel=”prefetch”
  • Creating Offline Applications using HTML5 Tutorial
  • What is Server Push and Promises in HTTP/2?
  • Measure Web Page Performance Using JavaScript
  • Prefetching DNS using rel=”dns-prefetch”
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license