What’s the best way to use preload for critical-css and fonts?
Asked on Sep 15, 2025
Answer
Preloading critical CSS and fonts can significantly enhance page load speed by prioritizing essential resources. This technique helps improve the Largest Contentful Paint (LCP) by ensuring that critical styles and fonts are available as soon as possible.
<!-- BEGIN COPY / PASTE -->
<link rel="preload" href="/path/to/critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link rel="preload" href="/path/to/font.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<!-- END COPY / PASTE -->Additional Comment:
- Preloading CSS with the "as='style'" attribute ensures the browser treats it as a stylesheet, while the "onload" attribute allows it to be applied once loaded.
- For fonts, using "as='font'" and specifying the correct "type" and "crossorigin" attributes helps the browser handle the font efficiently.
- Ensure that preloaded resources are indeed critical to avoid unnecessary bandwidth usage.
- Test the impact of preloading on your site's performance using tools like Lighthouse or WebPageTest.
Recommended Links: