Зміст
Чому швидкість сайту - це гроші, а не технічна дрібниця
Логіка проста. Кожна секунда завантаження – це частина людей, які не дочекались. Дослідження Google по мобільних сторінках показало: коли час завантаження зростає з 1 до 3 секунд, імовірність відмови (bounce) піднімається на 32%. З 1 до 5 секунд – уже на 90%. Це не лінійна історія, обвал відбувається швидко. Деталі методології Google відкрито публікує на web.dev – ресурсі команди, що й розробляє ці метрики.
Що таке Core Web Vitals простими словами
- Чи швидко з’явилося головне? – за це відповідає LCP.
- Чи швидко сайт реагує, коли я тицяю? – за це відповідає INP.
- Чи не стрибає все під рукою, поки вантажиться? – за це відповідає CLS.
Три метрики: LCP, INP і CLS
| Метрика | Що міряє | Добре | Погано |
|---|---|---|---|
| LCP - Largest Contentful Paint | За скільки з'являється найбільший видимий елемент (банер, заголовок, фото) | до 2,5 с | понад 4 с |
| INP - Interaction to Next Paint | Як швидко сайт реагує на клік, тап, ввід тексту | до 200 мс | понад 500 мс |
| CLS - Cumulative Layout Shift | Наскільки контент стрибає під час завантаження | до 0,1 | понад 0,25 |
LCP - "коли я нарешті побачив головне"
INP - "я тицьнув, а воно думає"
CLS - "хотів натиснути одне, натиснув інше"
Як виміряти швидкість сайту: PageSpeed, Lighthouse, GTmetrix
PageSpeed Insights - звідки починати
Заходите на pagespeed.web.dev, вставляєте адресу сторінки, тиснете “Аналізувати”. За хвилину отримуєте оцінку від 0 до 100 окремо для мобільних і десктопу, всі три метрики Core Web Vitals і список конкретних рекомендацій з оцінкою, скільки секунд зекономить кожна. Це головний інструмент, бо він показує і польові, і лабораторні дані одночасно (про різницю – нижче). Перевіряйте обов’язково мобільну версію: Google ранжує сайти за нею, та й більшість українського трафіку йде з телефонів.
Lighthouse - те саме, але в браузері
GTmetrix - коли треба копнути глибше
Лабораторні дані проти польових: чому цифри різні
Лабораторні дані (Lab) – це разовий тест у стерильних умовах: емуляція одного пристрою, стабільний канал. Зручно для діагностики, бо дає однаковий результат при повторі. Але це не те, що бачать ваші реальні клієнти.
Польові дані (Field) – це статистика від справжніх користувачів Chrome за останні 28 днів, з реальних телефонів і реальних мереж. Google збирає її у звіті CrUX (Chrome User Experience Report) і саме її враховує для ранжування. Якщо сторінка нова або має мало трафіку, польових даних може просто не бути – тоді орієнтуйтесь на лабораторні.
Типові причини повільного сайту
- Важкі, незжаті зображення. Найпоширеніша причина. Фото товару у форматі 4000×3000 пікселів і вагою 5 МБ, яке на сайті показується розміром 400 пікселів. Браузер мусить завантажити весь файл. Рішення – стиснення і сучасні формати (WebP, AVIF).
- Купа сторонніх скриптів. Чат, два лічильники аналітики, піксель Facebook, віджет відгуків, попап-збір контактів. Кожен тягне свій код, і разом вони блокують відгук сайту (псують INP).
- Дешевий або перевантажений хостинг. Сервер довго “думає”, перш ніж віддати першу відповідь. Це б’є по LCP ще до того, як почалось завантаження картинок.
- Перевантажена тема або конструктор. Готові теми WordPress з сотнею функцій, з яких ви використовуєте п’ять, тягнуть весь код “про запас”.
- Відсутність кешування. Сайт щоразу збирає сторінку заново замість того, щоб віддати готову збережену версію.
- Шрифти і банери без розмірів. Головна причина стрибків макета (поганий CLS).
Як прискорити WordPress, Tilda і OpenCart
WordPress
Найбільше простору для оптимізації, бо платформа гнучка. Базовий набір: плагін кешування (WP Rocket, LiteSpeed Cache), автоматичне стиснення і конвертація картинок у WebP, відкладене завантаження зображень нижче екрана (lazy load), мінімізація CSS і JS. Окремо – ревізія плагінів: часто половину можна вимкнути без втрат. Якщо тема важка, іноді швидше перейти на легку, ніж лікувати стару.
Tilda
Тут менше контролю, бо платформа закрита, але базове зробити можна: стискати картинки до завантаження на сайт (Tilda не зменшить за вас оригінал), увімкнути вбудовану оптимізацію зображень, прибрати зайві анімації і важкі відеофони, мінімізувати сторонні вставки коду. Стелю швидкості на Tilda задає сама платформа – вище неї не стрибнути, і це варто враховувати ще на етапі вибору.
OpenCart
Інтернет-магазини найскладніші, бо сторінок багато і кожна тягне базу даних. Тут працює серверне кешування, оптимізація запитів до бази, CDN для роздачі картинок з найближчого до клієнта сервера, чистка зайвих модулів. На великому каталозі різницю дає саме робота з базою, а не з картинками.
Не хочете занурюватись у технічні деталі? Ми робимо перевірку швидкості сайту з конкретними рекомендаціями: що саме гальмує, на скільки секунд це можна прискорити і що зробити першочергово. Не загальний звіт із PageSpeed, а пріоритезований список дій під ваш сайт. Перевірка швидкості з рекомендаціями – 5 000 грн.
З чого починати: пріоритет виправлень
- Зображення. Майже завжди номер один. Стиснути, перевести у WebP, задати розміри, відкласти завантаження тих, що нижче екрана. Це б'є одразу по двох метриках: LCP (бо головне фото вантажиться швидше) і CLS (бо картинки з розмірами не стрибають). Часто тільки це переводить сторінку з червоної зони в жовту.
- Кешування. Найдешевший виграш по співвідношенню зусиль до результату. Сайт перестає збирати сторінку заново при кожному заході. Прямо покращує LCP.
- Сторонні скрипти. Аудит того, що реально потрібно. Чат, який нікому не пише, два лічильники аналітики замість одного, віджет, забутий з минулого року. Прибрати зайве і відкласти завантаження решти на потім. Лікує INP.
- Фікс зсувів макета. Задати розміри всім картинкам, банерам, рекламним блокам. Прелоад шрифтів, щоб текст не "перестрибував". Точково лікує CLS.
- Хостинг і сервер. Якщо після всього вище сервер усе ще довго "думає" перед першою відповіддю - час дивитися на хостинг чи серверне кешування. Це вже глибша робота, але без неї стелю не пробити.
Помилки самостійної оптимізації
Гонитва за цифрою 100, а не за реальними клієнтами. Людина ставить мету “хочу 100 балів” і витрачає тижні, вилизуючи останні п’ять пунктів, які ніхто з відвідувачів не відчує. Тим часом мобільна версія, де сидить більшість трафіку, лишається повільною. PageSpeed – інструмент, а не самоціль. Важлива не оцінка, а те, що відчуває жива людина на своєму телефоні.
Кілька плагінів кешування одночасно. Класична помилка на WordPress: поставили два-три плагіни “про всяк випадок”. Вони конфліктують між собою, сайт починає віддавати биті сторінки або взагалі ламається. Кеш має бути один, налаштований під вашу конфігурацію.
Агресивна мінімізація, що ламає верстку. Увімкнули “об’єднати і стиснути весь CSS і JS” – і сайт поплив: кнопки не натискаються, слайдер не крутиться, форма не відправляється. Це найпідступніше, бо власник може не помітити поломку на головній, а вона сидить на сторінці оплати, де якраз і втрачаються гроші. Після будь-якої оптимізації треба клікнути весь шлях клієнта до кінця.
Оптимізували головну, забули решту. PageSpeed за замовчуванням перевіряє одну сторінку. Власник заганяє в зелену зону головну і вважає роботу зробленою. А сторінки товарів, кошик, блог лишаються повільними – саме там, де відбувається конверсія. Перевіряти треба ключові типи сторінок, не одну.
Стиснули фото “на максимум” і вбили якість. Перегин у інший бік: стиснули зображення так, що товар виглядає розмитим. У магазині це прямо б’є по продажах – людина не купує те, що погано видно. Швидкість важлива, але не ціною того, заради чого людина прийшла.
Кому швидкість критична, а кому можна видихнути
Критично – інтернет-магазини. Тут швидкість прямо конвертується в гроші. Кожна секунда затримки на сторінці товару чи в кошику – це покинуті кошики і недоотриманий дохід. На великому каталозі різниця між швидким і повільним сайтом легко вимірюється відсотками виручки. Якщо у вас e-commerce – швидкість у пріоритеті завжди.
Критично – сайти під платний трафік. Якщо ви ллєте рекламу на лендинг чи сайт, повільна посадкова сторінка зливає бюджет ще до того, як людина побачить пропозицію. Тут швидкість окупається найшвидше: оптимізували сторінку – той самий рекламний бюджет приносить більше заявок без жодної копійки додатково.
Важливо, але без фанатизму – контентні та інформаційні сайти. Блог, медіа, портал. Швидкість впливає на SEO і дочитування, але тут немає миттєвого “кошик покинуто”. Достатньо тримати метрики в зеленій зоні, без гонитви за кожним балом.
Можна видихнути – проста візитка для офлайн-бізнесу. Якщо сайт – це по суті електронна вивіска, на яку заходить десяток людей на день перевірити адресу й телефон, гнатися за ідеальним INP немає сенсу. Достатньо, щоб сторінка нормально відкривалась на телефоні і не змушувала чекати. Гроші на глибоку оптимізацію тут краще вкласти в щось інше.
Коли вистачить доробки, а коли потрібен редизайн
Вистачить доробки, якщо сайт сучасний, структура нормальна, дизайн вас влаштовує, а проблеми точкові: важкі картинки, зайві скрипти, немає кешу. Це лікується доробкою сайту за кілька днів без переробки всього. Найкраще співвідношення результату до вкладень.
Потрібен редизайн, якщо сайт зроблено років 5-7 тому на застарілій важкій темі, код заплутаний, кожна правка ламає щось інше, а швидкість – лише одна з багатьох проблем поряд із незручною мобільною версією і слабкою конверсією. У такому разі оптимізувати старе – як ремонтувати двигун, який уже відпрацював ресурс. Часто редизайн сайту з нуля на легкій основі виходить і дешевшим, і надійнішим, ніж нескінченне латання.
Якщо ви плануєте новий сайт, закладайте швидкість у технічне завдання одразу. Дешевше побудувати швидко з самого початку, ніж оптимізувати після запуску. Те саме стосується SEO – його теж краще закладати на етапі створення сайту, а не доклеювати потім.
І останнє: швидкість – не разова акція. Сайт обростає новими сторінками, акціями, банерами, скриптами – і за пів року знову гальмує. Тому розумно тримати моніторинг Core Web Vitals у межах підтримки сайту, щоб бачити проблему раніше, ніж її побачить Google і відвідувач. А якщо хочете цілісну картину “де я зливаю гроші” – швидкість входить окремим блоком у маркетинговий аудит.
FAQ
-
Що таке Core Web Vitals простими словами?
Це три метрики Google, які в цифрах описують зручність сайту для людини: чи швидко з'явилося головне (LCP), чи швидко сайт реагує на кліки (INP) і чи не стрибає контент під час завантаження (CLS). Сайт проходить перевірку, коли всі три показники в зеленій зоні для 75% реальних відвідувачів. -
Як виміряти швидкість сайту - PageSpeed Insights, GTmetrix чи Lighthouse?
Почніть із PageSpeed Insights (pagespeed.web.dev): він безкоштовний, показує всі три метрики Core Web Vitals і конкретні рекомендації. GTmetrix потрібен для глибшої діагностики через waterfall-діаграму, а Lighthouse зручний для перевірки сторінок, закритих від публічного доступу. Обов'язково перевіряйте мобільну версію - Google ранжує саме за нею. -
Що таке LCP, INP і CLS і які значення вважаються добрими?
LCP (поява головного елемента) добре до 2,5 секунди. INP (швидкість відгуку на дії) добре до 200 мілісекунд. CLS (стрибки макета) добре до 0,1. INP замінив стару метрику FID у березні 2024 року і вимірює відгук на всі взаємодії за сесію, а не лише на першу. -
Як швидкість сайту впливає на конверсії і SEO?
На конверсії - напряму: за даними Google, при зростанні часу завантаження з 1 до 3 секунд імовірність відмови зростає на 32%, з 1 до 5 секунд - на 90%. Тобто частина оплаченого рекламного трафіку йде, не дочекавшись сторінки. На SEO - через сигнал Page Experience: за інших рівних швидший і стабільніший сайт ранжується вище. -
Як прискорити WordPress, Tilda або OpenCart сайт?
Починайте зі стиснення зображень і переведення їх у формат WebP - це найбільший виграш на будь-якій платформі. Для WordPress додайте кешування і приберіть зайві плагіни. На Tilda стискайте картинки до завантаження і прибирайте важкі анімації. Для OpenCart головне - серверне кешування і оптимізація запитів до бази даних.