Если вы задумываетесь о скорости загрузки страниц (а это необходимо, если вы хотите, чтобы посетители оставались на вашем сайте больше двух секунд), то вам необходимо понимать, как CSS влияет на производительность сайта и как ускорить время загрузки страницы с помощью задачи по оптимизации, называемой Critical CSS.
В этой статье мы рассмотрим следующие вопросы:
- Что такое критический CSS и как он улучшает производительность?
- Как оптимизировать WordPress с помощью функции Hummingbird Critical CSS?
- Функция Hummingbird’s Critical CSS совместима со всем WordPress?
Что такое Critical CSS и как он улучшает производительность
Когда пользователь заходит на сайт, он видит только то содержимое, которое отображается на экране до скролла, который будет позже.
Положительный эффект от использования веб-страницы можно оценить по скорости загрузки ее содержимого. Чем быстрее загружается страница (или воспринимается пользователем как быстро загружающаяся), тем лучше пользовательский опыт. И наоборот, чем медленнее загружается страница (или воспринимается пользователем как медленная), тем хуже впечатления.
Так как при заходе на страницу посетитель видит только контент до низа своего дисплея, до начала прокрутки вниз, то имеет смысл сделать так, чтобы контент, который видно при открытии сайта загружался как можно быстрее до загрузки остальной части страницы.
Critical CSS (также известный как Critical Path CSS или Critical CSS Rendering Path) — это методика, которая извлекает необходимый минимум CSS для максимально быстрого вывода контента на текущую видимую часть дисплея для пользователя.
В то время как пользователь, просматривающий содержимое страницы, воспринимает ее как быстро загружаемую, и наслаждается текущим загруженным контентом, остальная часть CSS успевает догрузиться, и впечатление о сайте и его скорости уменьшает процент отказов, который влияет на SEO оптимизацию ресурса.
Такие приемы, как «lazy loading» (отложенная загрузка), задержка выполнения JavaScript и критический CSS, позволяют оптимизировать последовательность действий браузера по преобразованию HTML, CSS и JavaScript в пиксели на экране.
Преимущества Critical CSS
Critical CSS позволяет повысить производительность сайта за счет:
- Более быстрой первоначальной визуализации и загрузки
- Улучшение восприятия ресурса пользователями
- Улучшение SEO-показателей
- Уменьшение веса страницы
- Упрощенное техническое обслуживание
- Улучшенный рендеринг сайта
- Положительное влияние на показатели Core Web Vitals (особенно First Contentful Paint и Speed Index)
- Более высокие показатели PageSpeed Insights
Что такое Core Web Vitals?
Core Web Vitals (Основные визуальные метрики веба) — это набор ключевых метрик, разработанных Google, которые измеряют производительность и опыт восприятия от посещения сайта. Эти метрики фокусируются на визуальных аспектах взаимодействия пользователя с веб-сайтом и включают три основные составляющие:
- Largest Contentful Paint (LCP) — Измеряет время, необходимое для загрузки самого большого контентного элемента на странице, такого как изображение или блок текста. Чем меньше это время, тем лучше.
- First Input Delay (FID) — Отражает время, которое проходит между первым взаимодействием пользователя с страницей (например, щелчком по ссылке) и моментом, когда браузер фактически может обработать это взаимодействие. Маленькое значение FID указывает на более отзывчивый пользовательский опыт.
- Cumulative Layout Shift (CLS): Измеряет степень, с которой элементы на странице изменяют свою позицию в процессе загрузки. Это важно для предотвращения неожиданных сдвигов контента, которые могут привести к негативному пользовательскому опыту. Минимизация CLS является ключевой целью.
Примечание: Содержимое, отображаемое в верхней части страницы при ее загрузке до прокрутки, зависит от устройства и размера экрана, на котором просматриваются веб-страницы. По этой причине не существует общепринятой высоты в пикселях, которую можно было бы считать высотой визуального контента, расположенного в начале страницы.
Запускаем Critical CSS на сайте
Итак, вы проверили свой сайт с помощью инструмента PageSpeed Insights, и в отчете появились рекомендации для устранения блокирующих компонентов отрисовку сайта (рендеринг).
Что теперь? Как на самом деле выполнить эти рекомендации?
Можно попытаться исправить ситуацию вручную (это утомительно, требует много времени и не всегда рекомендуется), использовать инструменты для веб-разработки (если у вас есть технические навыки) или воспользоваться плагином WordPress, например Hummingbird, который автоматически выявляет, устраняет и решает любые проблемы.
Мы рекомендуем использовать метод плагинов. Это наиболее быстрый и разумный вариант выполнения работы для тех у кого нет навыков в более «глубой» веб разработке.
В то время как Critical CSS относится в основном к CSS, расположенному над текстом, Hummingbird может извлекать и встраивать все используемые CSS на странице, одновременно создавая отладку в загрузке или удаляя остальные не нужные стили для текущей страницы.
Hummingbird не только борется с блокирующим рендерингом и неиспользуемым CSS для полностраничной оптимизации, но и работает с оптимизацией вышележащих страниц, устраняя блокирующие данные ресурса с помощью встроенных функций Critical CSS таких как: Delay JavaScript Execution и JavaScript, влияющих на результаты Core Web Vitals на сайтах WordPress.
Как оптимизировать WordPress
Для начала установите плагин с маркетплейса WordPress, достаточно ввести в сторке поиска Hummingbird.
Примечание: Critical CSS — это функция Pro, поэтому убедитесь, что на вашем сайте установлен Hummingbird Pro.
Давайте рассмотрим, как получить максимальную отдачу от использования новой функции Hummingbird Critical CSS. Во-первых, начните с проведения теста производительности.
Обязательно запишите первоначальные результаты, чтобы можно было сравнить их до и после.
Затем перейдите в меню Hummingbird > Оптимизация ресурса > Дополнительная оптимизация и включите Критический CSS.
После включения этой функции появятся различные опции для загрузки критического CSS и для работы с неиспользуемым CSS.
Загрузка Critical CSS
В этом разделе можно выбрать полностраничную оптимизацию CSS (по умолчанию) или оптимизацию CSS над страницами.
Для большинства сайтов мы рекомендуем выбрать стандартную опцию Full-Page CSS Optimization с загрузкой при взаимодействии с пользователем, так как она обеспечивает наилучшие результаты и решает обе задачи — устранение блокирующих рендеринг файлов и сокращение неиспользуемого CSS и аудит при сохранении целостности всех визуальных элементов сайта.
Полностраничная CSS-оптимизация вставляет все используемые CSS и задерживает/отменяет загрузку остальных.
Выбор метода Above-the-Fold CSS Optimization рекомендуется для крупных сайтов с большим количеством сложных CSS, если вариант по умолчанию не дает желаемых результатов. Этот метод позволяет инлайнить весь CSS, расположенный выше страницы, а остальное загружать асинхронно.
Обработка неиспользуемого CSS
Hummingbird предоставляет возможность загружать неиспользуемый CSS при взаимодействии с пользователем для устранения проблем с рендерингом или функцию Remove Unused, которая обрезает неиспользуемый CSS, сохраняя только то, что необходимо, и загружая его в строку, тем самым минифицируя (min).
Кроме того, эту функцию можно отключить для определенных типов постов. Обработка неиспользуемого CSS
Несмотря на то, что переключение типов постов доступно как для метода Full-Page CSS Optimization, так и для метода Above-the-Fold CSS Optimization, только метод Full-Page CSS обрабатывает неиспользуемый CSS. Оба метода оптимизации также предоставляют расширенную возможность добавления пользовательского CSS вручную в разделе <head> страницы (страниц).
После настройки параметров нажмите кнопку «Сохранить изменения». Hummingbird начнет автоматически внедрять Critical CSS в соответствии с вашими настройками.
После появления сообщения о завершении работы зайдите на свой сайт и убедитесь, что на ресурс работает должным образом. Обновите страницу, позвольте кэшу снова сформироваться, а затем запустите еще один тест производительности в Hummingbird, чтобы сравнить результаты до и после.
После применения Critical CSS на сайте в верхней части экрана Extra Optimization появится кнопка «Regenerate Critical CSS».
Нажмите на эту кнопку, чтобы очистить кэш, удалить все локальные или размещенные объекты и автоматически сгенерировать все необходимые элементы для сайта или главной страницы.
Функция Hummingbird Critical CSS совместима со всеми версиями WordPress
Мы провели всестороннее тестирование функции Hummingbird Critical CSS и обнаружили, что она совместима со всеми версиями WordPress, темами, конструкторами страниц, шрифтами, WooCommerce, системами управления обучением (LMS) и т.д.
Однако важно отметить, что установка на сайт плохо проработанных тем или плагинов, содержащих CSS с недопустимым кодом или недопустимыми строками, может вызвать проблемы и привести к появлению сообщения об ошибке Critical CSS. Функция Hummingbird Critical CSS совместима со всеми версиями WordPress
Если при использовании Critical CSS возникают ошибки, попробуйте сделать следующее:
- Нажмите на кнопку «Regenerate Critical CSS» и посмотрите, устранит ли это проблему.
- Если вы снова получите ту же ошибку, мы советуем сменить тему (если у вас есть стенд для сайта используйте его для проверки) и запустить Critical CSS на новой теме. Если проблем не возникнет, то проблема, скорее всего, связана с темой.
- Если проблемы возникли после установки другой темы, мы рекомендуем проверить работу плагинов.
- Если после выполнения всех вышеперечисленных действий ошибка не исчезла, запишите сообщение об ошибке, временно отключите Critical CSS на своем сайте и свяжитесь с нашей службой поддержки для получения помощи в устранении проблемы.
- Однако вы можете быть спокойны, поскольку функция Critical CSS в Hummingbird была разработана с целью сохранения визуальной целостности сайта при одновременном повышении его производительности. Функция хорошо справляется с ошибками и редко нарушает работу сайта, даже в случае возникновения неполадок.
Дополнительную информацию об использовании функции Critical CSS можно найти в документации к плагину.
Используйте все функции оптимизации Hummingbird
Если для вас важна максимальная скорость и производительность вашего WordPress, то использование функции Hummingbird’s Critical CSS — это именно та функция, которой не стоит пренебрегать.
Для достижения максимальной производительности и экономии мы рекомендуем использовать Critical CSS с кэшированием страниц и всеми доступными функциями оптимизации параметров, включая CDN и Delay JavaScript Execution.
В большинстве случаев сочетание всех возможностей оптимизации Hummingbird должно помочь вашему сайту достичь оценки PageSpeed на уровне 90+ или приблизить ее к идеальной 100, если ваш сайт уже работает хорошо.
