Новое CSS-свойство content-visibility ускоряет отрисовку страницы в несколько раз

Скрипты и советы | 13 августа 2020 1 303

Уроки CSS на Хабрахабре, habrahabr.ru, Блог компании VDSina.ru — хостинг серверов, Веб-дизайн, Разработка веб-сайтов, CSS, Интерфейсы, css, chromium,

5 августа 2020 разработчики Google анонсировали новое CSS-свойство content-visibility в версии Chromium 85. Оно должно существенно повлиять на скорость первой загрузки и первой отрисовки на сайте; причём с только что отрендеренным контентом можно взаимодействовать сразу же, не дожидаясь загрузки остального содержимого. content-visibility заставляет юзер-агент пропускать разметку и покраску элементов, не находящихся на экране. По сути, это работает как lazy-load, только не на загрузке ресурсов, а на их отрисовке.


В этой демке content-visibility: auto, применённый к разбитому на части контенту, даёт прирост скорости рендера в 7 раз
Читать дальше →

Источник: Уроки CSS на Хабрахабре

[Из песочницы] CSS Containment

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

Подробнее
Блог им. oknechirik / Я бы сделал лучше

Студия Лебедева порадовала нас новым творением — обновился интернет-магазин Техносилы. Все мило и, как обычно в...

Подробнее
«Render-Blocking JavaScript and CSS on WordPress». Как это исправить?

Скорость загрузки — очень важный фактор, влияющий на рейтинг сайта на SERP (Search Engine Result Page), или на странице...

Подробнее
Как прятать

Когда display: none, а когда visibility: hidden? Зависит от того, что вы пытаетесь сделать. Есть и другие варианты как...

Подробнее
Фронтенд-новости №5. Отказ от React, новые CSS-свойства для адаптивности и JS-контейнеры

Подборка того, что волновало фронтенд-разработку, пока все отдыхали на майских. Горячее Веб быстро развивается и уже...

Подробнее
За сколько секунд должен загружаться веб-сайт в 2020, что такое «быстро», и причем тут зеркала в лифтах?

Казалось бы, померил время от HTTP-запроса браузера до загрузки последнего байта страницы — и готово. Not so fast! У...

Подробнее

💬 Комментарии

В связи с новыми требованиями законодательства РФ (ФЗ-152, ФЗ «О рекламе») и ужесточением контроля со стороны РКН, мы отключили систему комментариев на сайте.

🔒 Важно Теперь мы не собираем и не храним ваши персональные данные — даже если очень захотим.

💡 Хотите обсудить материал?

Присоединяйтесь к нашему Telegram-каналу:

https://t.me/tcsecms

Нажмите кнопку ниже — и вы сразу попадёте в чат с комментариями