Async CSS
Материал перепечатан чуть более чем полностью отсюда
Оптимизация CSS
Когда браузер находит в документе ссылку на CSS-файл, он приостанавливает процесс визуализации и начинает формировать модель CSSOM. Чтобы ускорить процесс, упрощайте CSS и используйте медиазапросы. Также убедитесь, что браузер может быстро скачать CSS-файлы.
HTML и CSS замедляют вывод страницы. HTML-документ нужно обработать для создания модели DOM, без которой на странице не будет контента. А что дает обработка CSS, можно увидеть на иллюстрации ниже.
TL;DR
- По умолчанию при обработке CSS визуализация страницы блокируется.
- С помощью медиазапросов обработку некоторых CSS-файлов можно отложить.
- Браузер скачивает все CSS-файлы (как с медиазапросами, так и без них).
На иллюстрации изображен сайт газеты Нью-Йорк таймс с CSS и без (эффект на скриншоте справа часто называютпоявлением нестилизованного контента). Как видно, пользоваться страницей без CSS почти невозможно. Чтобы избежать такой ситуации, браузер обрабатывает CSS-файл сразу же, как только находит его в HTML-документе. В результате страница выводится на экран только после того, как браузер создаст обе модели: и DOM, и CSSOM.
Обработка CSS задерживает вывод страницы на экран! Ускорьте процесс визуализации, предоставив браузеру быстрый доступ к CSS-файлу.
А теперь предположим, что в вашем HTML-документе есть ссылки на несколько CSS-файлов, один из которых содержит стиль для печати страницы, а второй - для ее просмотра на большом экране. Поскольку эти стили используются только при определенных условиях, вы можете сообщить об этом браузеру и предотвратить задержку при загрузке страницы.
Для этого добавьте в код медиазапрос:
<link href="style.css" rel="stylesheet">
<link href="print.css" rel="stylesheet" media="print">
<link href="other.css" rel="stylesheet" media="(min-width: 40em)">В медиазапросе указывается тип устройства и, если необходимо, условия запроса. Рассмотрим приведенный выше пример кода. Первому CSS-файлу не присвоен тип устройства, поэтому он будет применяться по умолчанию и, соответственно, задерживать вывод страницы. Второй файл применяется при печати - возможно, с его помощью упрощается макет страницы, меняется шрифт и т. д. На это указывает медиазапрос print, который сообщит браузеру, что данный CSS-файл обрабатывать сразу не нужно. И, наконец, ссылка на третий файл содержит медиазапрос с условием. Только в том случае, если это условие будет выполнено, браузер скачает CSS-файл и приостановит вывод страницы.
Медиазапросы позволяют адаптировать страницу под определенное устройство, например монитор или принтер, и изменять стиль в зависимости от ориентации экрана, его размера и других подобных факторов. Ссылаясь на CSS-файлы, обязательно учитывайте их предназначение! Используйте медиазапросы, чтобы сократить время вывода страницы на экран.
Давайте разберем следующий пример:
<link href="style.css" rel="stylesheet">
<link href="style.css" rel="stylesheet" media="all">
<link href="portrait.css" rel="stylesheet" media="orientation:portrait">
<link href="print.css" rel="stylesheet" media="print">- Первый CSS-файл заблокирует вывод страницы, так как его необходимо обработать.
- Несмотря на медиазапрос, CSS-файл во второй строке также заблокирует вывод страницы. Дело в типе устройства all - браузер присваивает это значение по умолчанию всем CSS-файлам без медиазапроса. Поэтому вторая ссылка в примере эквивалентна первой.
- Третья ссылка содержит медиазапрос с условием, которое будет проверено при загрузке страницы. При портретной ориентации устройства браузер заблокирует вывод страницы и начнет обработку CSS; при альбомной ориентации браузер продолжит создание DOM.
- Четвертый CSS-файл используется только для печати, поэтому браузер не будет блокировать вывод страницы.
Учтите, что под блокировкой подразумевается только приостановка вывода страницы. При этом браузер скачивает все CSS-файлы независимо от того, блокируют они вывод или нет. Приоритет скачивания выше у тех файлов, без которых вывод страницы невозможен.
И еще несколько ссылок: