When using Google Lighthouse to optimise the web performance, a common recommendation by Lighthouse would be to preload key requests by using <link rel="preload">. However, the rel value preload is not supported by some major browsers like Firefox.
To maximise the use of rel value preload for most major browsers and to provide a fallback method at the same time, the most commonly adopted approach seems to be to use both the default rel value and the rel value preload together. For instance, in loading css stylesheets, we can do something like <link rel="preload stylesheet">. This way, browsers that support preloading would preload as intended and browsers that do not would load the stylesheets the regular way. Further, only 1 request would be sent for the stylesheets when the page loads.
Credits to Stack Overflow for the nifty workaround!
Top comments (0)