PageSpeed оптимізація: як досягти 95+ балів Google
🗓 25 травня 2026⏱ 8 хв читання
Ваш лендінг може мати ідеальний дизайн і переконливі тексти — але якщо він завантажується 5 секунд, ви вже втратили більше половини потенційних клієнтів. PageSpeed — це не просто цифра, це гроші, які ваш сайт або заробляє, або щодня втрачає.
Що вимірює Google PageSpeed
Google PageSpeed Insights оцінює сторінку за шкалою 0–100 на основі Core Web Vitals — реальних метрик, які відображають досвід користувача:
LCP
2.1s
Largest Contentful Paint — час завантаження головного контенту
CLS
0.02
Cumulative Layout Shift — зміщення елементів під час завантаження
FID / INP
18ms
Interaction to Next Paint — реакція на кліки і дотики
FCP
0.9s
First Contentful Paint — перше відображення вмісту
Це реальні результати olead.dev. PageSpeed 98 на мобільних і 100 на десктопі.
Чому це важливо для бізнесу
Дослідження Google і великих e-commerce платформ показують:
+1 секунда завантаження знижує конверсію в середньому на 7%
53% мобільних користувачів покидають сторінку, якщо вона завантажується більше 3 секунд
Сайти з PageSpeed 90+ ранжуються в Google вище за повільніші конкуренти
Швидкий лендінг у рекламі коштує дешевше — Google знижує ціну кліку для якісних сторінок
Реальний приклад: клієнт з конверсією 2% і 1000 відвідувачів на місяць = 20 заявок. Прискорення лендінгу підняло конверсію до 3% = 30 заявок. Тобто +10 клієнтів щомісяця без збільшення бюджету на рекламу.
Чеклист PageSpeed оптимізації
Перевірте свій лендінг за цим чеклистом. Кожен пункт впливає на бали і швидкість завантаження:
✅
Зображення у форматі WebP або AVIF
Сучасні формати зображень займають на 25–50% менше місця порівняно з JPG/PNG при тій самій якості.
Вплив: дуже високий
✅
Lazy loading для зображень нижче першого екрану
Атрибут loading="lazy" на всіх зображеннях, крім hero. Браузер не завантажує те, що поза viewport.
Вплив: дуже високий
✅
Мінімізація CSS і JS
Видалення пробілів, коментарів, зайвого коду. Зменшує розмір файлів на 20–40%.
Вплив: середній
✅
Критичний CSS inline у <head>
Стилі для першого екрану вбудовані прямо в HTML. Браузер відображає сторінку без очікування на зовнішній CSS-файл.
Вплив: дуже високий
✅
Асинхронне завантаження шрифтів
Google Fonts через rel="preload" і font-display:swap. Шрифт не блокує рендеринг сторінки.
Вплив: середній
✅
Compress (gzip/brotli) на сервері
Сервер стискає HTML, CSS і JS перед відправкою. Зменшує трафік на 60–80%.
Вплив: дуже високий
✅
HTTP/2 або HTTP/3
Сучасні протоколи дозволяють завантажувати декілька ресурсів паралельно по одному з'єднанню.
Вплив: середній
⚠️
Уникати важких сторонніх скриптів
Кожен додатковий скрипт (чат, аналітика, піксель) сповільнює завантаження. Підключайте тільки необхідне, і через async або defer.
Вплив: дуже високий
✅
Зафіксовані розміри зображень (width/height)
Браузер резервує місце під зображення до його завантаження. Запобігає Layout Shift (CLS).
Вплив: середній
✅
Швидкий хостинг і CDN
TTFB (Time to First Byte) менше 200мс. Хостинг поблизу аудиторії або CDN для статичних файлів.
Вплив: дуже високий
Порівняння: оптимізований vs неоптимізований лендінг
Наш лендінг (PageSpeed 98)
PageSpeed Mobile
98 / 100
LCP
2.1s
FCP
0.9s
Розмір сторінки
~85 КБ
Типовий сайт на Wordpress / Tilda
PageSpeed Mobile
45–65 / 100
LCP
4.5–8s
FCP
2.8–4s
Розмір сторінки
1.5–5 МБ
Чому я досягаю PageSpeed від 90 до 100: всі лендінги olead.dev — це чистий HTML/CSS без важких фреймворків. Без WordPress, без Tilda, без зайвих плагінів. Це і є причина, чому розроблені мною лендінги завантажуються миттєво.
Інтеграційний інженер & Web-розробник
Привіт, я Олег!
Запускаю сучасні лендінги для бізнесу в Україні.
Бережу ваш час і кошти, тому роблю все сам - від прототипу до підключення домену. Сайти вантажаться миттєво, адаптовані під мобільні, а всі заявки падають вам прямо в Telegram.
Напишіть мені, і я безкоштовно зроблю прототип для вашої ніші!
Клієнти не чекатимуть, поки завантажиться повільний сайт
Створю лендінг із показником PageSpeed 90-100. Миттєве завантаження на мобільних, чистий код, підключення вашого домену та сповіщення про замовлення в Telegram.