Loading assets on a page is an important part of achieving optimal web performance and a seamless user experience. Usually, real world apps load multiple CSS, font, JavaScript, and image files. These assets are render-blocking by default, which impairs loading performance.
In this tutorial, you will explore a new feature called resource hints, like preload and prefetch. These resource hints will allow you to overcome render-blocking.
To complete this tutorial you will need the following:
When a request to a resource is render-blocking, it means that the window.onload
event will not be triggered until that request finishes. In modern single page apps, most of the assets, like CSS and JavaScript files along with images, rely on this event in order to start operating. That means that parts of the UI will not start rendering or displaying on-screen until the render-blocking requests have finished loading.
To see this in action, create an HTML file with the standard boilerplate HTML in place. This can be done in your code editor of choice:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
In the head, use the <link>
tag to access your Google Font of choice. This code snippet will use Roboto:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Roboto:400,600|Material+Icons'>
</head>
<body>
</body>
</html>
Add <style>
tags. Using CSS, set the font-family
for all p
tags to Roboto:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Roboto:400,600|Material+Icons'>
<style>
p {
font-family: Roboto;
}
</style>
</head>
<body>
</body>
</html>
With your metadata and CSS in place, you can create a <p>
within the <body>
that says Hello
:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Roboto:400,600|Material+Icons'>
<style>
html {
font-family: Roboto;
}
</style>
</head>
<body>
<p> Hello </p>
</body>
</html>
To see the render blocking in action, add <script>
tags within the <body>
. Create a JavaScript function using window.onload
that will console.log
the message 'Loaded'
:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Roboto:400,600|Material+Icons'>
<style>
html {
font-family: Roboto;
}
</style>
</head>
<body>
<p> Hello </p>
<script>
window.onload = function () {
console.log('Loaded');
}
</script>
</body>
</html>
With your code in place, open your HTML file in Chrome. Next, open Developer Tools and navigate to the Network tab. Lower the connection to Slow 3G and then reload the page.
The Loaded
message is logged in the console right after the CSS file is loaded, as the next image shows:
This effect becomes more problematic when building and loading larger websites. Your CSS and JavaScript assets, along with many others, may take a long time to load. Therefore, your CSS styles may not display immediately. Preloading resources can eliminate this effect and prevent delayed loading.
To prevent the default render-blocking and to make sure that page resources like fonts and CSS start loading early in the page life cycle, you will need to implement preloading. The rel="preload"
attribute value is used to preload assets. It can be applied to several file formats, including CSS, JS, fonts, images, and more. Depending on the type of file you would like to preload, the corresponding as
attribute may also need to be included along with rel="preload"
. For CSS, as=
will need to be set equal to "style"
. For JavaScript, as=
will need to be set equal to "script"
.
Return to the HTML file and change the previous <link>
. Set rel
equal to "preload"
. Add the as
attribute set equal to "style"
:
<head>
<link
rel="preload"
as="style"
href='https://fonts.googleapis.com/css?family=Roboto:400,600|Material+Icons'>
<style>
html {
font-family: Roboto;
}
</style>
</head>
With your HTML file opened in Google Chrome, return to Developer Tools and load the page with Network still set to Slow 3G. You’ll see that the Loaded
log shows up right before the CSS request starts, as the following image shows:
However, you may have noticed that the CSS style hasn’t been applied to the text. That’s because using preload or prefetch only fetches the resource, but it doesn’t apply it. Instead, preload and prefetch will keep the resource in memory. You have to define when the resource will be loaded.
The font needs to be applied as soon as it loads. To make this happen, add the onload
attribute to the <link>
tag. Set onload
equal to "this.rel = 'stylesheet'"
:
<link
rel="preload"
as="style"
onload="this.rel = 'stylesheet'"
href='https://fonts.googleapis.com/css?family=Roboto:400,600|Material+Icons'>
By setting the rel
attribute to stylesheet
in onload
, the browser is told to use the resource. Since it’s been already downloaded in memory, it doesn’t download it again.
Since the onload
solution relies on JavaScript, add <noscript>
tags which contain the original <link>
tags with rel
set to "stylesheet"
:
<link
rel="preload"
as="style"
onload="this.rel = 'stylesheet'"
href='https://fonts.googleapis.com/css?family=Roboto:100,900|Material+Icons'>
<noscript>
<link
rel="stylesheet"
href='https://fonts.googleapis.com/css?family=Roboto:400,600|Material+Icons'>
</noscript>
This will ensure that the font displays if JavaScript is disabled or fails to load.
You now know how to preload your web page assets. There are times when you may want to prefetch your resources instead.
Prefetching works similarly to preloading. The difference is that, when prefetching a resource, the browser considers the resource to be low priority. This means that the resource or asset will load a bit later. Because of this, prefetching is usually implemented with resources that are not required initially, but are used at a later point.
To implement prefectching in your HTML page, change the value of rel
to "prefetching"
:
<link
rel="prefetch"
as="style"
onload="this.rel = 'stylesheet'"
href='https://fonts.googleapis.com/css?family=Roboto:100,900|Material+Icons'>
Prefetching and preloading CSS can help improve web performance. You may want to apply preloading to your JavaScript as well. Preloading JavaScript is different from preloading CSS resources.
Preloading JavaScript resources is done differently. This example, taken from this Google Developers article on preloading, shows this:
<link rel="preload" href="used-later.js" as="script">
<!-- ... -->
<script>
var usedLaterScript = document.createElement('script');
usedLaterScript.src = 'used-later.js';
document.body.appendChild(usedLaterScript);
</script>
Note: Code snippet reproduced from work created and shared by Google and licensed under the Apache 2.0 License.
The important step here is setting the src
attribute of the file and inserting it into the DOM.
Preloading and prefetching allows you to control how resources are loaded and helps boost web performance. With this tutorial, you implemented resource hints to preload and prefetch resources like CSS, fonts, and JavaScript. This will help you to create faster progressive web apps.
To create progressive web apps with Angular, this How To Build Progressive Web Apps with Angular tutorial can accomplish that. If you prefer Vanilla JavaScript, this How to Build a PWA in Vanilla JavaScript tutorial can help you.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Sign up for Infrastructure as a Newsletter.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
It’s UI looks not good as the origin blog post!
preload
https://alligator.io/html/preload-prefetch/#preloading-javascript
https://www.digitalocean.com/community/tutorials/html-preload-prefetch