Отложенная загрузка стилей и встраивание критического CSS

Улучшить и ускорить отображение страницы сайта поможет отложенная загрузка стилей и встраивание критического CSS. По умолчанию браузер загружает все файлы стиля сразу и визуализация контента происходит с задержкой. Тестируя сайт инструментом PageSpeed Insights, мы получаем рекомендацию от Google: удалить ненужные правила из таблиц стилей и отложить загрузку кода CSS, который не используется в верхней части страницы.

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

1. Отложенная загрузка блокирующих стилей.

Отложенная загрузка блокирующих стилей осуществляется заменой rel=«stylesheet» на rel=«preload». Сделать это можно вручную или с помощью LoadCSS. Содержимое тега <link> будет выглядеть таким образом:

<link rel="preload" href="style.css" as="style" onload="this.rel='stylesheet'" media="all">
<link rel="preload" href="font-awesome.min.css" as="style" onload="this.rel='stylesheet'" media="all">

Preload (предварительная загрузка) — это новый веб-стандарт, направленный на повышение эффективности и обеспечение детального контроля загрузки сайта. Кроме того, есть и другие директивы (prefetch, subresource, prerender) помогающие веб-разработчикам регулировать те или иные процессы.

Иными словами, с помощью preload мы отложим загрузку некоторых ресурсов. Браузер загрузит все таблицы в фоновом режиме, что не повлияет на рендеринг. Атрибут as укажет браузеру, какой тип файла он будет обрабатывать. Возможные значения as: style, script, font, embed, image и т.д.

После того, как страница полностью загрузится сообщим браузеру, что теперь он может отобразить на экране все отложенные стили (шрифт, скрипт и т.д.), для этого в тег <link> добавим событие Onload.

Чтобы добавить rel=«preload» на сайт WordPress без плагина, вставьте этот код в файл functions.php.

/**
 * Added preload for styles
 */
function add_rel_preload($html, $handle, $href, $media) {
	if (is_admin())
		return $html;

	$html = <<<EOT
		<link rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'" id="$handle" href="$href" media="all">
	EOT;
	return $html;
}

add_filter( 'style_loader_tag', 'add_rel_preload', 10, 4 );

Обратите внимание, что в день написания этой статьи, предварительная загрузка (preload) не работает в браузерах Firefox и Safari. Выходом из этой ситуации может стать загрузка стилей в двух вариантах атрибута rel — с preload и stylesheet. Пример:

<link rel="preload" href="style.css" as="style">
<link rel="stylesheet" href="style.css">

В WordPress дополнительный тег <link> надо добавить в файл header.php после тега <head> вручную или подключив нижеуказанный код в functions.php.

/**
 * Added styles for browsers that don't support preload
 */ 
function wp_head_extra_code() {
	echo 
		'<link rel="stylesheet" href="' . get_template_directory_uri() . '/style.css">'
	;
}
add_action('wp_head', 'wp_head_extra_code');

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

Критические стили необходимы для ускорения отрисовки страницы при ее загрузке в браузере.

2. Генерация критического стиля.

Переходим на страницу бесплатного генератора. Вводим URL своего сайта и ждем генерации критического CSS. В результате мы получим вот такой текст, который необходимо будет скопировать.

Отложенная загрузка стилей и встраивание критического CSS

Данный способ генерации может сделать неправильными относительные пути (Url) файлов. Поэтому скопируйте код в текстовый блокнот и поправьте все ссылки. Для многостраничных сайтов воспользуйтесь платным инструментом criticalcss.com. Если разрабатываете сайт с нуля, то проще всего автоматизировать процесс в Gulp пакетом Critical.

3. Встраивание критического CSS в <head>.

После того, как критический CSS готов просто вставьте его в <head>. Обратите внимание, что код должен быть обрамлён тегом <style></style>.

Для WordPress применим такой код:

/**
 * Adding critical CSS
 */
function critical_css() {
    ?>
           <style>/*Insert CSS*/</style>
    <?php
}
add_action('wp_head', 'critical_css');

Также в WordPress есть несколько плагинов для осуществления отложенной загрузки стилей и автоматического создания критического CSS. Например: Autoptimize, Fast Velocity Minify, WP Critical CSS, WP Rocket ASYNC CSS или премиальный плагин WP Rocket.

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

наверх

Пожалуйста, докажите, что вы человек, выбрав ключ.