24.09.2021

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

Обычный CSS-хак для сокращения времени загрузки странички

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

Воздействие 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.

Приведенный выше код показывает, что значением «media» для CSS является «print» , что значит, что CSS не будет применяться вначале и будет применен, когда пользователь попробует распечатать страницу. Также, мы добавили функцию «onload», которая говорит, что после загрузки страницы тип «media» поменяется на «all», сделав ее доступным для всех типов media.

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

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

По материалам webformyself.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *