We'll walk you through the process of preloading various different kinds of assets like fonts, CSS and JavaScript files and images, which will get downloaded locally into the browser during early stages of page load process.
Why is preload important?
When a browser loads a page, assets like CSS, JavaScript, fonts and image files are render-blocking by default. Furthermore, if we have a lot of these files it can cause your website to appear slow, as users won’t be able to see anything until all those files finish loading.
In other words, the window.onload event won’t be triggered until all render-blocking resources are not finished loading, causing a delay in the visual elements rendering process.
Therefore, by implementing preloading, we enable the browser to start loading resources early in the page load process, which will be used only after they’re referenced in the DOM tree. This will allow for visual elements to load without being delayed by those resources.
How to preload an asset?
In order to preload a CSS or JavaScript file we can use a link tag, including a “rel” attribute and setting it to preload. Furthermore, we need to give the browser more context about what type of file we’re preloading by adding an “as” attribute and set it either to style or script, whether we’re preloading a CSS or JavaScript file, respectively.
To clarify, the “as” attribute will let the browser know about the destination of the preloading request, which will ensure that it sets appropriate request headers, priority, and applies relevant content security policy directives.
Here is an example of how to use preloading on a JavaScript file.
<link rel="preload" href="used-later.js" as="script">
Here is an example of how to use it with CSS or font files.
<link rel="preload" as="style" href='<a href="https://fonts.googleapis.com/css?family=Roboto:400,600%7CMaterial+Icons">https://fonts.googleapis.com/css?family=Roboto:400,600|Material+Icons</a>'>
Furthermore, if you want to apply a file as soon as it’s loaded, you can use the “onload” attribute and set it to “this.rel = ‘stylesheet’”. However, you need to keep in mind that this will require JavaScript to work. Therefore, you should also make a duplicate link tag of that file and wrap it inside <noscript></noscript> tags. This will ensure that the file still loads in case that the JavaScript is disabled or fails to load in the browser.
Here is also an example of such a case.
<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>Conclusion
To conclude, we talked about what preloading is good for, why it’s important, and how to implement it within code. Between websites getting ever more complex and fast internet connection being available to more and more people around the world, every byte that loads on a user’s screen matters. And preloading is one of those things that we can utilize to speed up the loading process and ensure optimal user experience.
