I just learned about rel="preload" and I wonder when it should be used. I found different types of preloads like preloading with javascript etc. as well. Google recently announced it would rank faster loading pages higher (at least on mobile) making pagespeed even more important for everyone.
If you already use HTTP/2 (HTTP/2.0), HTTPS, gzip, CDNs etc. and want to have your sites load as fast as possible: Should you (additionally) use preloads and in what quantity ?
Should you add HTML5 rel="preload" to every link, script, font etc. or just some of them? Maybe only to external ones?
Or is it better to rely on javascript and its libraries to preload resources?
I would recommend preloading resources that you have high-confidence will be used in the current page. Preload is an early fetch instruction to the browser to request a resource needed for a page, and it is worth fetching things like key scripts, Web Fonts, and hero images (the things that could block the browser rendering).
This article does a fantastic job of explaining the ins and outs of preload and prefetch and when you should use them:
https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf