Critical CSS

Critical CSS for Shop-Script

Speed ​​up site rendering and increase PageSpeed.

1 rating

Install Critical CSS plugin directly from your Webasyst backend using the Installer app.

Your review
Installs
100+
Developer

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.

Benefits:

  • Speed ​​up the site.
  • Improvement of all key Pagespeed Insights metrics, namely: First Contentful Paint, Speed ​​Index, Largest Contentful Paint, Time to Interactive, Total Blocking Time, Cumulative Layout Shift.
  • SEO improvement.
  • Improve site usability.
  • Improve Core Web Vitals.

Functions:

  • Auto-include critical styles in the head tag.
  • Lazy loading JavaScript files.
  • Lazy loading CSS files.
  • Combine all CSS files into one file.
  • Various minor tweaks for critical CSS generation.

Note:

Plugin "Critical CSS" is a great addition to the plugin "Super Cache". If we conditionally divide the page loading speed of the site into two stages:

  1. Getting the page from the server.
  2. Page rendering.

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

Plugin operation:

For the plugin to work, you will need to get a token from the service criticalcss.ru.

  1. To do this, follow the link https://criticalcss.ru/#buy-token and get a free or paid token for your site.
  2. In the plugin settings, enter the token and the domain of the site for which the token was issued.
  3. The plugin is ready to use.

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.

Technical support:

  • Technical support is provided at: startwebsite@mail.ru
  • Working hours (Moscow time): 10:00 - 18:00 Mon-Fri on working days of the Russian Federation
  • Technical support includes: configuration consultations, answers to questions about the plugin operation, plugin customization
  • We will be glad to hear your: wishes, ideas, comments on the work of the plugin

StartWebSite

All products of this developer