Матвей Земсков

Заметки веб-мастера

Немного о веб-технологиях

Мой блог содержит заметки о различных веб-технологиях, как клиентских, так и серверных. Здесь будут раскрыты вопросы html-верстки, программирования на javaScript и jQuery,разработки на PHP. Не останутся без внимания популярные системы управления сайтом «1С-Битрикс», Joomla и другие. О работе с ними, я также буду писать.

Мои заметки предназначены в основном для начинающих веб-мастеров. Несмотря на это, опытные разработчики также найдут здесь что-нибудь интересное для себя.

В своем блоге я собираюсь публиковать статьи о современных веб-технологиях (HTML5, CSS3 и других). Если в процессе работы над проектами я открываю для себя «свежее» решение какой-либо задачи, я записываю сюда информацию об этом, что позволяет мне при необходимости применять полученные знания в будущем.

Надеюсь информация будет полезна для посетителей.

 
Суббота, 31 июля 2021 09:44

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

Оцените материал
(0 голосов)

Все хотят, чтобы их страница загружалась быстрее. Это также полезно и в рамках поисковой оптимизации. Давайте посмотрим, как можно сократить время загрузки страницы, внеся несколько изменений в 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.

HTML

	<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

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

Прочитано 290 раз
Другие материалы в этой категории:
SVG-спрайты и их использование

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


Свежие заметки
Последние комментарии
Наверх