Как уменьшить время начальной загрузки страницы сайта?

content-visibility было опубликовано в сентябре 2020 года

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

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

Значения свойства content-visibility

Оно принимает одно из трех значений:

• hidden: элемент обходит свое содержимое (похоже на применение display: none; к содержимому).
• visible: эффекта нет, и элемент отображается как обычно.
• auto: элемент имеет компоновку, стиль и цветовую оболочку. Браузер должен определить, имеет ли это содержание отношение к пользователю, и, если это не так, браузер пропустит его. В то же время элемент по-прежнему фокусируется, выбирается и доступен для таких вещей, как вкладки и поиск по странице.

content-visibility: hidden:

Я упоминал выше, что это похоже на display: none; потому что элемент вообще не отображается на странице.

Когда правило удалено, браузер должен отобразить элемент и его содержимое с content-visibility: hidden; Однако элемент скрыт, но его отображаемое состояние кэшируется. Поэтому, когда правило удаляется, браузеру не нужно отображать элемент с нуля. Таким образом, вы можете использовать это для чего-то, что скрыто по умолчанию, но есть большая вероятность, что вы покажете это в какой-то момент жизненного цикла страницы (например, обычно используемое модальное окно). Таким образом, элемент загружается намного быстрее при последующих посещениях, когда он действительно отображается.

content-visibility: auto:

Вы могли бы подумать об этом как о ленивой загрузке для целых частей DOM.

Если элемент находится ниже сгиба и имеет правило content-visibility: auto;, браузер не учитывает его содержимое. Следовательно, рендеринг для этого элемента пропускается. Когда пользователь прокручивает элемент, браузер рисует его содержимое, и рендеринг выполняется достаточно быстро для пользователя.

Будьте осторожны при использовании content-visibility: hidden. Это не только говорит браузеру пропустить элемент из рендеринга при начальной загрузке страницы, но также удаляет элемент из чтения с помощью вспомогательных технологий, таких как программы чтения с экрана.

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

Однако auto также указал, что элемент все равно должен быть доступен пользователю, а не полностью игнорировать элемент в DOM. Это означает, что элемент и его содержимое должны быть фокусируемыми, выбираемыми, с вкладками и доступными для поиска с помощью функции поиска на странице браузера.

Поддержка браузеров свойства content-visibility

Данные взяты из Caniuse, в которых содержится более подробная информация. Число указывает, что браузер поддерживает эту функцию в этой версии и выше.

Скриншоты из caniuse

скриншот январь 2021 (65% поддержки)

скриншот июль 2021 (70% поддержки)

До

  

После