Missed the action at this year's Chrome Dev Summit? Catch up with our playlist on YouTube. Watch now.

Оптимизация CSS

Когда браузер находит в документе ссылку на CSS-файл, он приостанавливает процесс визуализации и начинает формировать модель CSSOM. Чтобы ускорить процесс, упрощайте CSS и используйте медиазапросы. Также убедитесь, что браузер может быстро скачать CSS-файлы.

Из прошлой статьи мы узнали, что для создания модели визуализации необходимы модели DOM и CSSOM. Поэтому мы можем сделать следующий вывод: и HTML, и CSS замедляют вывод страницы. HTML-документ нужно обработать для создания модели DOM, без которой на странице не будет контента. А что дает обработка CSS, можно увидеть на иллюстрации ниже.

TL;DR

  • По умолчанию при обработке CSS визуализация страницы блокируется.
  • С помощью медиазапросов обработку некоторых CSS-файлов можно отложить.
  • Браузер скачивает все CSS-файлы (как с медиазапросами, так и без них).
Нью-Йорк таймс с CSS
"Нью-Йорк таймс" с CSS
Нью-Йорк таймс без CS
"Нью-Йорк таймс" без 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-файлы независимо от того, блокируют они вывод или нет. Приоритет скачивания выше у тех файлов, без которых вывод страницы невозможен.