QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Bitcoin BankingBuy, Sell, Store and Earn Interest
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Preloading Resources In Browser using rel=”prefetch”

Preloading Resources In Browser using rel=”prefetch”

pre-feteching

In this article we will see how we can make our websites faster by preloading resources in our webpage. Everything API we use in this article is valid for HTML4 and above. Before you continue further with this article make sure you have good understanding on Web Caching.


What are resources in webpage?

Resources are anything that is requested by browser separately from the requested webpage. Resources become a part of the webpage after they are fetched. CSS files, JS files, Images etc are some examples of resources.

What is preloading resources?

Preloading resources means fetching the resources before they are required and storing them in browser cache. So that when they are actually required, they are fetched from cache which is very fast.

Critical and Safe Time

Make sure preloading of resources don’t block the execution of the actual resources loading which are required for the current webpage to download and render completely. This time period is called critical time. Critical time should be as less as possible. If you are preloading resources during critical time then the current webpage will be slower and will harm user experience.

Resources should be preloaded when user is not interacting with the webpage or else when there is no downloading(AJAX, dynamic resources loading etc) done by the webpage.

Logic behind preloading resources

Logic behind preloading resources is simple, we request resources as if we need them but HTTP caching header are included in the HTTP response. This causes the resources to be stored in the browser cache before we actually need it.

Preloading Resources using <link> element

We can ask the browser to preload resource during safe time using <link> element with prefetch relation.

<link rel="prefetch" href="qnimate.png">
<link rel="prefetch" href="qnimate.css">
<link rel="prefetch" href="qnimate.js">

These resources are fetched asynchronously during safe time by the browser.

We can achieve the same using Link: HTTP response header

Link: <qnimate.png>; rel=prefetch
Link: <qnimate.css>; rel=prefetch
Link: <qnimate.js>; rel=prefetch

We can also achieve the same using meta tag

<meta http-equiv="Link" content="<qnimate.png>; rel=prefetch">
<meta http-equiv="Link" content="<qnimate.css>; rel=prefetch">
<meta http-equiv="Link" content="<qnimate.js>; rel=prefetch">

If the current webpage requests any required resources during the downloading of preloading resources, then the browser pauses the fetching of preloading resources.

Manually preloading resources

You can also manually preload resources by finding the safe time. Preloading resources is just like loading any other required resourced but the preloaded resources shouldn’t be displayed or executed.

This is the way you can preload images, css and js files.

                        /*Here we loaded all three resources inside img tag because img tag can loaded resources before the element is appended into the DOM. script and link tags only loaded resources after the element is appended to the DOM.*/
            var image = document.createElement('img');
            var js = document.createElement('img');
            var css = document.createElement('img');

            image.src = "qnimate.png";
            css.src = "qnimate.css";
            js.src = "qnimate.js";

Final thoughts on preloading

The above techniques are best techniques for preloading resources because resources are loaded during safe time.

There is no same origin policy applied on the resources fetched using preloading techniques. But the URLs must be of HTTP or HTTTS protocol.

Some browser also prefetch link element resources with relation next.

Final word, don’t forget to include web caching header.

Jun 28, 2014Narayan Prusty
JavaScript ArrayBuffers And Typed ArraysAn Introduction To JavaScript Blobs and File Interface
Comments: 0

    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`.

    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.

    Image6 years ago 2 Comments Web Development
    Share this
    0
    GooglePlus
    0
    Facebook
    0
    Twitter
    0
    Linkedin
    • What are resources in webpage?
    • What is preloading resources?
    • Critical and Safe Time
    • Logic behind preloading resources
    • Preloading Resources using <link> element
    • Manually preloading resources
    • Final thoughts on preloading
    Related Articles
    • Pre-rendering In Browser using rel=”prerender”
    • Creating Offline Applications using HTML5 Tutorial
    • Measure Web Page Performance Using JavaScript
    • Prefetching DNS using rel=”dns-prefetch”
    • Prioritising Downloading Of Webpage Resources
    Our Sponsor
    Freelance: I am available
    @narayanprusty
    Hi, I am a full-stack developer - focusing on JavaScript, WordPress, Blockchain, DevOps, Serverless and Cordova. You can outsource your app development to me.





    Will get back to you soon!!!
    WordPress
    ReactJS
    Meteor
    Blockchain
    Serverless
    Kubernetes
    DevOps
    DB & Storage
    Ejabberd
    Let's get started
    My Books

    2014 - 2015 © QNimate
    All tutorials MIT license