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

Роль CSS

CSS является одним из важнейших факторов, влияющих на время загрузки страницы. Приложение, встречая CSS-файл, каждый раз загружает его в первую очередь, согласно установленному по умолчанию приоритету. Следующим шагом данные, полученные из CSS-файла, формируют объектную модель CSS (CSSOM, CSS Object Models). Далее, созданная CSSOM объединяется с DOM-деревом в “дерево рендеринга” (Render Tree). Дерево рендеринга обеспечивает правильное отображение стилей для всех компонентов, присутствующих на странице.

Чем больше каскадных стилей встречается в приложении, тем дольше идет процесс объединения CSSOM и DOM в дерево рендеринга.

Встречая CSS-файл, HTML-код ожидает окончания загрузки данных и создания CSSOM. Именно поэтому CSS блокирует рендеринг.

Неблокирующий CSS

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

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

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

В коде, приведенном выше, для атрибута media установлено значение print, которое указывает на то, что данные из CSS-файла не будут применяться сразу при загрузке страницы. Обращение к этим данных произойдет только в том случае, когда пользователь попытается распечатать страницу. Кроме того, для тега link добавлен атрибут onload, который указывает на то, что сразу после окончания загрузки страницы значения атрибута media изменится с print на all, сделав его доступным для всех типов media. Таким образом, обращение к данным CSS-файла и создание нового CSSOM произойдет уже после загрузки страницы. То есть, время первоначальной загрузки страницы уменьшится.

Следует помнить, что значение print для атрибута media следует применять только к некритичным для первоначальной загрузки страницы сайта свойствам CSS.

Спасибо зв внимание.

Перевод статьи “Simple CSS Hack to Reduce Page Load Time”.