• Главная
• Новости
• Hummingbird – оптимизирует скорость, включает кэширование, сокращает CSS на сайте WordPress

Сделайте сайты WordPress загружаемыми быстрее, чем когда-либо, с помощью Нового CSS Hummingbird Critical

Благодаря долгожданной функции Critical CSS от Hummingbird вы можете рассчитывать на более быструю загрузку страниц и более высокую производительность сайтов WordPress. Вот почему ресурсы, блокирующие рендеринг, остались в прошлом…

Если вы заботитесь о скорости загрузки страницы (а вы должны это делать, если хотите, чтобы посетители оставались на вашем сайте дольше двух секунд), то жизненно важно понимать, как CSS влияет на производительность сайта и как ускорить время загрузки страницы с помощью задачи оптимизации, известной как Critical CSS.

Что такое Critical CSS и как он повышает производительность?

Когда пользователи заходят на веб-сайт, все, что они могут видеть изначально, - это содержимое, отображаемое на их экране перед прокруткой.

Эта область называется “above the fold”.

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

Поскольку все, что видит посетитель, попадая на страницу, - это содержимое above the fold, прежде чем начать прокрутку вниз, имеет смысл сделать так, чтобы содержимое above the fold загружалось как можно быстрее, прежде чем загружать остальную часть страницы.

Critical CSS (также известный как Critical Path CSS или Critical CSS Rendering Path) - это метод, который извлекает минимальный CSS, необходимый для максимально быстрого отображения контента пользователем.

В то время как пользователь, просматривающий описанный выше контент, считает, что страница загружается быстро, остальная часть CSS может загружаться, и на пользовательский интерфейс это не влияет.

Такие методы, как отложенная загрузка изображений, задержка выполнения JavaScript и critical CSS - это способы оптимизировать последовательность шагов, выполняемых браузером для преобразования HTML, CSS и JavaScript в пиксели на экране.

Эта последовательность называется Критическим путем рендеринга (CRP) и включает в себя объектную модель документа (DOM), объектную модель CSS (CSSOM), дерево рендеринга и макет.

Оптимизация критического пути рендеринга повышает производительность рендеринга.

Преимущества Critical CSS

Critical CSS может повысить производительность сайта за счет:

• Ускоряет начальный рендеринг
• Улучшенный пользовательский интерфейс
• Улучшает производительность SEO
• Уменьшенный вес страницы
• Упрощенное обслуживание
• Прогрессивное улучшение
• Положительное влияние на основные показатели веб-сайта (особенно на первый контент Paint и индекс скорости)
• Более высокие показатели PageSpeed Insights

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

Внедрение Critical CSS

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

Что теперь? Как вы на самом деле реализуете рекомендации?

Что ж, вы можете попытаться исправить ситуацию вручную (утомительно, отнимает много времени и не рекомендуется), использовать инструменты веб-разработки (если у вас есть технические навыки) или использовать плагин WordPress, такой как Hummingbird, для автоматического выявления, устранения любых проблем.

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

В то время как Critical CSS относится в основном к базовому CSS, Hummingbird может извлекать и встроить весь используемый CSS на страницу, задерживая / удаляя остальные.

Hummingbird не только устраняет блокировку рендеринга и неиспользуемый CSS для полностраничной оптимизации, но и выполняет комплексную оптимизацию, устраняя ресурсы, блокирующие рендеринг, с помощью встроенных функций, таких как Critical CSS (см. Ниже), задерживает выполнение JavaScript для ресурсов JavaScript и других областей, влияющих на основные веб-показатели сайтов WordPress.

Как оптимизировать WordPress с помощью CSS-функции Hummingbird Critical

Примечание: Critical CSS - это профессиональная функция, поэтому убедитесь, что у вас на сайте установлен Hummingbird Pro.

Давайте пройдемся по шагам о том, как получить максимальную выгоду от использования новой функции CSS Hummingbird critical.

Сначала запустите тест производительности.

Обязательно обратите внимание на начальные результаты, чтобы вы могли сравнить результаты до и после.

Далее перейдите в Hummingbird> Оптимизация ресурсов> Дополнительная оптимизация и включите Critical CSS.

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

Загрузка Critical CSS

В этом разделе вы можете выбрать полностраничную оптимизацию CSS (по умолчанию) или оптимизацию CSS надстройкой.

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

Полностраничная CSS-оптимизация объединяет все используемые CSS и задерживает / удаляет загрузку остальных.

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

Обработка неиспользуемого CSS

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

Кроме того, вы можете переключать функцию для определенных типов записей.

Хотя переключение типа публикации доступно как для методов полностраничной оптимизации CSS, так и для надстраничной оптимизации CSS, неиспользуемый CSS обрабатывается только методом полностраничной CSS.

Оба метода оптимизации также предоставляют расширенную возможность добавлять пользовательский CSS вручную в <head> разделы страницы (страниц).

После настройки ваших параметров нажмите Сохранить изменения. Hummingbird автоматически начнет внедрять Critical CSS в соответствии с вашими настройками.

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

Обновите страницу, дайте кешу снова восстановиться, а затем запустите другой тест производительности в Hummingbird, чтобы вы могли сравнить результаты "до" и "после".

Восстановите Critical CSS

После применения Critical CSS на вашем сайте в верхней части экрана дополнительной оптимизации появится кнопка “Восстановить Critical CSS”.

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

Critical CSS от Hummingbird совместим со всем, что связано с WordPress

Мы тщательно протестировали критическую функцию CSS Hummingbird и обнаружили, что она совместима со всеми версиями и темами WordPress, конструкторами страниц, шрифтами, WooCommerce, системами управления обучением (LMS) и т.д.

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

Если при использовании Critical CSS возникают ошибки, попробуйте следующее:

1. Нажмите на кнопку “Восстановить Critical CSS” и посмотрите, устраняет ли это проблему.
2. Если вы снова получите ту же ошибку, мы рекомендуем сменить тему (используйте промежуточный сайт, если ваш сайт находится в режиме реального времени) и запустить Critical CSS в новой теме. Если проблем нет, то проблема, скорее всего, в теме.
3. Если у вас возникли проблемы после установки другой темы, мы рекомендуем устранить неполадки с вашими плагинами.
4. Если ошибка все еще сохраняется после выполнения всех вышеперечисленных действий, обратите внимание на сообщение об ошибке, временно отключите Critical CSS на вашем сайте и обратитесь в нашу службу поддержки за помощью в устранении проблемы.

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