Простой CSS-трюк для сокращения времени загрузки страницы

Влияние CSS на время загрузки страницы

Загрузка CSS - один из основных факторов, влияющих на время загрузки страницы. Когда приложение встречает файл CSS, оно загружает его в приоритетном порядке. На основе CSS создаются объектные модели CSS (CSSOM). После создания CSSOM он объединяется с деревом DOM для создания «дерева рендеринга». Дерево рендеринга создается, когда дерево DOM объединяется с CSSOM и обеспечивает правильный стиль для всех компонентов на странице.

Чем больше CSS-кода в приложении, тем больше времени уходит на создание CSSOM и его слияние с DOM для создания дерева рендеринга. Как только HTML встречает файл CSS, он ожидает загрузки файла и создания CSSOM. Парсер ожидает завершения этой операции. Поэтому говорят, что CSS блокирует рендеринг.

Используем неблокирующий CSS

Чтобы решить эту проблему, мы можем просто использовать трюк и улучшить производительность приложения. Мы хотим, чтобы браузер не ждал загрузки CSS и создания CSSOM во время начальной загрузки страницы. Мы можем отложить создание CSSOM для некритических файлов CSS. Представим, что у нас есть некоторый CSS, применяемый к определенному элементу, который будет отображаться только после начальной загрузки страницы. Таким образом, нам не нужно заставлять загрузку страницы ждать загрузку и анализ CSS.

	<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">

В приведенном выше коде указано, что значением “media” для CSS является “print”, что означает, что CSS не будет применяться изначально и будет применен, когда пользователь попытается распечатать страницу. Наряду со ссылкой мы добавили функцию на событие “onload”, которая после загрузки страницы изменяет значение “media” на “all”, сделав его доступным для всех медиа-типов.

Это происходит, когда страница загружается, и, таким образом, страница не ждет загрузки упомянутого CSS и создания CSSOM. Это ускоряет загрузку страницы.

* — Атрибут media="print" следует применять только к тем элементам CSS, которые не влияют на первоначальную загрузку страницы. Стили, которые требуются при загрузке страницы, не могут иметь media="print".

Оригинал статьи: Simple CSS Hack to Reduce Page Load Time

Автор статьи: Mayank Gupta

Перевод: Земсков Матвей