Thursday 17 May 2018

How to load iframes faster

As you know, an iframe is an HTML tag that specifies an "inline frame" and is used to embed another document within the current HTML document. The two documents, the main one and the iframe, are independent and both are treated as complete documents, instead of treating one as part of the other.

Iframes are quite useful for embedding third party content, ads and widgets in our pages, because we can be sure that they are not going to interfere with our main page.

Using iframes has many advantages but also many disadvantages, such as their "special" behaviour for loading their content.

For example, let's take a look to the following simple HTML page:

<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
</head>

<body>
    <h1>Main Page: Example 1</h1>

    <iframe id="myiframe" src="https://www.ernestojpg.com" width="90%" height="90%"
            style="margin:auto;display:block">
    </iframe>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/ng2-bootstrap/1.6.2/ng2-bootstrap.umd.js"></script>

    <h1>Footer</h1>

</body>
</html>

As you can see, in the example above, we load two big javascript files in different parts of the document: angular.js in the page head, and ng2-bootstrap.umd.js at the end of the page body. We also embed an iframe with the content of this blog just before loading the second javascript file.

You can execute this example page here.

How do you think the three external components/dependencies (javascript1, iframe, and javacript2) are going to be loaded by the browser? If we load the example above using, for example, the Google Chrome's Developer Tools we will see something like this:


Surprisingly, the browser loads the two javascript files first, and when they are completely loaded, it starts loading the iframe document. Then when the iframe document is loaded, its dependencies are loaded as well.

Obviously, this is not the most efficient way of loading our page. If we have to load many resources within the main page (images, javascript, css, etc), the loading of the iframe will be delayed for a long time.

Ideally, we would like to start loading the iframe at the same time as the other page dependencies. But, how could we achieve that?

Fortunately there is a small trick that we could apply for achieving it: In general, an iframe will start loading its content if there is no other pending resource to load at that moment.

For this reason, making the following simple change in our code we could improve the page loading time dramatically:

<html>
<head>
</head>

<body>
    <h1>Main Page: Example 2</h1>

    <iframe id="myiframe" src="https://www.ernestojpg.com" width="90%" height="90%"
            style="margin:auto;display:block">
    </iframe>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ng2-bootstrap/1.6.2/ng2-bootstrap.umd.js"></script>

    <h1>Footer</h1>

</body>
</html>

As you can see in the code above, we have moved the reference to the first javascript file from the <head> section to the <body> section, just after the iframe. In that way, the iframe will be the first external resource to load within the page.

You can execute this example page here.

Let's have a look to how the page is loaded now in the browser:


As you can see, now the two javascript files and the iframe document are loaded practically in parallel!