Современная асинхронная загрузка CSS
Самый простой способ загрузить CSS в HTML-документ заключается в использовании тега link и атрибута rel=»stylesheet»:
Но есть и обратная сторона медали: это происходит синхронно. Другими словами, браузер останавливает рендеринг остальных частей страницы в процессе запроса, загрузки и парсинга файла. Это необходимо, чтобы браузер не начал отображать содержимое веб-страницы до того, как загрузится CSS. Но не все стили настолько критичны, чтобы задерживать доступ к контенту. Для этого необходимо загружать некритичные CSS файлы асинхронно, без блокировки рендеринга страницы.
Способы асинхронной загрузки CSS
Существует несколько способов заставить браузер загружать CSS асинхронно.
Первый способ (работает в современных браузерах) заключается в использовании JavaScript для создания и вставки ссылки на файл CSS в DOM:
// Создаем ссылку на таблицу стилей var myCSS = document.createElement( "link" ); myCSS.rel = "stylesheet"; myCSS.href = "mystyles.css"; // вставляем ее в конце блока head document.head.insertBefore( myCSS, document.head.childNodes[ document.head.childNodes.length - 1 ].nextSibling );
Второй способ заключается в том, чтобы задать атрибуту media в теге link значение, которое не соответствует устройству пользователя. Например, media=»print».
В результате браузеры будут воспринимать стили для неиспользуемых устройств как низкоприоритетные. Поэтому они будут загружать стили, не блокируя рендеринг страницы.
Но чтобы задействовать асинхронно загруженные стили, нужно использовать JavaScript-обработчик события onload. Это позволит изменить значение media на соответствующее браузеру и устройству пользователя. Например, screen или all:
Примечание: мы используем комбинацию перечисленных выше приемов в библиотеке loadCSS.js, предназначенной для обработки асинхронной загрузки CSS. А также обходные пути для устаревших версий браузеров, которые не поддерживают события onload в элементах link.
Также можно загружать CSS асинхронно, используя значение rel=»alternate stylesheet». Оно используется для того, чтобы предложить пользователю альтернативное представление сайта:
Методы, описанные выше, работают. Но у них есть один общий недостаток: они используют JavaScript.
Современный метод
Существует решение, созданное специально для асинхронной загрузки CSS файлов: rel=»preload». Но даже этот вариант использует обработчик события onload.
Ниже приведен использования rel=»preload»:
Значение атрибута rel=»preload» заставляет браузеры (которые его поддерживают) загружать, но не применять указанный файл. Поэтому необходим обработчик события onload, чтобы установить атрибут rel в значение stylesheet после загрузки.
Вариант с rel=»preload» имеет одно важное преимущество: браузеры начнут загружать CSS раньше, чем при использовании подхода с несоответствующим значением атрибута media.
Использование rel=preload c loadCSS
Поддержка rel=»preload» браузерами, ну… спасибо, что хотя бы Google Chrome его поддерживает. Другие популярные браузеры находятся на пути к этому.
Но мы можем обеспечить поддержку rel = ‘preload’ с помощью полифиллов. Проект loadCSS предлагает скрипт cssrelpreload.js, который заставляет rel=»preload» работать в браузерах, которые не поддерживают его по умолчанию.
loadCSS можно найти на Github и NPM.
Ангелина Писанюк автор-переводчик статьи « Modern Asynchronous CSS Loading »
Отложенная загрузка 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 файлы все равно будут загружены.
Lazy loading
Lazy loading (ленивая загрузка) — это стратегия, направленная на определение ресурсов как неблокирующих (не критических) для того, чтобы отложить загрузку этих ресурсов на тот момент, когда они действительно необходимы. Так можно сократить длину критических этапов рендеринга, что приводит к уменьшению времени загрузки приложения.
Ленивая загрузка может происходить в разные моменты работы приложения, но, как правило, она запускается во время взаимодействия пользователя и системы, например, при скроллинге или навигации.
Обзор
Вместе с ростом web-приложений драматически вырос объем и размеры ресурсов, отправляемых клиентскому приложению. С 2011 по 2019 медианный рост размеров ресурсов вырос с ~100KB до ~400KB для настольных компьютеров и с ~50KB до ~350KB для мобильных. А размер изображений вырос с ~250KB до ~900KB для настольных компьютеров и со ~100KB до ~850KB для мобильных.
Очевидно, что такое повышение объёмов способствует увеличению длительности загрузки приложения. Один из способов её сократить — это отложить загрузку ресурсов, которые не являются критически важными для приложения. Например, вы посещаете приложение интернет-магазина, которое состоит из списка товаров и корзины. Очевидно, что вам не нужны изображения товаров, которые сейчас находится за пределами экрана; очевидно так же, что вам не нужно грузить все данные о содержимом корзины до тех пор, пока пользователь не перешёл к ней.
Стратегии
Ленивая загрузка (Lazy loading) может применяться к разным ресурсам и разными подходами.
Общий подход
Разделение кода (code splitting) JavaScript, CSS и HTML могут быть разделены на небольшие части, называемые чанками (chunks). При первоначальной загрузке приложения вы можете отправлять не цельное приложение, а только необходимые части, например, только каркас разметки. Данные для заполнения этого каркаса могут быть подгружены позже, например, с помощью AJAX. Есть два вида разделения кода:
- Разделение по точкам входа (entrypoint)
- Динамическое (dynamic import())
JavaScript
Указание типа «module» Любой тег скрипта с type=»module» рассматривается как JavaScript module, а его загрузка откладывается по умолчанию.
CSS
По умолчанию CSS считается ресурсом, блокирующим рендеринг (render blocking). Это означает, что браузер не будет отображать контент до тех пор, пока не будет построена объектная модель CSS (CSSOM). Поэтому CSS-файл должен быть небольшим, чтобы он был доставлен так быстро, насколько это возможно. Рекомендуется использовать медиавыражения, для того чтобы вместо одного монолитного CSS-файла грузить специализированные.
Также в целях ускорения CSS можно применять оптимизации (CSS optimizations (en-US) ).
Шрифты
По умолчанию, загрузка шрифтов откладывается на тот момент, пока дерево рендера (render tree) не сформировано полностью. Это приводит к тому, что текст страницы может появиться не сразу.
Вы можете переопределить такое поведение и загрузить шрифты заранее, используя , CSS font-display свойство или Font Loading API (en-US) .
Изображения
Очень часто веб-страницы содержат множество изображений, загрузка которых заметно нагружает канал передачи данных и увеличивает длительность загрузки. Подавляющая часть этих изображений находятся за видимой областью экрана и не являются необходимым (non-critical), а для взаимодействия с пользователем требуют действия (например, прокрутки до них).
Атрибут Loading Атрибут loading элемента (или loading (en-US) атрибут для (en-US)) могут быть использованы, чтобы указать браузеру на необходимость отложить загрузку изображений / iframe до тех пор, пока пользователь не доскроллит до них.
Событие load запускается, когда все другие необходимые ресурсы были загружены. В это время, возможно (или даже наиболее вероятно), что изображения не будут загружены, даже если пользователь доскроллит до изображений и они будут в visual viewport (en-US).
Вы можете определить, было ли загружено то или иное изображение, проверив Boolean значение complete (en-US).
Полифил Для использованиях в браузерах, которые не поддерживают данную технологию, рекомендуется использовать полифил: loading-attribute-polyfill
Intersection Observer API Intersection Observers позволяют вам узнать, как наблюдаемый вами элемент входит или выходит из зоны видимости браузера (viewport).
Обработчики событий (Event handlers) Intersection Observer API — относительно молодая технология, которая может не поддерживаться некоторыми устаревшими браузерами. Если поддержка браузеров важна для вас, есть несколько способов получить её:
- polyfill intersection observer
- вы можете вычислять, находится ли элемент во viewport каждый раз при срабатывании событий scroll, resize или orientation change.
Смотрите также
- Render blocking CSS
- Optimizing loading and rendering
- Lazy loading images and video
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 3 авг. 2023 г. by MDN contributors.
Как отложить загрузку css
Самый простой способ загрузить CSS в HTML-документ заключается в использовании тега link и атрибута rel=»stylesheet»:
Но есть и обратная сторона медали: это происходит синхронно. Другими словами, браузер останавливает рендеринг остальных частей страницы в процессе запроса, загрузки и парсинга файла. Это необходимо, чтобы браузер не начал отображать содержимое веб-страницы до того, как загрузится CSS. Но не все стили настолько критичны, чтобы задерживать доступ к контенту. Для этого необходимо загружать некритичные CSS файлы асинхронно, без блокировки рендеринга страницы.
Способы асинхронной загрузки CSS
Существует несколько способов заставить браузер загружать CSS асинхронно.
Первый способ (работает в современных браузерах) заключается в использовании JavaScript для создания и вставки ссылки на файл CSS в DOM:
Второй способ заключается в том, чтобы задать атрибуту media в теге link значение, которое не соответствует устройству пользователя. Например, media=»print».
В результате браузеры будут воспринимать стили для неиспользуемых устройств как низкоприоритетные. Поэтому они будут загружать стили, не блокируя рендеринг страницы.
Но чтобы задействовать асинхронно загруженные стили, нужно использовать JavaScript-обработчик события onload. Это позволит изменить значение media на соответствующее браузеру и устройству пользователя. Например, screen или all:
Примечание: мы используем комбинацию перечисленных выше приемов в библиотеке loadCSS.js, предназначенной для обработки асинхронной загрузки CSS. А также обходные пути для устаревших версий браузеров, которые не поддерживают события onload в элементах link.
Также можно загружать CSS асинхронно, используя значение rel=»alternate stylesheet». Оно используется для того, чтобы предложить пользователю альтернативное представление сайта:
Методы, описанные выше, работают. Но у них есть один общий недостаток: они используют JavaScript.
Современный метод
Существует решение, созданное специально для асинхронной загрузки CSS файлов: rel=»preload» . Но даже этот вариант использует обработчик события onload.
Ниже приведен использования rel=»preload»:
Значение атрибута rel=»preload» заставляет браузеры (которые его поддерживают) загружать, но не применять указанный файл. Поэтому необходим обработчик события onload, чтобы установить атрибут rel в значение stylesheet после загрузки.
Вариант с rel=»preload» имеет одно важное преимущество: браузеры начнут загружать CSS раньше, чем при использовании подхода с несоответствующим значением атрибута media.
Использование rel=preload c loadCSS
Поддержка rel=»preload» браузерами , ну… спасибо, что хотя бы Google Chrome его поддерживает. Другие популярные браузеры находятся на пути к этому.
Но мы можем обеспечить поддержку rel = ‘preload’ с помощью полифиллов. Проект loadCSS предлагает скрипт cssrelpreload.js , который заставляет rel=»preload» работать в браузерах, которые не поддерживают его по умолчанию.
Пошаговое руководство по использованию cssrelpreload.js можно найти в readme проекта . Ниже приведен пример применения скрипта:
loadCSS можно найти на Github и NPM .
Дайте знать, что вы думаете по данной теме статьи в комментариях. За комментарии, подписки, дизлайки, отклики, лайки низкий вам поклон!
Отложенная загрузка 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 файлы все равно будут загружены.
How to load CSS Asynchronously
I’m trying to eliminate 2 CSS files that are render blocking on my site — they appear on Google Page Speed Insights. I have followed different methods, none of which were a success. But, recently, I found a post about Thinking Async and when I applied this code: it did eliminate the problem.
However, after publishing, the page lost the styling. I’m not too sure as to what is going on because the code works but it’s the styling after upload that doesn’t work. Would appreciate your help with this. Thanks
11 Answers 11
Help us improve our answers.
Are the answers below sorted in a way that puts the best answer at or near the top?
2020 Update
The simple answer (full browser support):
The documented answer (with optional preloading and script-disabled fallback):
Preloading and async combined:
If you need preloaded and async CSS, this solution simply combines two lines from the documented answer above, making it slightly cleaner. But this won’t work in Firefox until they support the preload keyword. And again, as detailed in the documented answer above, preloading may not actually be beneficial.
Additional considerations:
Note that, in general, if you’re going to load CSS asynchronously, it’s generally recommended that you inline critical CSS, since CSS is a render-blocking resource for a reason.
Credit to filament group for their many async CSS solutions.
This approach may not work with content security policy enabled.
Using media=»print» and onload
The filament group recently (July 2019) published an article giving their latest recommendation for how to load CSS asynchronously. Even though they are the developers of the popular Javascript library loadCSS, they actually recommend this solution that does not require a Javascript library:
Using media=»print» will indicate to the browser not to use this stylesheet on screens, but on print. Browsers actually do download these print stylesheets, but asynchronously, which is what we want. We also want the stylesheet to be used once it is downloaded, and for that we set onload=»this.media=’all’; this.onload = null» . (Some browser will call onload twice, to work around that, we need to set this.onload = null .) If you want, you can add a fallback for the rare users who don’t have Javascript enabled.
The original article is worth a read, as it goes into more detail than I am here. This article on csswizardry.com is also worth a read.
The trick to triggering an asynchronous stylesheet download is to use a element and set an invalid value for the media attribute (I’m using media=»none», but any value will do). When a media query evaluates to false, the browser will still download the stylesheet, but it won’t wait for the content to be available before rendering the page.
Once the stylesheet has finished downloading the media attribute must be set to a valid value so the style rules will be applied to the document. The onload event is used to switch the media property to all:
This method of loading CSS will deliver useable content to visitors much quicker than the standard approach. Critical CSS can still be served with the usual blocking approach (or you can inline it for ultimate performance) and non-critical styles can be progressively downloaded and applied later in the parsing / rendering process.
This technique uses JavaScript, but you can cater for non-JavaScript browsers by wrapping the equivalent blocking elements in a element:
Как реализовать асинхронную загрузку CSS специально для PageSpeed Insights?
350 кбайт + 400 кбайт CSS от fancybox, semantic и десятка других фреймворков/непонятно чего. В общем, минифицированные и конкатенированные CSS весят >700 кбайт.
Результаты PageSpeed на данный момент 63 — мобильная и 79 — десктопная версия сайта. Рекомендовано «оптимизировать» и «избежать блокировки» css-файлами при загрузке страницы.
Первое, что было сделано — использование uncss, что в три раза снизило «вес», однако PageSpeed не придал этому значения. Так же был использован популярный метод динамической загрузки css через манипуляции с аттрибутом media:
Похожие публикации:
- Как выровнять текст по центру css
- Как двигать блоки в css
- Как убрать обводку у select css
- Как убрать подчеркивание ссылки в css