Splitting loading styles into 3 stepsAccelerator for WordPress

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

Style optimization (CSS)

  • Separation of critical parts

    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.

    css-split-scheme

  • 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.

Leave a Reply