What is rel=”preload” and should you use it?
User experience is arguably the most important aspect of a website, and website optimization (or page load speed) is important for a good user experience. Search engines realize this as well. Google factors in website load speed into their user-friendliness scores and their overall search algorithms. It’s obvious how important website optimization should be to a web developer and website owner. So, when a new web standard is released that could help to achieve faster page loads, it’s very big news. Recently, w3c released link re=”preload”, providing another option for web developers to tell browsers how to load resources on their website.
If you have had trouble with optimizing your website because of render-blocking website dependent resources, you can now easily preload those resources and then asynchronously load them in the document. The link rel=”preload” even includes an onload attribute, which can be used to asynchronously load the preloaded resource. It can also be used to separate the load for the desktop version and the mobile version of your website with the use of the media attribute. For example, if you wanted to replace a script-heavy dynamic element with an image element specifically for mobile devices, you can tell the browser to only load each resource for a specific resolution. Great stuff, huh?!
The rel=”preload” link tag is fairly new, which means that not a whole lot of browsers are supporting it yet. Chrome 50, released in April, is the only browser so far that has support for link rel=preload. I expect the majority of browsers to follow the same path, but you may want to hold off on implementing preload into your website until full cross browser support is available. Because this is a new feature, there may be some bugs, which can also justify holding off on implementation. Still, now is the time to do your research and get prepared to implement this into your website. This will likely become a new standard for certain website resources, such as font files, in the near future.
If you are a front-end speed optimization kind-of-guy, then you should check out my other article on optimizing the page load speed, “How to optimize website page speed.” It discusses the simple and fast solutions to making your website load lightning fast for your users.