DEV Community

Discussion on: Eliminate render-blocking resources

Collapse
 
equinusocio profile image
Mattia Astorino • Edited
<link rel="preload" href="style.css" as="style">
<link rel="preload" href="main.js" as="script">

developer.mozilla.org/en-US/docs/W...

The preload value of the element's rel attribute allows you to write declarative fetch requests in your HTML

, specifying resources that your pages will need very soon after loading, which you therefore want to start preloading early in the lifecycle of a page load, before the browser's main rendering machinery kicks in. This ensures that they are made available earlier and are less likely to block the page's first render, leading to performance improvements. This article provides a basic guide to how preload works.

You can't use defer or async because if you load an ui component that require js at the top of the page you must already have his js working.

Collapse
 
rnrnshn profile image
Olimpio

Ohhhh... This will be hepful when using Google fonts/... Its very interesting... Thank You