Швидкість завантаження сайту: як перевірити і прискорити

Швидкість завантаження сайту — це те, як швидко людина бачить головне на сторінці і може з нею взаємодіяти. Google оцінює її трьома показниками Core Web Vitals: головний блок сторінки має з’явитися за 2,5 секунди, сторінка — реагувати на натискання за 0,2 секунди, а елементи — не стрибати під час завантаження.

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

Чому швидкість сайту важлива

Вона впливає на заявки й продажі. У дослідженні Deloitte для Google «Milliseconds Make Millions» прискорення мобільного сайту всього на 0,1 секунди дало інтернет-магазинам +8,4% конверсій, а сайтам зі збору заявок — +7% переглядів сторінок.

Вона враховується в пошуку, але не вирішує все. Google підтверджує, що Core Web Vitals використовуються в ранжуванні. Але там само прямо сказано: пошук завжди намагається показати найрелевантніший вміст, навіть якщо сторінка не найшвидша. Тобто швидкість не зробить слабку сторінку першою, але серед рівних за змістом сторінок може дати перевагу.

Вона визначає, скільки грошей з реклами дійде до сайту. За кожен клік ви платите, навіть якщо людина закрила вкладку, не дочекавшись сторінки. Тому для рекламних лендінгів швидкість — одна з перших вимог. Так було, наприклад, у проєкті Beauty International School: сайт робився під рекламу, і максимальна швидкість завантаження стояла в задачі поруч із конверсією.

Як перевірити швидкість сайту

Усі основні інструменти безкоштовні:

Як перевіряти правильно:

1. Дивіться мобільну версію. У PageSpeed Insights вона відкривається першою, і саме за нею Google оцінює сайт.
2. Розрізняйте два блоки звіту. Верхній — «Дані реальних користувачів»: це те, що відчувають ваші відвідувачі. Нижній, з оцінкою від 0 до 100, — лабораторний тест одного завантаження на умовному повільному телефоні. Для рішень важливіший верхній. Оцінка 100 — не мета: сайт з оцінкою 70 і зеленими реальними даними працює добре.
3. Перевіряйте кілька сторінок. Головна часто найлегша. Протестуйте сторінку послуги, статтю, каталог — ті, куди веде реклама й пошук.
4. Повторіть тест 2–3 рази. Результати лабораторного тесту коливаються, одному заміру довіряти не варто.

Core Web Vitals простими словами

Три показники, за якими Google оцінює, чи зручно людині на сторінці. Добрим результат вважається, якщо норму виконують щонайменше 75% відвідувань (джерело — web.dev).

INP замінив попередній показник FID у березні 2024 року, тож якщо в старих порадах ви бачите FID — вони застаріли.

Що найчастіше гальмує сайт

• Зображення. Найчастіша причина. Фото з телефона на 5–10 МБ, завантажене як є, повільніше за весь інший сайт разом.
• Готова тема або конструктор сторінок. Вони містять код для сотень функцій, які вам не потрібні, і браузер завантажує його на кожній сторінці.
• Плагіни. Кожен додає свої файли. Двадцять плагінів — це двадцять наборів скриптів і стилів.
• Сторонні скрипти. Онлайн-чат, пікселі реклами, карта, вбудоване відео, віджет відгуків. Кожен тягне код з чужого сервера, на швидкість якого ви не впливаєте.
• Шрифти. Кілька накреслень кількох шрифтів — це кілька сотень кілобайт до того, як з’явиться текст.
• Хостинг і відсутність кешу. Якщо сервер щоразу збирає сторінку з нуля, людина чекає ще до того, як почнеться завантаження.

Як прискорити сайт: 10 дій

1. Стисніть зображення і переведіть у WebP. Розмір на сайті має відповідати розміру показу: фото шириною 4 000 пікселів для блоку в 800 — зайве.
2. Віддавайте телефону менші картинки. Браузеру дають кілька розмірів одного зображення, і він бере потрібний. Детальніше — у статті про адаптивний дизайн.
3. Відкладайте завантаження всього нижче першого екрана (lazy loading), але не головного фото: його браузер має отримати якомога раніше.
4. Задавайте розміри картинкам і банерам, щоб під них заздалегідь резервувалось місце. Це прибирає стрибки сторінки (CLS).
5. Вбудовуйте відео через прев’ю. Замість повного плеєра YouTube показуйте картинку з кнопкою, а плеєр вантажте після натискання.
6. Приберіть зайві плагіни й скрипти. Пройдіться списком: чим користуєтесь реально, а що лишилось після давнього експерименту.
7. Відкладайте сторонні скрипти. Чат і пікселі можуть завантажуватися після того, як людина побачила сторінку.
8. Увімкніть кешування — готові сторінки віддаються без повторної збірки на сервері.
9. Підключіть CDN, якщо у вас відвідувачі з різних країн: файли віддаватимуться з найближчого до людини сервера.
10. Перевірте хостинг. Актуальна версія PHP, достатньо ресурсів, сервер у тому ж регіоні, що й ваші клієнти.

Дії 1, 5, 6 і 8 зазвичай можна зробити самостійно через адмінку. Решта потребує розробника.

Швидкість закладається під час розробки

Прискорити готовий сайт можна, але є межа. Якщо сайт зібраний на важкій темі чи конструкторі сторінок, частину коду прибрати неможливо: на ньому все тримається. Тоді оптимізація дає «з червоного в жовте», а не «в зелене».

Тому швидкість дешевше закласти одразу: писати тільки потрібний код, планувати зображення й шрифти ще на етапі дизайну, обирати мінімум сторонніх скриптів. Ми робимо сайти на WordPress без готових тем і конструкторів сторінок саме з цієї причини. Чим такий підхід відрізняється за ціною від шаблонного, розбираємо у статті скільки коштує сайт.

Якщо сайт швидкий, а заявок усе одно мало, проблема вже не в швидкості. Що перевірити далі — у статті про UX-аудит сайту.