CSS-оптимизация рендеринга, containment, content-visibility и техники ускорения отрисовки
Long Tasks API устарел для диагностики INP. Long Animation Frames API в Chrome 123+ даёт детальную атрибуцию скриптов, связь с INP через web-vitals 4.0 и точные данные о forced reflow. Гайд с примерами кода и чек-листом внедрения в RUM.
INP — самая проблемная метрика Core Web Vitals: 43% сайтов не укладываются в 200 мс. Разбираем три фазы INP, диагностику через DevTools и LoAF API, а также scheduler.yield(), Web Workers и подходы для React и Vue.
Две строчки CSS ускоряют рендеринг в 7 раз. Разбираем CSS content-visibility и containment: как работает ленивый рендеринг, реальные кейсы с цифрами, пошаговое внедрение и типичные ошибки.