DEV Community

Cover image for How to improve the Critical Path CSS on web using the “Above-The-Fold" strategy?
Beto Muniz
Beto Muniz

Posted on

How to improve the Critical Path CSS on web using the “Above-The-Fold" strategy?

In this brief content, I talk about the Above-The-Fold strategy to load CSS and why it matters to improve the page loading of our web pages.


📁 Above-The-Fold strategy on the web is a practice that extracts critical CSS declaration to render the layout displayed during the initial page load.

⏬ Non-critical CSS is added to another context (usually a dedicated .css file) to use async loading.


⌛️ Above-The-Fold enhances the loading experience while browsing since the browser will have the necessary CSS to scaffold the layout.

⏱ Also, this technique is an essential strategy to improve First Content Paint metrics in our web pages.


👉 Have you already heard about this web optimization opportunity strategy?


💌 Subscribe to my newsletter to receive content about web optimizations like the presented and more about web development.

Discussion (0)