Критический CSS для Shop-Script

«Критический CSS» — это плагин интеграции с сервисом criticalcss.ru, который автоматически определяет и генерирует критические стили сайта.

Таблицы стилей CSS блокируют рендеринг страницы. Пока браузер не запросит, не получит, не загрузит и не проанализирует ваши таблицы стилей, ваша страница остается пустой. Из-за этого происходит задержка во время загрузки страницы, иногда до нескольких секунд.

Внедрение критического CSS ускорит рендеринг страницы особенно на мобильных устройствах и улучшит вашу оценку производительности в таких инструментах, как WebPageTest и Google’s Pagespeed Insights и улучшит SEO.

Плагин с помощью API получает для каждой страницы критические стили и внедряет их на сайт, загрузку основных стилей выполняет после загрузки страницы, тем самым не блокирует рендеринг страницы и значительно повышая скорость её загрузки.

Не работает на шаблонах: inSale Pro

Выпуск новых токенов временно приостановлен, на неопределенное время.

Этот плагин относится к серии наших плагинов «SPEED» если вы хотите ускорить свой сайт, обратите внимание на другие плагины этой же серии: Супер кэш, Lazy load, Адаптивные изображения PRO.

Примеры работы:

Тема Hypermarket:

• https://webasyst.criticalcss.ru/hypermarket-critical/ (с плагином)
• https://webasyst.criticalcss.ru/hypermarket-nocritical/ (без плагина)

Преимущества:

• Ускорение сайта.
• Улучшение всех основных метрик Pagespeed Insights, а именно: First Contentful Paint, Speed Index, Largest Contentful Paint, Time to Interactive, Total Blocking Time, Cumulative Layout Shift.
• Улучшение SEO.
• Улучшение Юзабилити сайта.
• Улучшение Core Web Vitals.

Функции:

• Авто-подключение критических стилей в тег head.
• Отложенная загрузка JavaScript файлов.
• Отложенная загрузка CSS файлов.
• Объединение всех файлов CSS в один файл.
• Различные мелкие настройки для генерации критического CSS.

Работа плагина:

Для работы плагина понадобится получить токен от сервиса criticalcss.ru.

1. Для этого перейдите по ссылке: criticalcss.ru/#buy-token и получите бесплатный или платный токен для вашего сайта.
2. В настройках плагина введите токен и домен сайта для которого выдан токен.
3. Плагин готов к использованию.

Для лучшей эффективности активируйте опцию "Отложить загрузку JavaScript".

После того, как плагин активирован при посещении пользователями страниц сайта для этих страниц автоматически будут получены и сохранены критические стили. При повторном посещение сохраненные критические стили будут подключены в тег head.

Проверьте свой сайт через сервис Pagespeed Insights все основные метрики должны вырасти и ошибок в консоли браузера быть не должно, если это не так понадобятся дополнительные настройки плагина, для этого читайте документацию.

Заметка:

Плагин «Критический CSS» является отличным дополнением к плагину «Супер кэш». Если условно разделить скорость загрузки страницы сайта на два этапа:

1. Получение страницы с сервера.
2. Рендеринг страницы.

«Супер кэш» — работает на первом этапе делая получение страницы моментальным для пользователей. А «Критический CSS» работает на втором этапе ускоряя рендиренг, то есть визуальную отрисовку страницы.

Также стоит учитывать, что количество балов Pagespeed Insights складывается на основе уже полученных страниц, то есть анализируется второй этап скорости загрузки, скорость рендеринга. Чем быстрее визуально отрисуется страница вашего сайта, тем выше балы.

И зачастую многие сайты имеют высокие балы Pagespeed Insights, но для пользователей страницы загружаются медленно, имеют задержку перед загрузкой или наоборот сайты имеют низкие оценки Pagespeed Insights, но для пользователей страницы быстро загружаются.

Связка плагинов «Супер кэш» + «Критический CSS» ускоряет сайт одновременно на двух этапах загрузки, что позволяет иметь высокие оценки по сервису Pagespeed Insights и моментально загружать страницы для пользователей даже на слабом сервере или в периоды высокой посещаемости. И также оба плагина улучшают Core Web Vitals, что положительно влияет на SEO.

Техническая поддержка:

• Техническая поддержка оказывается по адресу: startwebsite@mail.ru
• Время работы (по московскому времени): 10:00 - 18:00 Пн-Пт в рабочие дни РФ
• Техническая поддержка включает: консультации по настройке, ответы на вопросы по работе плагина, настройка плагина по вашему заданию
• Будем рады услышать ваши: пожелания, идеи, замечания по работе плагина