CSS files are render-blocking resources : they must be loaded and processed before the browser can render the page. Web pages that contain unnecessarily large styles take longer to render.
In this guide, you’ll learn how to lazy load non-critical CSS with the goal of optimizing the critical rendering path and improving First Contentful Paint (FCP) .
Load CSS in a suboptimal way #
The following example contains a collapsible item with three hidden text paragraphs, each styled with a different class:
This page requests a CSS file with eight classes, not all of which are required to render “visible” content.
The goal of this guide is to optimize this page so only key styles are loaded synchronously, while other styles (such as those applied to paragraphs) are loaded in a non-blocking manner.
Measurement #
Run Lighthouse on the page and go to the Performance section.
The report shows the First Contentful Paint metric with a value of “1s”, and the opportunity to eliminate render-blocking resources , the result points to style.css …
The post Lazy Loading of Non-Critical CSS first appeared on Lenix Blog .
This article is reprinted from https://blog.p2hp.com/archives/9941
This site is for inclusion only, and the copyright belongs to the original author.