Перейти до вмісту
webgrid

Чому сайт повільно завантажується і як його прискорити

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

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

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

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

Друга причина — пошук. Google враховує швидкість і зручність сторінки, коли вирішує, кого показати вище. Повільний сайт не обов'язково вилетить з видачі, але програватиме конкурентам з подібним вмістом.

Повільний сайт втрачає клієнтів тихо: ніхто не напише вам, що пішов, — просто заявок стане менше.

Як перевірити швидкість самому за хвилину

Не треба бути програмістом. Є два прості способи, і обидва безкоштовні.

  1. Відкрийте нашу безкоштовну перевірку сайту, вставте адресу й зачекайте близько 10 секунд. Ви отримаєте 36 перевірок: швидкість, SEO, доступність, безпеку — з поясненнями, що не так.
  2. Відкрийте PageSpeed Insights від Google, вставте ту саму адресу й подивіться вкладку «Мобільний пристрій». Саме мобільний результат важливіший, бо з телефонів заходить більшість людей.
  3. Перевірте не лише головну, а й сторінку товару чи послуги — часто гальмує саме вона.
  4. Відкрийте сайт зі свого телефона через мобільний інтернет, а не через домашній Wi-Fi. Так ви побачите те, що бачить клієнт.

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

Що означають показники простими словами

PageSpeed показує багато цифр, але для власника бізнесу важливі три основні. Їх ще називають Core Web Vitals — ключові показники якості сторінки.

  • LCP — коли з'явився головний вміст: велике фото, банер чи заголовок першого екрана. Це момент, коли людина бачить, що сайт працює. Добрим вважається результат до 2,5 секунди.
  • CLS — стрибки макета. Ви хочете натиснути кнопку, а вона раптом з'їжджає вниз, бо зверху довантажився банер. Чим менше таких стрибків, тим краще.
  • INP — реакція на натискання. Скільки минає від того, як людина торкнулася кнопки чи меню, до того, як сайт відреагував. Якщо сайт «думає» після кожного дотику, це дратує.

Загальна оцінка від 0 до 100 — це зведення цих та інших показників. Гнатися за ідеальними 100 не обов'язково, головне — вийти в зелену зону за трьома основними.

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

Типові причини повільного сайту

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

  1. Величезні фото без стиснення. Знімок з телефона чи фотоапарата важить кілька мегабайт, а на сайті він показується розміром з долоню. Браузер усе одно завантажує весь файл.
  2. Десятки плагінів WordPress. Кожен плагін додає свої скрипти й стилі на всі сторінки, навіть там, де він не потрібен. Слайдер, форма, соцкнопки, ще один слайдер — і сторінка тягне за собою купу зайвого коду.
  3. Дешевий хостинг. Сервер за кілька доларів на місяць ділить ресурси з сотнями інших сайтів. Навіть легкий сайт на ньому може довго «думати» перед відповіддю.
  4. Сторонні віджети й лічильники. Онлайн-чати, кілька систем аналітики, пікселі реклами, віджети відгуків — кожен завантажується з чужого сервера й гальмує сторінку.
  5. Шрифти. Кілька фірмових шрифтів у різних варіантах накреслення — це ще кілька файлів, без яких текст може не з'являтися або «стрибати».
  6. Відсутність кешу. Без кешування сервер щоразу заново збирає сторінку для кожного відвідувача, замість того щоб віддати готову копію.
  7. Застаріла версія PHP. Багато сайтів на WordPress досі працюють на старій версії мови, на якій вони написані. Нові версії помітно швидші й безпечніші.

Що можна зробити самому

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

  • Перед завантаженням стискайте фото: безкоштовні онлайн-сервіси зменшують вагу в рази без помітної втрати якості. Для сайту зазвичай достатньо ширини 1600–2000 пікселів.
  • Пройдіться списком плагінів і вимкніть ті, якими ніхто не користується. Перед цим зробіть резервну копію.
  • Приберіть зайві віджети й лічильники: якщо на сайті три системи аналітики, а дивитеся ви одну, дві інші лише гальмують.
  • Перевірте в панелі хостингу версію PHP — часто її можна змінити одним перемикачем. Але після зміни обов'язково пройдіться сайтом і перевірте форми та кошик.

Якщо щось пішло не так після зміни — відкотіть її. Експериментувати на живому сайті без резервної копії не варто.

Що краще доручити розробнику

Глибші речі потребують доступу до коду й сервера та розуміння, як усе пов'язано. Сюди належать налаштування кешування й стиснення на сервері, автоматичне перетворення фото в сучасні формати, відкладене завантаження скриптів і зображень, підключення шрифтів без стрибків, прибирання зайвого коду з теми, переїзд на кращий хостинг.

Ці правки легко зробити неправильно: зламати форму замовлення, кошик чи аналітику. Тому ми спершу перевіряємо сайт, складаємо список конкретних причин і лише потім беремося за виправлення — від найвідчутніших до дрібних.

Після роботи ми повторюємо ту саму перевірку і показуємо вам результат до і після. Окремо проходимо ключові сценарії: оформлення замовлення, відправку форми, пошук, роботу на телефоні. Прискорення не має сенсу, якщо по дорозі зламалася кнопка «Купити».

Скільки це коштує в нас. Якщо проблема локальна — стиснути фото, налаштувати кеш, прибрати кілька важких скриптів, — це задача на кілька годин за 2 200 ₴. Якщо ж потрібне комплексне прискорення до зелених показників PageSpeed, з переглядом теми, плагінів і хостингу, — це велике доопрацювання від 9 900 ₴. Детальніше — на сторінці доопрацювання сайтів. Предоплата 50 %, решта — після того, як ви перевірите результат.

Як ми робимо швидкі сайти з самого початку

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

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

Приклад — наш каталог Peony Collection на 124 сорти півоній. Він зібраний статикою: сторінки готуються заздалегідь, і сервер просто віддає готовий файл, нічого не обчислюючи на льоту. Фото стискаються автоматично, зайвих скриптів немає. У результаті каталог відкривається практично миттєво навіть з телефона. Інші наші роботи можна переглянути в портфоліо.

Підсумок: з чого почати

Почніть з простої перевірки: запустіть безкоштовну перевірку сайту і PageSpeed для мобільної версії. Подивіться на три показники — LCP, CLS та INP — і на список зауважень. Найчастіше винні важкі фото, зайві плагіни, віджети й слабкий хостинг, і частину з цього ви можете прибрати самі.

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

Напрям за темою статтіДоопрацювання та виправлення сайтівПомилки, повільне завантаження, верстка на телефоні, віруси й переїзди. Беремося за готові сайти на будь-якому рушії.

Потрібна така сама система?

Розкажіть про задачу — відповімо, скільки це коштує і скільки часу займе.

Написати в Telegram

Інші статті