Швидкість сайту: як отримати 90+ у PageSpeed на мобільному

Швидкість сайту — рідкісний випадок, коли технічна метрика прямо конвертується в гроші: людина не чекає. Google теж: Core Web Vitals є фактором ранжування. Розповідаємо, що саме гальмує сайти й що ми робимо, щоб тримати 90+ балів у PageSpeed Insights на мобільному — на прикладі власного сайту.

Три метрики, які треба розуміти

• LCP (Largest Contentful Paint) — коли з'явився найбільший елемент першого екрана. Ціль: до 2,5 секунди.
• CLS (Cumulative Layout Shift) — наскільки «стрибає» верстка під час завантаження. Ціль: менше 0,1.
• INP (Interaction to Next Paint) — як швидко сайт відповідає на дотик. Ціль: до 200 мілісекунд.

Решта цифр у звіті — похідні. Якщо ці три в зеленій зоні, сайт швидкий і для людини, і для Google.

1. Шрифти: найчастіша причина повільного старту

Підключення Google Fonts через <link> — це додаткове з'єднання з чужим доменом, завантаження CSS, а вже потім самих файлів. На мобільному інтернеті це легко півтори секунди до появи тексту.

Що робимо ми: завантажуємо шрифти до себе, ріжемо на потрібні підмножини (кирилиця + латиниця), віддаємо у форматі woff2, додаємо font-display: swap і <link rel="preload"> на два накреслення, які використовуються на першому екрані. Сторонніх з'єднань — нуль.

2. Картинки: формат, розмір, пріоритет

• WebP або AVIF замість JPEG і PNG — у 2–3 рази менша вага при тій самій якості.
• srcset і sizes — телефон не повинен вантажити картинку шириною 1440 пікселів.
• width і height в атрибутах — інакше верстка «стрибне», коли картинка дозавантажиться (це і є CLS).
• loading="lazy" для всього, що нижче першого екрана — і жодного lazy для головного зображення.
• Відео на першому екрані — найдорожче рішення в дизайні. Якщо без нього ніяк, вантажте постер, а саме відео — після взаємодії.

3. Анімації появи, які ламають LCP

Популярний прийом: блоки з'являються під час прокрутки. Проблема в тому, що елементи спочатку мають opacity: 0 — і якщо так оформлений заголовок першого екрана, браузер вважає, що найбільший елемент з'явився пізно. LCP росте на секунду й більше буквально через два рядки CSS.

4. CSS і JavaScript

• Один файл стилів, мінімізований, без коментарів — і жодних фреймворків «про всяк випадок».
• Скрипти з атрибутом defer, щоб вони не блокували показ сторінки.
• Обробники прокрутки замінюємо на IntersectionObserver — він не змушує браузер рахувати геометрію на кожен піксель.
• Сторонні скрипти (чати, піксели, віджети) — найбільші вороги швидкості. Підключайте лише те, чим реально користуєтесь, і після завантаження сторінки.

5. Кешування й хостинг

Статичні файли (шрифти, картинки, CSS, JS) віддаємо з довгим кешем — рік. Для цього достатньо одного конфігураційного файлу на хостингу. Сама сторінка кешується коротко, щоб правки з'являлися одразу. Статичний сайт на CDN відкривається швидше за будь-який важкий движок — і коштує дешевше в обслуговуванні.

Що це дає на практиці

Після цих кроків на власному сайті ми отримали першу відмальовку й найбільший елемент приблизно за 2 секунди в умовах емуляції мобільного 4G, вагу сторінки близько 350 КБ і 16 запитів. До оптимізації перший екран з'являвся за 3,2–3,6 секунди — різниця в півтори секунди, яку добре видно оком.

Чекліст перед запуском

1. Прогнати сторінку через PageSpeed Insights — саме вкладку «Мобільні».
2. Перевірити, що головний елемент першого екрана не має opacity: 0 і не lazy.
3. Переконатися, що всі картинки мають розміри й сучасний формат.
4. Порахувати сторонні скрипти й прибрати зайві.
5. Увімкнути кеш для статики.
6. Перевірити на реальному телефоні через мобільний інтернет, а не Wi-Fi.

Швидкість — частина дизайну й частина SEO одночасно. Ми перевіряємо її на кожному проєкті перед здачею: подивитись результат можна в портфоліо, усі сайти відкриваються за прямими посиланнями.

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