Зробити сайт швидким один раз нескладно. Складно тримати його швидким, коли постійно додаєш нове: кожен компонент, шрифт чи бібліотека трохи обтяжує сторінку, і ніхто цього не помічає, доки сайт не почне гальмувати. Тому ми перестали ставитися до швидкості як до разового аудиту і зробили її тестом, який має пройти кожна зміна.
З чого почали
Коли ми вперше грунтовно заміряли цей сайт, макет стрибав під час завантаження (зсув макета CLS близько 0,2), а головний вміст зʼявлявся за 4–6 секунд на повільному мобільному зʼєднанні. Основний CSS важив 41 КБ у стисненому вигляді — насамперед тому, що компоненти й код перевірки форм з адмінки їхали і до відвідувачів.
Що змінили
- Відвідувач отримує лише код сайту. Бібліотека інтерфейсу адмінки й бібліотека перевірки форм більше не потрапляють на публічний сайт. Тест проходить імпортами сайту і падає, якщо якась із них повернеться.
- CSS лише для того, що є на сторінці. Основний CSS зменшився з 296 до 98 КБ, а в стисненому вигляді — до 16 КБ.
- Шрифти без стрибків макета. Ключові шрифти завантажуються наперед, а сторінка більше не тягне заздалегідь код, який може й не знадобитися.
Тест, який це тримає
На кожному pull request CI збирає сайт, віддає його так само, як продакшн, — HTTP/2, TLS, стиснення — і тричі запускає Lighthouse на чотирьох ключових сторінках, беручи медіану. Бюджет: усі бали не нижче 95, найбільший елемент видно менш ніж за 2 секунди, зсув макета менше 0,1, блокування головного потоку менше 200 мс. Якщо зміна виходить за бюджет, CI стає червоним, і зміна не мержиться. Поряд працює перевірка доступності: на сторінках, які вона охоплює, зараз немає жодного порушення WCAG AA.
Результат
У CI сторінки мають 100 у всіх чотирьох категоріях Lighthouse, а головний вміст зʼявляється менш ніж за секунду. На живому сайті головна отримує 100, вміст зʼявляється приблизно за 1,2 секунди, а сторінка продукту — 98.
Чесно про те, що ще не ідеально: сторінки японською та іншими мовами CJK повільніші, бо їхні шрифти набагато більші. На це є окрема задача.
Що це дає вам
Повільна сторінка втрачає відвідувачів ще до того, як вони прочитають бодай слово, і пошуковики це теж бачать. Якщо ви робите з нами лендінг чи магазин, цей бюджет йде в комплекті — це частина нашої роботи, а не опція за доплату.