Чому сайт вантажиться повільно і як це виправити
Свій замір, а не десятий список сервісів: як ми підняли власний сайт із 79 до 92, що дало більшу частину приросту і де стеля, за яку не пройти.
Редакція awakes.ai ·
Чому сайт вантажиться повільно
Сторінка вантажиться повільно, коли браузер до першого кадру мусить завантажити забагато: важкі зображення, кілька шрифтів, стилі теми, скрипти сторонніх віджетів. Плюс час, поки сервер узагалі почне відповідати. Швидкість — це не одна цифра, а сума дрібниць, і майже завжди виявляється, що дві-три з них дають більше, ніж усі інші разом.
Але перед тим, як щось лікувати, варто відповісти на інше питання. Дуже часто «сайт гальмує» означає «гальмує саме в мене»: слабкий мобільний інтернет, старий телефон, десяток відкритих вкладок, розширення в браузері. Перевіряється це за хвилину — відкрийте свій сайт із чужого пристрою й іншої мережі. Якщо там швидко, лікувати треба не сайт.
Якщо повільно скрізь — далі ця стаття. Спершу як заміряти, щоб цифра щось означала, потім що саме забирає час, і наприкінці найнеприємніше: де прискорення впирається у стелю, за яку не пройти нікому.
Як заміряти швидкість і не обдурити себе
- 1
Міряйте інструментом, а не секундоміром
Відкрийте pagespeed.web.dev і вставте адресу сторінки. Це безкоштовний сервіс самого Google, і саме його цифри бачать усі, кому ви потім покажете сайт. Секундомір і власне відчуття не годяться: у вас сторінка вже в кеші браузера.
- 2
Дивіться мобільну вкладку, а не десктопну
Google оцінює сайт за мобільною версією, і більшість ваших відвідувачів теж із телефона. Десктопна оцінка майже завжди вища й майже завжди марна: вона показує сайт на швидкому дротовому інтернеті, якого у вашого клієнта немає.
- 3
Проженіть тричі й візьміть середнє
Один прогін нічого не означає: цифра стрибає на кілька балів від завантаження серверів. Три заміри поспіль дають зрозуміти, де реальний рівень. Якщо розкид більший за п’ять балів — щось нестабільне на самому сервері.
- 4
Міряйте не головну, а сторінку, яка приносить гроші
Головну відкривають рідше, ніж здається. Заміряйте сторінку послуги, картку товару й сторінку із формою — саме там втрачені секунди перетворюються на втрачені заявки.
Що означають три показники, які вам покажуть
| Показник | Що це людською | Добре, якщо |
|---|---|---|
| LCP | Скільки минуло, поки людина побачила головне на екрані: заголовок, велике фото, першу кнопку. | до 2,5 секунди |
| INP | Скільки сторінка думає, перш ніж відреагувати на натискання. Це про «клікнув і нічого не сталося». | до 200 мілісекунд |
| CLS | Наскільки сторінка стрибає під пальцем, поки вантажиться. Через це промахуються повз кнопку. | до 0,1 |
Це Core Web Vitals — три показники, за якими Google оцінює зручність сторінки. Пороги наведено за документацією Google станом на 6 вересня 2026 року.
Наш власний замір
Шрифти, про які ніхто не пише
Порада «стисніть зображення» стоїть у кожній статті про швидкість. Про шрифти не пише майже ніхто — а браузер тягне їх у найвищому пріоритеті, ще до картинок. Красива тема легко приносить із собою чотири-п’ять шрифтових файлів, з яких на сайті реально видно два.
У нас це виявилося найбільшою окремою знахідкою. Один шрифт вантажився заради підпису до кнопки «нагору», якого ніхто не бачить, — його викинули цілком. Решту обрізали до символів, які справді трапляються в текстах сайту: латиниця, кирилиця, розділові знаки, і нічого більше. 288 КБ перетворилися на 61 КБ, і жодна буква на сайті не змінилася.
Стеля тут така: обрізати можна тільки свій файл. Якщо шрифт підключено з чужого сервісу — Google Fonts, Adobe, конструктор, — ви керуєте лише тим, які накреслення просити. Половину виграшу це все одно дає: більшість сайтів тягне жирне, курсив і напівжирне, а користується двома з них.
Зображення: найчастіша знахідка й найдешевша
Класика, з якої починають усі, і вона справді працює. Типова картина: фотографію завантажили з телефона як є, три-чотири тисячі пікселів завширшки і кілька мегабайтів вагою, а показується вона в блоці шириною чотириста. Браузер чесно качає всі мегабайти, щоб потім зменшити картинку до мініатюри.
Лікується трьома речами. Розмір — картинка має бути приблизно такою, якою її видно, а не вдвічі-втричі більшою. Формат — сучасний WebP або AVIF замість JPEG і PNG, це майже завжди мінус половина ваги без видимої різниці. І відкладене завантаження: те, що лежить унизу сторінки, не потрібне до першого кадру.
Тут же живе найдорожча помилка — відео на фоні першого екрана. Воно виглядає дорого й коштує дорого: кілька мегабайтів, які браузер починає качати одразу. Якщо без нього ніяк, хоча б поставте статичний перший кадр, поки відео підвантажується. Стеля цього блоку проста: коли всі картинки вже оптимізовані, більше з них не вичавити, і далі шукати треба в іншому місці.
Код теми, який ви не писали
Купуючи тему або ставлячи конструктор, ви отримуєте стилі й скрипти для всіх варіантів сторінок, які автор колись передбачив: слайдери, галереї, магазин, форуми, темна тема, підтримка мов, що пишуться справа наліво. Ваш сайт користується десятою частиною. Решта все одно вантажиться на кожній сторінці.
Ми почистили стилі своєї теми від правил, які в розмітці не трапляються жодного разу: 130 КБ стали 25 КБ. Разом зі шрифтами це дало більшу частину нашого приросту — більше, ніж усі маніпуляції із зображеннями. Те саме стосується вимкнених модулів: плагін вимкнули, а його стилі часто лишаються в наборі.
Межа тут не технічна, а організаційна. Чистка ламається від наступного оновлення теми: прийшла нова версія — прийшли нові правила. Або ви повторюєте чистку після кожного оновлення, або приймаєте, що частина ваги повернеться. Чесно про це знати заздалегідь, а не дивуватися через півроку.
Чужі скрипти на вашій сторінці
Порахуйте, скільки сторонніх сервісів стоїть на вашій головній. Чат підтримки, лічильник аналітики, піксель реклами, карта проїзду, віджет відгуків, спливаюче вікно з підпискою, кнопки соцмереж. Кожен із них — це окремий запит на чужий сервер і окремий пакет коду, часто більший за весь ваш сайт.
Річ не в тім, що вони погані: чат приносить заявки, аналітика показує, звідки люди. Річ у тім, коли саме вони вантажаться. Більшість із них можна відкласти на момент після першого кадру — людина побачить сторінку одразу, а чат з’явиться на секунду пізніше, і ніхто цього не помітить. У нас чат саме так і підключений.
І окремо про те, чого ви не ставили. Якщо сайт стоїть за проксі-сервісом на кшталт Cloudflare, той може додавати в сторінку свої скрипти — наприклад аналітику, увімкнену за замовчуванням. Перевіряти варто не за списком того, що ви підключали, а за тим, що реально вантажиться в замірі.
Сервер, який довго думає
Буває, що вага сторінки нормальна, а секунди все одно втрачаються — до того, як браузер отримав перший байт. Це означає, що сервер збирає сторінку заново на кожен запит: іде в базу, підставляє дані, малює HTML. На дешевому хостингу, де на одній машині живуть сотні сайтів, це і є основна втрата.
Лікується кешуванням: готову сторінку віддають одразу, а збирають наново тільки коли щось змінилося. Плюс стиснення відповіді й заголовки кешу для картинок і шрифтів, щоб на другому заході людина не качала те саме. Якщо відвідувачі не з однієї країни — CDN, мережа серверів, яка віддає файли з найближчого до людини міста.
Стеля тут неприємно тверда: повільний хостинг не лікується налаштуваннями. Якщо сервер відповідає за секунду навіть на порожню сторінку, кеш допоможе частково, а решта — це переїзд. Це окрема робота й окремі гроші, і краще порахувати їх до того, як почнете чистити картинки.
Що ми пробували і що не спрацювало
Здавалося очевидним: не буде окремого запиту за файлом стилів. Насправді HTML розпух удвічі, стилі продублювалися всередині сторінки ще раз, і перший кадр став показуватися пізніше, а не раніше. Відкотили.
Модальне вікно, меню, блок питань, форму зробили такими, що завантажуються окремо. Після першого кадру справді поїхало кілька кілобайтів, до першого кадру — нічого. Вага була не в них, і ми витратили день, щоб це з’ясувати.
Прогнали ілюстрацію через додатковий оптимізатор, виграли шість відсотків її ваги. У загальній цифрі це не побачив ніхто. Коли зображення вже в сучасному форматі й у потрібному розмірі, далі там нічого немає.
Логічно було припустити, що аналіз готового HTML знайде більше зайвого, ніж аналіз вихідного коду. Різниця вийшла в половину кілобайта. Другий підхід виявився не кращим, просто повільнішим.
Де прискорення впирається у стелю
Найчесніша частина заміру — та, що показує межу. У нас сторінка дає 92 бали, і зробити з них 100 не вийде: близько 120 КБ це React і рантайм фреймворка, на якому зроблено сайт, вони вантажаться на будь-якій сторінці незалежно від того, що на ній написано. Та сама сторінка з вимкненим JavaScript дає 100. Тобто вісім балів — ціна технології, а не недоробка.
У вас буде своя стеля, просто з іншої причини: конструктор, важка тема, платіжний модуль, вимога маркетингу залишити три віджети. Це нормально. Ненормально — коли підрядник обіцяє «зробимо 90+», не подивившись, на чому сайт зроблено.
І головне, чого не варто чекати від швидкості взагалі. Вона не підніме сайт у пошуку сама по собі. Google формулює це так: Core Web Vitals беруть участь у ранжуванні, але хороший показник у звіті не гарантує позицій. Швидкість прибирає причину, через яку сторінку відсувають; зростання дає робота з попитом, структурою й текстами. Сайт, який вантажиться за секунду, але не відповідає на запит, лишиться там, де був.
Хочете цифру по своєму сайту
За 30 хвилин заміряємо ваші сторінки разом із вами й покажемо, з чого складається час: скільки важать зображення, скільки шрифти, скільки чужі віджети і скільки думає сервер. Скажемо, скільки з цього реально можна зняти на вашій платформі — і якщо знімати нема чого, скажемо й це. Безкоштовно, до будь-якого рахунку.
Упізнали свій процес?
За 30 хвилин розберемо, як це влаштовано у вас, і скажемо, що з цього можна забрати в людей. Безкоштовно і без зобов’язань.