Let's face, it…No one likes a slow app. And with Progressive Web Apps, a great experience requires everything to be fast. This is not a vague statement either, research shows that about half of your users will leave your app if it does not load within 3 seconds over the network. Thankfully, there's APIs in place to help you achieve faster loading, with little effort. We'll look at rel=preload and how this little property, can speed up our loading performance.
rel=preload is a relatively new value you can use for the rel attribute of the link element. It is a special value that the browser can read, and know that the resource it's attached to is important. Once a browser sees a link element with preload, it will automatically start downloading the asset instantly.
But how is this different from the browsers normal flow? Well, when a browser request an html page, the parse will read the document, and pull out any resources as it gets to them. This is typically why people put JavaScript at the end of the page, so it would not block the browser from parsing the rest of the document.
Now this might have worked well when JavaScript was only used to slightly enhance a page, but with SPAs and PWAs being written in JavaScript, this means our uses will see a blank page until the parser reaches the end of the document. This is where rel=preload comes in handy. With rel=preload the assets will be downloaded first, before the page is rendered, making sure we have all the important resources.
So the first thing you might think is "Alright, this is easy, I'll just add repload to everything". But keep in mind, if everything is important, than nothing is. So we need to make sure we pick the right assets to preload for our app.
This means picking assets that are absolutely necessary for our app to start up. In the context of and Ionic-angular app, this would be the main/vendor/polyfills JavaScript files and the main.css file.
<head>
<!-- our important resources -->
<link rel='preload' href='main.js' as='script' />
<link rel='preload' href='vendor.js' as='script' />
<link rel='preload' href='polyfills.js' as='script' />
<link rel='preload' href='main.css' as='style' />
</head>Now at first glance, it might be confusing to have declared a JavaScript file in a link element, and this is understandable. But link and preload can be used to load any kind of resource, as long as the as property is set.
Note:
asis only to be used when usingrel=preload
An important note is the location of our resources. Now that they're in the head of the page, they will be picked out by the browser right away and begin to download.
Since we want to make apps built with Ionic fast by default, we're investigating adding automatic builds tools to automatically add preload links to your app. This means you as the dev can focus on just building your app, and the tooling will know what's important and how to handle thing for you. Preload is a great example of a simple API that can unlock a better experience for your users, without a dev having to jump through hoops.