Arin Adamson
By Arin Adamson | Web Dev | May 5, 2016

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. 

This particular option provides the ability to separate resource execution from resource fetching. When a website’s resource is defined using the link rel=”preload” tag, the resource is fetched and then the browser can prioritize the download of those resources. This enables developers to define dependent website resources and then execute them at a non-render blocking time, thus getting content to display on the screen more quickly (and all without bloated, performance-decreasing scripts). Simply put, browsers now have the ability to fetch images, videos, font, CSS, and JavaScript files first and then a developer can choose where and when to run these scripts in their page. This is a great step forward to enhancing the overall experience for internet users.

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.

background dots

Related Topics

How to Create and Implement Insightful User Personas

by Natalie Hanes

What if there was a low-effort and low-cost way to paint a picture of your audience segments? What if you had profiles of…

Mastering your GTM (Pt 1): Auditing Your Google Tag Manager in 3 Steps

by Ryan Rosati

Google Tag Manager: What it is and Why it’s Important Managing the plethora of marketing and tracking scripts used on your site can…

Inside the Buyer’s Journey (Pt 2): Rolling out a Holistic Media Strategy

by Andrew Seidman

Sometimes, digital marketing can feel overwhelming. There seem to be so many different ways to market oneself online. It’s impossible to know where…

In the time it takes to read this sentence, you could be on your way to a well-oiled demand generation machine. Ready for your blueprint?

yes, i want my Digital blueprint