Прискорте сайт в 7 разів

Щоразу, коли бачу заголовок “прискорте сайт в 7 разів”, готуюся до скепсису.

Але нещодавній кейс із content-visibility змусив придивитися. 

232 мс проти 30 мс на початковий рендеринг – це не жарти.

І все це – одна властивість CSS.

Вся магія в тому, що браузеру буквально кажуть: “Не малюй той футер і мільйон секцій, поки юзер до них не доскролить”. 

Це відкладений рендеринг у найчистішому вигляді.

Найцікавіше – це не старий-добрий display: none. Контент залишається в DOM, доступний для пошуку на сторінці (Ctrl+F) і скрінрідерів. Він просто “ліниво” чекає свого часу, не блокуючи основний потік.

Звісно, є нюанс. Щоб уникнути “стрибків” скролбару, коли контент раптом з’являється, доведеться додати contain-intrinsic-size. Це як дати браузеру “підказку” про приблизну висоту блоку.

А ще це позитивно впливає на чутливість сторінки (INP). 

Менше роботи з рендерингу = швидша реакція на кліки користувача.

Приємне нагадування, що оптимізація – це не завжди про складний JavaScript. Іноді це просто правильний CSS.