Critical CSS is a plug-in for integration with the criticalcss.ru service, which automatically detects and generates critical website styles.
CSS style sheets block page rendering. Until the browser requests, receives, downloads, and parses your style sheets, your page remains empty. Because of this, there is a delay during page loading, sometimes up to several seconds.
Injecting critical CSS will speed up page rendering especially on mobile devices and improve your performance score in tools like WebPageTest and Google's Pagespeed Insights and improve SEO.
The plugin receives critical styles for each page using the API and embeds them on the site, loads the main styles after the page is loaded, thereby not blocking page rendering and significantly increasing its loading speed.
"Super Cache" - works at the first stage, making the page instantaneous for users. And "Critical CSS" works in the second stage by speeding up rendering, that is, the visual rendering of the page.
It is also worth considering that the number of Pagespeed Insights points is added up based on the pages already received, that is, the second stage of loading speed, rendering speed, is analyzed. The faster the page of your site is visually rendered, the higher the scores.
And often, many sites have high Pagespeed Insights scores, but pages load slowly for users, have a delay before loading, or vice versa sites have low Pagespeed Insights scores, but pages load quickly for users.
Plugin bundle "Super Cache" + "Critical CSS" speeds up the site at the same time in two stages of loading, which allows you to get high scores on the Pagespeed Insights service and instantly load pages for users even on a weak server or during periods of high traffic. And also both plugins improve Core Web Vitals, which has a positive effect on SEO.
For the plugin to work, you will need to get a token from the service criticalcss.ru.
After the plugin is activated, when users visit the pages of the site, critical styles for these pages will automatically be obtained and saved. When visiting again, the saved critical styles will be included in the head tag.
Check your site through the Pagespeed Insights service, all the main metrics should grow and there should be no errors in the browser console, if this is not the case, you will need additional plugin settings, for this read documentation.
-29% Desired images for each device (+ convert webp).
-29% Promotional cards for your site.
-29% Lazy loading images and iframes
-29% Unlimited quantity. 16 types.14 display conditions
-29% Short videos and pictures on your website!
-29% Slider with many parallax effects.
-29% Size chart for product categories and brands.
-29% Website acceleration