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.
These resources are fetched asynchronously during safe time by the browser.
We can achieve the same using Link: HTTP response header
Link: <qnimate.css>; rel=prefetch
Link: <qnimate.js>; rel=prefetch
We can also achieve the same using meta tag
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.
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.
