rel=”preload” Not working in Internet Explorer (IE) & Firefox

I recently went through and improved the on page performance for one of my websites in a number of ways in which I’ll cover as part of a later post. One of those was to use rel=”preload”. to load my stylesheets. There’s no point in me going through the benefits of this since this article does it very nicely: https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/

After seeing the performance of my website increase and a small ranking improvement in Google, i had a complaint from a user saying my site didn’t load very well in Internet Explorer 11.

I held back my instinct to reply with “What in the world are you still using the cold dead Internet Explorer browser for???” And thought i’d do a little bit of research to find out if it was worth fixing or not.

2.8% of my site’s users use Internet Explorer (in January 2019) and so I thought to avoid annoying more people, i’d fix the issue.

Checking the browser compatibility, Internet Explorer wasn’t the only browser with issues… Firefox was also impacted.

hmmm… so had i jumped the gun a little? Maybe… but after a lot of researching the best way to fix this I found two potential options:

Server Side Logic

Use your server side code (php in my instance) to identify which browser has requested the page and act accordingly (render the preload version for supported browsers and the old way for new browsers):

if(strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== FALSE || strpos($_SERVER['HTTP_USER_AGENT'], 'Trident') !== FALSE || strpos($_SERVER['HTTP_USER_AGENT'], 'Firefox') !== FALSE)
{
   echo '<link rel="stylesheet" href="/example.css">';
}
else
{
   echo '<link rel="preload" as="style" href="/example.css" onload="this.rel='stylesheet'">';
}

Print out both formats

It seems that by outputting both formats the browser will choose the right one to use. For example:

<link rel=”preload” as=”style” href=”/example.css” onload=”this.rel=’stylesheet'”>
<link rel=”stylesheet” href=”/example.css”>

I have to admit, I do not like this option as it feels untidy but I was unable to find a better one.

I chose to print out both formats, this works as i want it to, but will be keeping an eye on the browser support to improve this in future.

Today’s lesson – an obvious one… Always test your website in all your supported browsers before you deploy changes like this…