In any website, loading assets is a crucial part of the user experience. The faster the assets are loaded, the better the user experience. Multiple factors affect the loading time of assets, such as the size of the asset, the number of requests, and the number of connections. These assets are render blocking, which means that the browser cannot render the page until all the assets are loaded. This is why the first contentful paint is important. The first contentful paint is the time it takes for the browser to render the first content on the page.
In this article, we explore new feature called resource hints, which are used to improve the loading time of assets. This resource hint allow the browser to know which assets are important and should be loaded first.
Render blocking
If there are render blocking assets, windows.onload event will not fire until all the assets are loaded. In modern web application, there are many assets that are render blocking. These assets include CSS, JavaScript, images, and fonts. Application cannot be rendered until all these assets are loaded.
Preloading Resources
Preloading resources is a new feature in HTML5. This feature allows the browser to know which assets are important and should be loaded first. The rel=preload attribute is used to preload resources. The as attribute is used to specify the type of the resource. The as attribute can have the following values: audio, document, embed, fetch, font, image, object, script, style, track, video.
The following code snippet shows how to preload a CSS file.
<link rel="preload" href="style.css" as="style" onload="this.rel='stylesheet'">
Now let’s add a unload event listener to the link element. This event listener will be called when the CSS file is loaded. The this.rel='stylesheet' will change the rel attribute to stylesheet. This will load the CSS file. Since it has been loaded, the browser will not block the rendering of the page.
<link rel="preload" href="style.css" as="style" onload="this.rel='stylesheet'">
Prefetching Resources
Prefetching is similar to preloading. The difference is that prefetching is used to load resources that are not needed immediately. The rel=prefetch attribute is used to prefetch resources. The as attribute is used to specify the type of the resource. The as attribute can have the following values: audio, document, embed, fetch, font, image, object, script, style, track, video.
The following code snippet shows how to prefetch a CSS file.
<link rel="prefetch" href="style.css" as="style" onload="this.rel = 'stylesheet'"/>
The browser will load the CSS file in the background. The browser will not block the rendering of the page. The browser will load the CSS file when it is needed.
Preloading the JavaScript file
JS file pre-loading is done differently.
<script rel="preload" src="script.js" as="script"></script>
<script>
// script.js is loaded and executed here.
var usedLaterScript = document.createElement('script');
preloadedScript.src = 'script.js';
document.body.appendChild(preloadedScript);
</script>
Browser Support
Here are the browser support for preload and prefetch.
- Chrome: https://chromestatus.com/feature/5757468554559488
- Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1322468
- Safari: https://bugs.webkit.org/show_bug.cgi?id=167347
- Edge: https://developer.microsoft.com/en-us/microsoft-edge/platform/status/preloadandprefetch/?q=preload%20prefetch
Conclusion
In this article, we explored how to use preload and prefetch to improve first contentful paint in HTML. Preloading and prefetching are new features in HTML5. These features allow the browser to know which assets are important and should be loaded first. The rel=preload attribute is used to preload resources. The rel=prefetch attribute is used to prefetch resources. The as attribute is used to specify the type of the resource. The as attribute can have the following values: audio, document, embed, fetch, font, image, object, script, style, track, video.
Resources:
- https://web.dev/preload-critical-assets/
- https://web.dev/uses-rel-preload/
- https://web.dev/uses-rel-preconnect/
- https://web.dev/uses-rel-preload/
