Як прискорити сайт: з 63 до 97 балів PageSpeed на реальному проєкті

Що це за сайт

LiLi Beauty Studio — салон краси в центрі Братислави. Сайт ми зробили з нуля у квітні 2026 року:

• послуги з цінами, галерея, акції, відгуки, карта і відповіді на часті питання;
• три мови — словацька, українська, англійська;
• онлайн-запис, заявки з якого миттєво приходять у Telegram — одразу кільком отримувачам. Форму захищає капча Cloudflare Turnstile і обмеження — не більше п'яти заявок з однієї адреси за 10 хвилин;
• сайт уміє сам підтягувати рейтинг і кількість відгуків з Google;
• окрема посадкова сторінка для реклами, яку ми закрили від пошуку, щоб вона не дублювала головну;
• сайт можна встановити на телефон як застосунок (PWA).

Технічно це React 19, Vite і Tailwind, розміщено на Cloudflare Pages, а запис і відгуки працюють через функції Cloudflare. За п'ять місяців у проєкті понад 80 змін — від першої версії до травневої шліфовки мобільної версії під iPhone. Серед них була й така: ми прибрали з сайту фото, на яких чітко видно обличчя людей.

Звідки ми стартували

20 вересня мобільний замір PageSpeed показав таке:

Верстка не стрибала, скрипти не блокували екран. Проблема була в тому, що і в якому порядку сторінка вантажила, — і, як з'ясувалось пізніше, у тому, що вона сама собі заважала.

Раунд 1. Вага: шрифти, капча, картинки

Шрифти: 735 КБ → близько 135 КБ

Сайт завантажував сім файлів шрифту Montserrat у форматі TTF, по 105 КБ кожен. Чотири з них — близько 420 КБ — ще й стояли в попередньому завантаженні, тобто браузер тягнув їх раніше за все інше.

Ми перевели шрифти у стиснений формат WOFF2 і розбили кожне накреслення на три алфавіти: латиницю, розширену латиницю для словацьких č, š, ž, ľ і кирилицю для української версії. Вийшов 21 файл, і браузер бере лише ті, що потрібні сторінці. Словацька версія тепер вантажить 11 файлів на ~135 КБ і жодного кириличного. Українська — ще п'ять кириличних, лише коли на неї перемикаються.

Цікаво, що жодне з семи накреслень ми не прибрали: усі вони справді використовуються. Розбивка зробила їх дешевими настільки, що прибирати не було потреби. Попереднє завантаження лишилось одне — 13-кілобайтний файл, яким набрано головний заголовок.

@font-face {
  font-family: Montserrat;
  src: url(/fonts/Montserrat-ExtraBold-latin.woff2?v=1) format("woff2");
  font-weight: 800;
  font-display: swap;          /* текст видно одразу */
  unicode-range: U+0000-00FF;  /* латиниця (спрощено) */
}

Капча: 427 КБ на кожній сторінці

Захист форми від спаму вантажився навіть там, де форми немає. Тепер він підключається, коли форма запису наближається до екрана на 400 пікселів, — людина цього не помічає, а решта сторінок вантажаться без нього.

Решта ваги

• Логотип важив 61 КБ: файл 626×625 показувався в кнопці 44×44. Тепер 5 КБ.
• Фото акцій 960×1280 на телефоні займали ~236 пікселів завширшки. Додали меншу версію — 45 КБ замість 146 КБ.
• Реєстрація офлайн-режиму (service worker) на пів секунди блокувала перше малювання через файл в 1 КБ. Тепер вона запускається, коли сторінка вже на екрані.
• Код решти сторінок вантажиться окремо — головна більше не тягне за собою галерею й посадкову.
• robots.txt і sitemap.xml не існували, і замість них сайт віддавав HTML головної. PageSpeed бачив «86 помилок у robots.txt». Після додавання оцінка SEO — 100.

Пастка: шрифт, який сервер віддавав як сторінку

Одразу після викладки головний шрифт перестав працювати. Виявилось, що хтось відкрив сайт за кілька хвилин до завершення оновлення: нового файлу ще не було, і сервер відповів замість нього HTML-сторінкою. Cloudflare закешував цю відповідь на рік — бо шрифтам ми дали «вічний» кеш.

Лікується версією в адресі файлу (?v=1): для кешу це вже інший файл. Урок ширший за цей випадок: якщо ставите файлам вічний кеш, одразу продумайте, як ви їх колись оновлюватимете.

Після першого раунду — 79–84 бали. Але головний екран застряг на 4,2 секунди і не рухався, хоч що ми прибирали. Вага більше не була проблемою.

Раунд 2. Затримки, які ми зробили самі

PageSpeed розкладає час головного екрана на частини, і одна з них — «затримка малювання елемента». У нас вона становила 1,8 секунди з 4,2. Звідки?

• Банер cookie на телефоні виявився найбільшим елементом першого екрана — і з'являвся з навмисною паузою в 1,2 секунди. По суті, ми вимірювали власну штучну затримку. Тепер банер з'являється разом зі сторінкою, а його анімація лише зсуває його, не проявляючи з прозорості.
• Анімації першого екрана. Заголовок, підзаголовок і кнопки красиво проявлялися з затримками — тобто стартували повністю прозорими. Google не рахує прозорі елементи, тож справжній заголовок ніколи не міг стати головним. Анімації прибрали.
• Порожня сторінка до старту React. Сайт зібраний на React: поки скрипт не завантажився й не виконався, на екрані нічого немає. Ми поклали готову копію першого екрана прямо в HTML і заздалегідь вантажимо фото героя. Зсув верстки при цьому — 0,0014, практично нуль.

Бал після цього — від 77 до 85 між запусками. Тобто не змінився: різниця в 8 балів на однаковому коді — це розкид вимірювань, а не результат. Орієнтуватися на один запуск не можна.

Раунд 3. Сторінка, що починалась прозорою

Замість того щоб дивитись на бал, ми відкрили сайт у Chrome з уповільненим процесором і мережею — так, як це робить сам PageSpeed, — і подивились, який саме елемент Google рахує головним. Відповідь: не заголовок і не фото, а маленький рядок акції «Zľava 10 %…» у верхній смузі, що з'являвся на 3,9 секунді.

Причин виявилось дві, і обидві ховались глибше:

• Уся сторінка проявлялась з прозорості. Кожен перехід між сторінками мав плавну появу від opacity: 0 — і перше відкриття теж. Поки сторінка прозора, ні заголовок, ні фото для Google не існують. Головним ставав той рядок акції, бо він жив поза цим блоком.
• React замінював готову копію першого екрана своєю. Копія з HTML встигала з'явитись, але React малював поверх неї нову, і відлік починався заново.

Рішення: перший екран головної тепер — звичайний HTML поза React, який React лише «доглядає» (мова, видимість на інших сторінках). Мову відвідувача підставляє крихітний скрипт ще до першого малювання. Основний код сайту стартує вже після того, як перший екран намальовано, а нижні розділи з'являються по одному за кадр, не блокуючи сторінку. Плавну появу при першому відкритті прибрали.

Результат

Цифри можна перевірити самому: відкрити замір PageSpeed для lilibeautystudio.com. Бал коливатиметься на кілька пунктів — це нормально.

Чому це важливо не лише для «галочки»

• Реклама дешевшає. Досвід на посадковій сторінці — одна з трьох складових показника якості Google Ads. Швидка сторінка — вищий показник якості — нижча ціна кліку за тих самих ставок.
• Менше втрачених людей. Хто прийшов з реклами на мобільному інтернеті й 10 секунд бачить порожній екран, найчастіше просто повертається назад — а клік уже оплачено.
• Пошук. Показники швидкості (Core Web Vitals) Google враховує при ранжуванні — не найважливіший сигнал, але за рівних умов швидший сайт виграє.

Як перевірити свій сайт за 5 хвилин

• Відкрийте PageSpeed Insights, вставте адресу і дивіться вкладку «Мобільні пристрої» — саме її Google вважає основною.
• Запустіть замір двічі-тричі. Різниця в 5–8 балів між запусками — шум, а не зміна.
• Знайдіть у звіті Largest Contentful Paint element — який елемент Google вважає головним. Якщо це не заголовок чи фото першого екрана, шукайте, що їх ховає.
• Подивіться на розкладку LCP: велика «затримка малювання» означає, що вміст уже завантажився, але його щось не показує — анімація, таймер, скрипт.
• Перевірте шрифти: формат WOFF2, а не TTF чи OTF, і попереднє завантаження лише тих кількох файлів, якими набрано перший екран.
• Порівняйте розмір картинок з тим, як вони показуються: фото 1000 пікселів у віконці на 200 — це зайва вага.
• Відкрийте ваш-сайт/robots.txt: якщо там HTML замість правил, файлу просто немає.

Часті питання