Пост канала

Frontend Разработка | JavaScript & Верстка сайтов. HTML, CSS и React. Уроки для Фронтенд Developer. JS, Vue и Web технологии. IT Карьера, Курсы и Coding.

1. 11.10 · 21:12

   🚀 Быстрое улучшение Lighthouse: content-visibility Хотите ускорить рендер длинных страниц без костылей? Используйте CSS-свойство: .card { content-visibility: auto; } Что делает: - Браузер не рендерит невидимые элементы (за пределами вьюпорта); - Сохраняет размер блока для скролла; - Экономит ресурсы → First Paint быстрее, Lighthouse выше. Где применять: - Списки (товары, посты); - Длинные страницы; - Виджеты ниже фолда. ⚠️ Осторожно: не ставьте на элементы с динамическим контентом, где важно мгновенное измерение размеров. Можно добавить contain-intrinsic-size → убрать "скачок" при появлении. .card { content-visibility: auto; contain-intrinsic-size: 300px; } 2 строки — и сайт ощущается быстрее ✨ 👉 @frontend_1

   Открыть в MAX

   Просмотры

   519

   ER

   0,8%

   Реакции

   4