Critical CSS is often referred to as the “Critical CSS Rendering Path”, which means all the necessary CSS code required to display a website in a browser for the website visitor. Visitors will often see a white screen until the CSS stylesheets have been downloaded and evaluated. For this reason, optimizing CSS delivery is important for page speed and the user experience. To improve the loading speed of a website, only the CSS required to load the visible part of a page should be loaded. Since all CSS is rendered, this means that the page appears much faster to the website visitor. This is why PageSpeed tools often advise users to remove render-blocking CSS below the fold. This refers to CSS that is not required for the page to be displayed correctly within the website visitor's viewport. The inline section (i.e. directly in the `<head>` using `<style>`) should contain everything necessary to render the visible area. This section is referred to as “critical”.
What is “Above the Fold”?
This is the visible area within the browser window that is visible to users first (without scrolling). This area should load quickly. One way to achieve this is with above-the-fold CSS – extracting critical CSS styles that are required directly at the top of the page.
The visible area:
Depending on the screen resolution and the browser window, the visible area will of course always be slightly different. On smartphones, this section is usually smaller – especially when proper scaling using the viewport (in the HTML head) has been configured. This visible page area also often changes when the smartphone is tilted horizontally.
The visible area could include the following:
- Header and logo
- Primary navigation at the top
- Layout structure
- body declaration in CSS
- Navigation above the content
- The H1 heading
- Article previews (in a category)
And this is critical CSS:
The page areas mentioned above have CSS declarations. These are important for loading the Above the Fold content. The @media declarations for media queries and @import for fonts, for example, can also be important as long as they are required in the visible area.
This is not part of critical CSS:
Hover effects or animations are only required when the visitor interacts with the page. These should not be loaded in the HTML head.
Do you have any further questions about this topic? Or do you need help designing your website from a professional web agency in Munich? Then feel free to contact us!
