Быстрая генерация критического CSS

Быстрая генерация критического CSS SEO

Меня часто просят ускорить сайты, и одним из способов ускорения является встраивание критического CSS и сегодня я расскажу как быстро, просто и бесплатно получить критический CSS при помощи генератора.

Для чего выделять критический CSS

Файлы CSS являются ресурсами, блокирующими рендеринг: они должны быть загружены и обработаны до того, как браузер отобразит страницу. Отображение веб-страниц, содержащих излишне большие стили, занимает больше времени.

В этом руководстве вы узнаете, как отложить некритичный CSS с целью оптимизации критического пути рендеринга и улучшения First Contentful Paint (FCP).

Critical Path CSS Generator

Заходим на сайт Critical Path CSS Generator в поле URL TO WEB PAGE TO CREATE CRITICAL CSS FOR пишем адрес страницы для которой мы хотим выделить критический CSS
А в поле FULL CSS TO EXTRACT CRITICAL CSS FROM. CAN BE MINIFIED. вписываем весь CSS страницы и нажимаем кнопку «Create Critical Path CSS». После чего получаем наш критический CSS.

Critical Path CSS Generator

Далее встраиваем этот критический css в head обернув в:

<style type="text/css">
здесь критические стили
</style>

установка критического CSS

А весь остальной css рекомендую перенести в низ (ближе к закрытию body — перед подключением скриптов), вот такой конструкцией:

<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>

Это не стандартный способ загрузки CSS. Вот как это работает:

  • link rel="preload" as="style"запрашивает таблицу стилей асинхронно. Вы можете узнать больше о preload в руководстве по предварительной загрузке критически важных ресурсов .
  • Атрибут onload в linkпозволяет CSS для обработки , когда он заканчивает загрузку.
  • «обнуление» onload обработчика после его использования помогает некоторым браузерам избежать повторного вызова обработчика при переключении атрибута rel.
  • Ссылка на таблицу стилей внутри noscript элемента работает как резерв для браузеров, которые не выполняют JavaScript.

Что делать если у сайта много таблиц стилей?

Вам их нужно объединить, почти во всех CMS, есть модуля для этого, в modx это можно сделать при помощи бесплатного дополнения MinifyX, в WP можно объединить при помощи плагина Autoptimize. Если у вас простой статический сайт, то объедините их в ручную.

Поделиться с друзьями
Алексей

Веб-дизайнер и SEO оптимизатор. Занимаюсь созданием сайтов с 2010 года и их продвижение с 2012 года!

Оцените автора
( Пока оценок нет )
Web-Revenue.ru