Як прискорити сайт: 20 дій, що реально дають результат

Коротка відповідь: щоб прискорити сайт, спершу виміряйте, що саме його гальмує, і лише потім лагодьте. На типовому сайті малого бізнесу найбільший виграш дають чотири речі: стиснуті зображення правильного розміру, відкладені сторонні скрипти (чати, пікселі, віджети), 2–3 шрифти замість 6–8 і кешування сторінок. Ці дії займають від кількох годин до 2–3 днів роботи; переїзд на інший хостинг чи платформу виправданий тоді, коли прості резерви вичерпано.

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

Чому швидкість — це гроші, а не бали

• У дослідженні Deloitte на замовлення Google (Milliseconds Make Millions, 2020) прискорення мобільного сайту на 0,1 секунди супроводжувалося зростанням конверсії в рітейлі на 8,4%, а в туристичному сегменті — на 10,1%.
• За даними Google (2017), коли час завантаження мобільної сторінки зростає з 1 до 3 секунд, імовірність того, що відвідувач піде, не дочекавшись, збільшується на 32%.
• У Google Ads досвід на посадковій сторінці впливає на показник якості, а швидкість — одна з його складових. Повільний лендінг може означати дорожчий клік.
• В органічному пошуку швидкість входить до сигналів досвіду сторінки. Це не головний фактор ранжування, але за рівного контенту швидший сайт має перевагу.

В Україні до цього додається своя специфіка. Більшість клієнтів малого бізнесу заходить зі смартфонів, часто через мобільний інтернет, а під час відключень світла мобільні мережі працюють повільніше. Сторінка на 5 МБ, яка в офісі з оптикою відкривається за дві секунди, у клієнта на зупинці може вантажитися пів хвилини. Легкий сайт продає і в погані дні.

Крок 0. Виміряйте, перш ніж лагодити

Без заміру легко витратити тиждень на дрібниці й не помітити головного. Мінімальний набір інструментів:

1. PageSpeed Insights — польові дані реальних відвідувачів і лабораторний тест із підказками. Що означають LCP, INP і CLS, ми пояснили у статті Core Web Vitals простими словами.
2. Вкладка Network у Chrome DevTools або WebPageTest — «водоспад» усіх запитів: що вантажиться, скільки важить, з якого домену і що блокує показ сторінки.
3. Реальний смартфон середнього класу з мобільним інтернетом — найчесніший тест. Альтернатива — режим Slow 4G і сповільнення процесора в DevTools.

Міряйте шаблони, а не лише головну: сторінку послуги, категорію, картку товару, статтю і лендінг, на який веде реклама. І робіть це у вікні інкогніто — чому, пояснимо в розділі про помилки.

Пороги TTFB і LCP рекомендує Google, решта — наш практичний орієнтир для сайтів малого бізнесу, а не офіційний стандарт. Для порівняння: за даними Web Almanac 2025 від HTTP Archive, медіанна головна сторінка на мобільних важить близько 2,6 МБ — тож сайт на 1 МБ уже легший за більшість конкурентів.

20 дій: зведена таблиця

Зображення і медіа

1. Стисніть зображення і переведіть у WebP або AVIF

Фото з камери чи фотобанку важить 2–8 МБ, а для сайту достатньо 80–250 КБ. WebP зазвичай на 25–35% легший за JPEG тієї ж якості, AVIF — ще легший. Це найпростіша дія для власника сайту: перед завантаженням проганяйте фото через Squoosh чи аналог, а в CMS увімкніть автоматичну конвертацію. Мета — жодного зображення понад 300 КБ, за винятком рідкісних галерей у повному розмірі.

2. Віддавайте кожному екрану свій розмір

Смартфону з екраном завширшки 390 пікселів не потрібне зображення на 2 560. Атрибути srcset і sizes дозволяють браузеру самому обрати версію на 480, 800, 1 200 чи 1 920 пікселів. Сучасні фреймворки й WordPress генерують такі набори автоматично — перевірте, чи тема справді ними користується, а не підставляє оригінал.

3. Дайте пріоритет головному зображенню

Банер чи фото першого екрана має завантажуватися першим: прямо в HTML, з атрибутом fetchpriority="high", без лінивого завантаження і без підміни скриптом.

4. Ліниве завантаження — для всього, що нижче

Галереї, відгуки з фото, логотипи партнерів, iframe — усе, що не видно одразу, позначайте атрибутом loading="lazy". Браузер завантажить ці елементи, коли користувач прокрутить сторінку до них. На довгих лендінгах початкова вага сторінки зменшується в кілька разів. Головне — не застосовувати lazy до логотипа і першого екрана.

5. Поставте «фасади» на відео й карти

Вбудований плеєр YouTube тягне сотні кілобайтів скриптів ще до того, як хтось натисне «Відтворити». Вбудована Google Карта — так само. Рішення — фасад: показуємо картинку-превʼю з кнопкою, а справжній плеєр чи карту вантажимо після кліку. Фонове відео першого екрана на мобільних краще замінити статичним постером; якщо без нього ніяк — стисніть до 1–2 МБ і приберіть звукову доріжку.

Сторонні скрипти

6. Проведіть ревізію Google Tag Manager

Типова картина після кількох років роботи сайту: два лічильники аналітики, піксель давно завершеної кампанії, теги підрядника, з яким уже не співпрацюєте. Кожен тег — це запити, JavaScript і час процесора. Складіть таблицю «тег — навіщо — хто користується» і вимкніть усе, що не має власника.

7. Відкладіть чати й віджети

Онлайн-чат, кнопка зворотного дзвінка і віджет месенджерів не потрібні в першу секунду. Завантажуйте їх після першої взаємодії (прокрутка, дотик) або через 5–10 секунд після показу сторінки. Для відвідувача нічого не зміниться, а браузер звільниться саме тоді, коли людина читає перший екран і тягнеться до кнопки.

8. Відмовтеся від стрічок соцмереж і віджетів відгуків

Стрічка Instagram на головній чи віджет відгуків зі стороннього сервісу — це ще один комплект скриптів, шрифтів і зображень із чужого сервера, на швидкість якого ви не впливаєте. Краще поставити 6–9 статичних фото з посиланням на профіль, а реальні відгуки перенести на сторінку текстом із посиланням на першоджерело, наприклад на Google Maps. Бонус для SEO: текст на вашій сторінці індексується як ваш, а вміст стороннього віджета — ні.

Шрифти і CSS

9. Шрифти: 2–3 накреслення, WOFF2, на своєму сервері

Кожне накреслення (Regular, Medium, Bold, Italic) — окремий файл на 20–100 КБ, а з кирилицею ще більше. Залиште 2–3 накреслення або один змінний шрифт, розмістіть файли на своєму домені у форматі WOFF2 і підключайте лише потрібні набори символів — латиницю й кирилицю. Додайте font-display: swap, щоб текст одразу показувався системним шрифтом.

10. Критичний CSS — у сторінку, решту — відкласти

Візуальні конструктори та готові теми часто підключають на кожну сторінку стилі всіх віджетів, навіть невикористаних: сотні кілобайтів CSS там, де потрібні десятки. Стилі першого екрана варто вбудувати прямо в HTML, решту вантажити без блокування показу, а невикористані правила видалити. Вкладка Coverage у DevTools покаже, яка частка коду не використовується.

11. Іконки — SVG, а не іконочний шрифт

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

JavaScript

12. Додайте defer і розбийте код

Скрипти в head без атрибутів defer чи async зупиняють показ сторінки, доки не завантажаться і не виконаються. Переведіть некритичні скрипти на defer, а великі пакети розбийте на частини: калькулятор чи кошик мають вантажитися лише там, де вони є. На слабкому смартфоні зайвий JavaScript особливо дорогий: його треба не лише завантажити, а й розібрати та виконати.

13. Приберіть важкі слайдери й бібліотеки анімацій

Каруселі, паралакс, «поява блоків під час прокрутки» часто тягнуть jQuery і кілька бібліотек заради ефекту, який робиться кількома рядками CSS. Анімуйте лише transform і opacity — браузер обробляє їх найдешевше.

14. Увімкніть попереднє завантаження сторінок

Speculation Rules API дозволяє браузерам на основі Chromium заздалегідь завантажувати сторінку, на яку користувач, найімовірніше, перейде, — наприклад, коли він уже натискає на посилання. Перехід стає майже миттєвим. У WordPress, починаючи з версії 6.8, таке попереднє завантаження в обережному режимі ввімкнене типово; на інших платформах його додають кількома рядками коду.

Сервер і доставка

15. Увімкніть повносторінкове кешування

Без кешу CMS на кожне відкриття сторінки запускає PHP, робить десятки запитів до бази і збирає HTML заново. З кешем сервер віддає готову сторінку, і відповідь скорочується з 1–2 секунд до 0,1–0,3 секунди. Для лендінгу, візитки і блогу це найважливіша серверна дія. У магазині кешують каталог і картки товарів, але не кошик і особистий кабінет.

16. CDN, HTTP/3 і стиснення Brotli

CDN зберігає копії файлів на серверах ближче до відвідувача і бере на себе частину навантаження. Більшості сайтів малого бізнесу вистачає безкоштовного тарифу Cloudflare: разом із ним ви отримуєте HTTP/3, стиснення Brotli і базовий захист від DDoS. Перевірте, щоб CDN кешував не лише картинки, а за можливості й HTML — інакше найповільніша ланка, відповідь сервера, лишиться без змін.

17. Сучасний PHP, OPcache і обʼєктний кеш

Для сайтів на PHP (WordPress, OpenCart тощо) версія мови впливає і на швидкість, і на безпеку: PHP 8.1 перестав отримувати оновлення безпеки 31 грудня 2025 року, а 8.2 отримуватиме їх до кінця 2026-го. Орієнтуйтеся на 8.3 або новішу версію. Перевірте, що на хостингу ввімкнено OPcache, а для магазину з тисячами товарів — обʼєктний кеш (Redis чи Memcached), який розвантажує базу даних. Тариф за 50–80 грн на місяць із десятками сусідів на одному сервері рідко дає стабільну відповідь швидше за секунду.

18. Заголовки кешування і bfcache

Статичні файли (CSS, JS, шрифти, зображення) з версією в назві можна кешувати в браузері на рік — повторний візит стане значно швидшим. Окремо перевірте кеш «назад-вперед» (bfcache): він миттєво показує попередню сторінку, коли людина натискає «Назад». Його вимикають застарілі обробники unload і заголовок Cache-Control: no-store на звичайних сторінках. Перевірити можна в DevTools → Application → Back/forward cache.

Платформа

19. Почистіть плагіни, модулі й базу даних

Сайт на WordPress із 40 плагінами — звична картина, але кожен плагін може додавати власні стилі, скрипти й запити до бази на кожній сторінці. Вимикайте їх по одному і міряйте різницю, видаляйте те, що дублює функції або не використовується. Заодно очистьте базу: тисячі ревізій записів, прострочені тимчасові дані й спам-коментарі сповільнюють запити.

20. Якщо платформа — стеля, змінюйте платформу

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

Скільки часу і грошей це займе

Орієнтовні ринкові ціни станом на 2026 рік:

Наші ціни для орієнтиру: технічний SEO-аудит, у який входить і перевірка швидкості, — 4 900 ₴. Якщо латати старий сайт уже недоцільно, редизайн коштує 70% від ціни нового пакета (лендінг — від 6 200 ₴, сайт-візитка — від 8 300 ₴), а перенесення контенту і 301-редиректи вже враховано. На кожен сайт, який ми розробляємо, діє гарантія PageSpeed 90+ на мобільних: якщо показник нижчий — доопрацьовуємо безкоштовно.

Швидкість в українських реаліях

• Де стоїть сервер. Для українських відвідувачів сервер у Польщі чи Німеччині додає лише десятки мілісекунд затримки — це значно менше, ніж втрачається без кешу. Якщо хостинг в Україні, уточніть, як дата-центр працює під час відключень: генератори, резервні канали звʼязку.
• Сайт, що працює на слабкому сигналі. Текст, ціна і кнопка дзвінка мають зʼявлятися раніше за декоративні елементи, а форма заявки — відправлятися, навіть якщо решта сторінки ще довантажується. Що менше сторонніх доменів, то менше точок, які гальмують незалежно від вас.

Що ще, крім швидкості, перевірити на смартфоні — кнопки, форми, шрифти, — читайте у статті Мобільна версія сайту: чому вона важливіша за десктоп.

8 помилок, через які прискорення не працює

1. Тестувати сайт, не вийшовши з адмінки. Для адміністратора кеш зазвичай вимкнений, тож ви бачите повільнішу версію, ніж клієнти, і «лагодите» те, що не зламано. Міряйте в режимі інкогніто.
2. Агресивно обʼєднувати й мінімізувати JavaScript без перевірки. Сторінка стає швидшою, але ламаються форма, кошик чи оплата. Після кожної зміни — тестова заявка і тестове замовлення.
3. Конвертувати у WebP, але віддавати той самий розмір. Фото на 3 000 пікселів у WebP усе одно важке.
4. Ставити lazy-loading на все підряд, включно з логотипом і банером першого екрана.
5. Купувати дорожчий хостинг замість аудиту. Якщо сторінка тягне 2 МБ скриптів, потужніший сервер цього не виправить.
6. Підключити CDN без кешування HTML. Картинки летять, а відповідь сервера, як і раніше, 1,5 секунди.
7. Оптимізувати головну, забувши про рекламний лендінг. Гроші витрачаються на сторінку, на яку веде Google Ads, — її і міряйте першою.
8. Додавати нові теги й віджети без контролю. Маркетолог за пʼять хвилин додає в GTM новий піксель — і тижнева робота зникає. Правило: новий скрипт — лише після заміру.

Чеклист: швидкий сайт за 12 пунктів

• Заміряно шаблони (головна, послуга, категорія, товар, стаття, рекламний лендінг) в інкогніто
• Жодне зображення не важить понад 300 КБ, формат — WebP або AVIF
• Зображення мають набори розмірів під різні екрани
• Головне зображення першого екрана — з високим пріоритетом і без lazy
• YouTube і карти — через фасад, фонового відео на мобільних немає
• У GTM лише теги, в яких є власник і мета
• Чати й віджети вантажаться після взаємодії або із затримкою
• Не більше 2–3 накреслень шрифтів, WOFF2, на своєму домені
• Некритичні скрипти — з defer, важкі модулі — лише на своїх сторінках
• Увімкнено повносторінковий кеш і CDN; TTFB до 0,8 с
• PHP 8.3 або новіший, плагіни й модулі почищено
• Після кожної суттєвої зміни — повторний замір і тестова заявка

Висновок

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

З чого почати саме вам, підкаже безкоштовний онлайн-аудит сайту: приблизно за хвилину він покаже оцінку Google PageSpeed для смартфонів і те, що гальмує сторінку. Коли платформа вже стала стелею, замовте редизайн сайту — нову версію здаємо з PageSpeed 90+ на мобільних. А щоб через пів року новий віджет чи банер не перекреслив результат, віддайте сайт на технічну підтримку: оновлення й моніторинг входять уже в тариф Care Base за 990 ₴ на місяць.