Как отложить загрузку CSS
Отложенная загрузка стилей и встраивание критического CSS
Улучшить и ускорить отображение страницы сайта поможет отложенная загрузка стилей и встраивание критического CSS. По умолчанию браузер загружает все файлы стиля сразу и визуализация контента происходит с задержкой. Тестируя сайт инструментом PageSpeed Insights, мы получаем рекомендацию от Google: удалить ненужные правила из таблиц стилей и отложить загрузку кода CSS, который не используется в верхней части страницы.
Как известно, высокая производительность загрузки сайта снижает количество отказов. Эти три шага оптимизации рендеринга, помогут решить проблему с замедленным отображением контента.
1. Отложенная загрузка блокирующих стилей.
Отложенная загрузка блокирующих стилей осуществляется заменой rel=«stylesheet» на rel=«preload». Сделать это можно вручную или с помощью LoadCSS. Содержимое тега
будет выглядеть таким образом:
Preload (предварительная загрузка) — это новый веб-стандарт, направленный на повышение эффективности и обеспечение детального контроля загрузки сайта. Кроме того, есть и другие директивы (prefetch, subresource, prerender) помогающие веб-разработчикам регулировать те или иные процессы.
Иными словами, с помощью preload мы отложим загрузку некоторых ресурсов. Браузер загрузит все таблицы в фоновом режиме, что не повлияет на рендеринг. Атрибут as укажет браузеру, какой тип файла он будет обрабатывать. Возможные значения as: style, script, font, embed, image и т.д.
После того, как страница полностью загрузится сообщим браузеру, что теперь он может отобразить на экране все отложенные стили (шрифт, скрипт и т.д.), для этого в тег
добавим событие Onload.
Чтобы добавить rel=«preload» на сайт WordPress без плагина, вставьте этот код в файл functions.php.
Обратите внимание, что в день написания этой статьи, предварительная загрузка (preload) не работает в браузерах Firefox и Safari. Выходом из этой ситуации может стать загрузка стилей в двух вариантах атрибута rel — с preload и stylesheet. Пример:
В WordPress дополнительный тег
надо добавить в файл header.php после тега вручную или подключив нижеуказанный код в functions.php.
На самом деле все эти шаги оптимизации взаимосвязаны, так как выполнив первый шаг, страницы сайта могут выглядеть без стилей. Поэтому вы пока не добавляйте preload без создания критического CSS.
Критические стили необходимы для ускорения отрисовки страницы при ее загрузке в браузере.
2. Генерация критического стиля.
Переходим на страницу бесплатного генератора. Вводим URL своего сайта и ждем генерации критического CSS. В результате мы получим вот такой текст, который необходимо будет скопировать.
Данный способ генерации может сделать неправильными относительные пути (Url) файлов. Поэтому скопируйте код в текстовый блокнот и поправьте все ссылки. Для многостраничных сайтов воспользуйтесь платным инструментом criticalcss.com. Если разрабатываете сайт с нуля, то проще всего автоматизировать процесс в Gulp пакетом Critical.
3. Встраивание критического CSS в .
После того, как критический CSS готов просто вставьте его в . Обратите внимание, что код должен быть обрамлён тегом .
Для WordPress применим такой код:
Также в WordPress есть несколько плагинов для осуществления отложенной загрузки стилей и автоматического создания критического CSS. Например: Autoptimize, Fast Velocity Minify, WP Critical CSS, WP Rocket ASYNC CSS или премиальный плагин WP Rocket.
И в заключение надо сказать, что отложенная загрузка стилей и встраивание критического CSS не улучшает время загрузки страницы, но имеет огромное значение для того, как пользователь воспримет загруженную страницу.
Современная асинхронная загрузка CSS
Дата публикации: 2017-12-28
От автора: как произвести асинхронную загрузку файлов CSS без использования JS. Использование атрибута media и веб-стандарта preload — об этом в статье.
Самый простой способ загрузить CSS файл в HTML – сделать это через тег link и rel=»stylesheet»:
Отличный способ, но у него есть свой недостаток: он синхронный. Другими словами, браузер останавливает рендер всего, что расположено под строкой подключения файла, до тех пор, пока файл не будет распарсен. Иногда это необходимо, если мы не хотим, чтобы браузер рендерил страницу до загрузки CSS. Но не все файлы CSS критичны настолько, чтобы задерживать доступ к контенту. Именно поэтому нам нужна асинхронная загрузка CSS, мы настоятельно рекомендуем устанавливать приоритеты и оптимизировать файлы для быстрой и надежной доставки.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Чтобы некритичные CSS файлы не блокировали рендер страницы, их нужно загружать асинхронно.
Способы асинхронной загрузки CSS
Существует несколько способов заставить браузер асинхронно загружать CSS, и все они довольно сложные.
Один из способов (работает в современных браузерах) – с помощью JS создавать и вставлять ссылки на стили в DOM:
Последняя строка великолепна!
Еще один способ – установить атрибут media в теге link в медиа тип (или запрос), который не совпадает с браузером пользователя. Например, media=»print» или вообще что-то нераспознаваемое типа media=»nope!». Стили неприменимых медиа браузеры ставят в низший приоритет и загружают их, не блокируя рендер страницы. Хорошо, но чтобы отобразить их после загрузки, нам необходимо с помощью JS обработчика события onload менять значение media на значение, совпадающее с браузером пользователя, например, screen или all:
Заметка: мы используем комбинацию трюков, описанных выше, в нашей библиотеке loadCSS.js для асинхронной загрузки CSS. Также там есть хаки для старых, но все еще действующих браузеров, которые не поддерживают события onload на элементах link.
Как и в методе переключения медиа, мы можем асинхронно загружать CSS, если пометим link, как alternate стили (предлагают альтернативные представления сайта), и затем с помощью JS переключим атрибут rel обратно в stylesheet после загрузки файла:
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Методы выше работают, но у них у всех есть недостаток – все они используют JS (не говоря уже, что нужно знать нюансы поведения браузеров), достигая желаемого эффекта не прямым способом…
Современный подход
К счастью, сейчас есть веб-стандарт, спроектированный специально для асинхронной загрузки ресурсов типа CSS — rel=»preload». Наконец-то мы можем асинхронно загружать CSS без JS! Шучу. Может, это вас удивит, но даже этот метод использует обработчик события onload. Но это наш лучший вариант.
Пример асинхронной загрузки и применения CSS через rel=»preload» (в браузере с поддержкой):
Как и методы с переключением атрибута, rel=»preload» заставляет браузеры с поддержкой загружать, но не применять файлы. Поэтому нам нужен обработчик события onload для установки rel в значение stylesheet. Возможно, вы не видите сильных улучшений по сравнению с другими методами, однако rel=»preload» заставляет браузеры загружать файл раньше, чем, например, в способе с несовпадающим медиа типом.
Использование rel=preload вместе с loadCSS
Поддержка браузерами rel=»preload» составляет… ну, в общем, хотя бы Chrome поддерживает. Другие основные браузеры тоже в скором времени будут поддерживать это значение. В Firefox 56 уже есть поддержка, но там очень много багов (preload работает только для файлов, которые явно считаются кэшируемыми), поэтому в Firefox 57 эту функцию отключили (поддержка вернется в Firefox 59).
Отложенная загрузка CSS
Если вы серьезно относитесь к ускорению вашего сайта, и для работы ваших веб-страниц требуются большие CSS скрипты, то для оптимизации доставки CSS пользователю вам придется использовать технику отложенной загрузки CSS файлов. Отложенная загрузка позволяет загрузить файлы CSS после того, как ваша веб-страница (DOM) полностью сформирована.
Какие файлы CSS нужно загружать в отложенном режиме?
Вы должны отложить загрузку всех CSS файлов, которые блокируют отображение вашей страницы. Чтобы увидеть, какие файлы блокируют рендеринг, вы можете проверить свой сайт при помощи специальных сервисов, например, https://www.giftofspeed.com/.
Как определить, какую часть CSS скрипта следует перевести в отложенную загрузку?
Прежде чем вы решите воспользоваться отложенной загрузкой CSS скриптов, вы должны разобраться в том, как оптимизировать доставку CSS. После извлечения критического для рендеринга CSS у вас должен остаться CSS скрипт меньших размеров. Вставьте этот CSS скрипт в заголовок вашей веб-страницы и отложите загрузку оставшейся части оригинального CSS скрипта.
При составлении плана любых работ серьезную помощь может оказать составление алгоритма действий. Сделать это помогут онлайн-сервисы для создания блок-схем алгоритмов и диаграмм. Блок-схема алгоритмов наглядно покажет с чего начать и как оптимизировать свою работу.
Не переводите в отложенную загрузку небольшие скрипты CSS
Не стоит беспокоиться об отложенной загрузке, когда дело доходит до небольших скриптов CSS. Гораздо больший выигрыш в скорости вам даст перенос таких стилей в код самой HTML страницы.
Отложенная загрузка должна применяться только с большими CSS
Когда дело касается скорости загрузки страниц, отложенная загрузка наиболее полезна, когда приходится загружать большие файлы CSS. Однако отложенная загрузка всех CSS может пагубно сказаться на первом впечатлении пользователя. Потому что в этом случае при первом просмотре ваши посетители (особенно те, у кого медленное подключение к Интернету или которые используют мобильные устройства) вместо сайта могут увидеть пустую страницу, либо ее стиль будет ужасным. Причина этого заключается в том, что CSS еще не загружен. Вот поэтому применять отложенную загрузку для всех файлов CSS является не лучшим вариантом. Как было сказано выше, одним из способов решить эту проблему, может стать выделение тех стилей CSS, которые критичны для начального просмотра страницы. Выяснив это, вы должны вставить эти CSS стили в заголовок HTML, а оставшуюся часть вашего CSS перевести в режим отложенной загрузки.
Как сделать отложенную загрузку CSS при помощи небольшой программы Javascript
Для отложенной и асинхронной загрузки Javascript файлов есть особые HTML-инструменты, а именно атрибуты defer и async тега script. К сожалению, эти атрибуты не работают с CSS файлами. Но не стоит переживать, нам на помощь придет следующий код Javascript. Он позволяет осуществить отложенную загрузку любого файла CSS:
Вставьте этот скрипт в HTML код вашей страницы (лучше всего в футер) и замените строку “../css/yourcssfile.css” на путь к CSS файлу, загрузку которого вы хотите отложить. Если отложенная загрузка применяется только к одному файлу, то удалите секцию, относящуюся к файлу CSS #2. Если же вам нужно сделать отложенную загрузку более чем для двух файлов, то скопируйте секцию для CSS #2 и вставьте ее столько раз, сколько файлов вам нужно загрузить. При этом не забудьте заменить цифру 2 в именах переменных так, чтобы сделать их уникальными.
Обязательно в HTML теге head вставьте следующий код:
Это нужно на тот случай, если устройство или браузер пользователя не поддерживает Javascript. При этом CSS файлы все равно будут загружены.
Источники:
http://webkato.ru/otlozhennaja-zagruzka-stilej-i-vstraivanie-kriticheskogo-css/
http://webformyself.com/sovremennaya-asinxronnaya-zagruzka-css/
http://msiter.ru/articles/otlozhennaya-zagruzka-css
