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.

/** * Added preload for styles */ function add_rel_preload($html, $handle, $href, $media) < if (is_admin()) return $html; $html = EOT; return $html; > add_filter( 'style_loader_tag', 'add_rel_preload', 10, 4 );

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

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

/** * Added styles for browsers that don't support preload */ function wp_head_extra_code() < echo '' ; > add_action('wp_head', 'wp_head_extra_code');

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

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

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

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

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

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

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

Для WordPress применим функцию:

/** * Adding critical CSS */ function critical_css() < ?> add_action('wp_head', 'critical_css');

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

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

Источник

Самый простой способ реализации асинхронной загрузки CSS

Загружать CSS так, чтобы не задерживать рендеринг страниц – один из эффективных способов повысить производительность веб-страниц. В этой статье я опишу лучший способ реализации асинхронной загрузки.

Код

Зная, как браузер обрабатывает различные атрибуты тега link , мы можем добиться асинхронной загрузки CSS с помощью короткой строки HTML-кода:

Разбираемся…

Атрибуту media элемента link присвоено значение print . Оно указывает применять стили подключенного CSS-файла, когда пользователь хочет распечатать веб-страницу.

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

Также необходимо, чтобы CSS-код применялся к версии файла, отображаемой на экране. Для этого можно использовать атрибут onload , чтобы установить атрибут media в значение all после окончания загрузки.

Разве rel=preload не может сделать то же самое?

Последние несколько лет мы использовали link[rel=preload] вместо rel=stylesheet , чтобы реализовать переключение атрибута rel после загрузки вместо атрибута media .

Но этот метод имеет несколько недостатков, которые необходимо учитывать при использовании preload . Не все браузеры поддерживают . Поэтому для извлечения и применения CSS в разных браузерах нужно использовать полифилл. Такой, как используется в loadCSS .

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

Но если необходимо высокоприоритетное извлечение, которое обеспечивает rel=preload , его можно объединить с кодом, который мы рассмотрели ранее:

Этот код прост и понятен, поэтому мы предпочитаем использовать его вместо полифила.

Почему не стоит использовать атрибут media?

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

loadCSS может не понадобиться…

Мы продолжаем поддерживать loadCSS и считаем его полезным в некоторых ситуациях. Особенно для программного извлечения CSS-файла из Java Script. Например: loadCSS(«/path/to/my.css») . Если вы уже используете loadCSS или шаблон его полифилла rel=preload , не нужно ничего менять. Он использует ту же технику, которая была описана в этой статье.

Ангелина Писанюк автор-переводчик статьи « The Simplest Way to Load CSS Asynchronously »

Пожалуйста, оставьте свои комментарии по текущей теме статьи. За комментарии, отклики, дизлайки, подписки, лайки низкий вам поклон!

Источник

Отложенная загрузка 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 файлы все равно будут загружены.

Источник