The smaller the size of the styles and the smaller the number of them at each stage of loading, the higher the speed of page display.
Styles are optimized and loaded in 3 groups.
3 groups#
- Critical
This includes everything that should be loaded before the main content of a page, because it directly depends on these styles.
- Fonts
Delayed loading of fonts has a positive effect on speed. To complete this, all fonts are placed in this group during the separation of critical parts. If for some sites this separation has the opposite effect, then it can be turned off.
- Non-critical
Everything that can be loaded after the main content of page with a delay determined by the loading time of non-critical scripts. The group is formed in the process of separation of critical parts.
Style optimization (CSS)#
-
This strongly affects the First Contentful Paint (FCP) indicator. Because, the faster the initial page data is loaded, the faster it will be drawn. Usually, sites have a lot of non-critical styles that can be delayed loading. According to experience, it adds an average of 10 -15 points to the indicator.
- Inlining
Because critical styles should always be loaded before the main content, it is better to embed them at the top of the page to avoid unnecessary calls to the server. But since this can greatly increase the size of the stored data, then it is effective only in combination with fragmented cache.
- Grouping
Reduces the number of requests to the server, thereby reducing the page load time. According to experience, it adds an average of 5-10 points to the rating, affecting the Total Blocking Time (TBT) indicator, the importance of which was increased from 25% to 30% in version 8 of PageSpeed.
- Delayed loading fonts
It is done as standard way by adding font-display: swap attribute. Plus, they aren’t included into critical styles, which reduces page size, especially when huge Google Fonts is used. It’s configurable here.
- Minification
It is processed together with the separation of critical parts, which saves time.