Головна › Блог

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

Опубліковано

·

Автори: Ярослава Баржицька та Єва Мочайло

Перевірка показника швидкість сайту в PageSpeed Insights на смартфоні

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

Уявіть: клієнтка побачила вашу рекламу в Instagram, натиснула на посилання, стоїть на зупинці з мобільним інтернетом. Сторінка біла, крутиться значок завантаження, минає три секунди, п’ять. Вона повертається до стрічки. Ви заплатили за клік, але не отримали навіть шансу показати свою пропозицію.

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

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

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

Затримка б’є одразу з двох боків. По-перше, люди йдуть: що довше порожній екран, то більше відвідувачів закривають вкладку, так і не побачивши ваших цін. По-друге, Google враховує зручність сторінок, зокрема показники завантаження, коли вирішує, кого показувати вище.

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

Окремо про рекламу. Якщо ви платите за кліки в Google Ads чи соцмережах, кожна людина, яка не дочекалася завантаження, — це гроші, витрачені даремно. Повільна посадкова сторінка непомітно підвищує вартість кожної заявки, і в звітах рекламного кабінету цього не видно: там клік зараховано, а що було далі — ні.

Як побачити проблему у власних даних

Якщо на сайті є Google Analytics, порівняйте поведінку відвідувачів з телефонів і з комп’ютерів. Коли мобільні користувачі значно частіше йдуть, не переглянувши жодної іншої сторінки, а час на сайті в них помітно коротший, повільна мобільна версія — один із перших підозрюваних. Це не доказ, а підказка, з чого почати перевірку. Так само корисно запитати кількох знайомих відкрити сайт зі своїх телефонів і чесно сказати, чи довелося чекати.

Як повільне завантаження виглядає очима клієнта

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

Салон і банер-слайдер

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

Ремонтна бригада й галерея об’єктів

Сторінка «Наші роботи» містить 60 фото прямо з камери. На Wi-Fi вдома власник цього не помічає. Людина на будівельному ринку з мобільним інтернетом гортає порожні сірі квадрати й так і не бачить жодного результату.

Магазин і десяток віджетів

Чат, спливаюче вікно зі знижкою, кнопка зворотного дзвінка, стрічка Instagram, кілька лічильників. Сторінка товару ніби вже з’явилася, але не реагує на натискання «Купити» ще кілька секунд, бо браузер зайнятий сторонніми скриптами.

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

Перша діагностика за 15 хвилин

Для першої перевірки не потрібно нічого встановлювати. Достатньо одного-двох онлайн-сервісів і власного телефона.

ІнструментЩо показуєКому зручно
PageSpeed Insights (Google)Оцінку 0–100 і Core Web Vitals для мобільних і ПКУсім, починати з нього
Google Search Console, звіт «Основні веб-показники»Які групи сторінок проблемні на реальних відвідувачахВласникам, у кого вже підключена консоль
Інструменти розробника в Chrome (Lighthouse)Те саме, що PageSpeed, плюс детальні підказкиТим, хто не боїться технічних деталей
Ваш телефон із мобільним інтернетомЯк сайт відчуває реальна людинаОбов’язково всім
  1. Відкрийте PageSpeed Insights, вставте адресу головної сторінки й натисніть «Аналізувати».
  2. Перемкніться на вкладку «Мобільний пристрій» — вона зазвичай суворіша.
  3. Повторіть для 2–3 найважливіших сторінок: послуги, ціни, контакти. Головна часто не найповільніша.
  4. Відкрийте ті самі сторінки на телефоні з вимкненим Wi-Fi і засічіть, коли з’являються заголовок і кнопка.
  5. Зробіть скриншоти результатів, щоб потім порівняти після змін.

Якщо сайт ще не підключено до Google Search Console, зробіть це зараз: консоль знадобиться не лише для швидкості, а й для перевірки індексації. Без неї важко зрозуміти, чому сторінки не з’являються в пошуку, — про це окремо в статті чому сайт не показується в Google.

Core Web Vitals людською мовою

Загальна оцінка від 0 до 100 — орієнтир, а не вирок. Цифра може коливатися від перевірки до перевірки на 5–10 балів, і це нормально. Важливіше дивитися на три показники Core Web Vitals, які Google використовує для оцінки зручності сторінки:

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

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

Лабораторні й реальні дані

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

Що зазвичай покращує кожен показник

  • Поганий LCP найчастіше виправляють стисненням головного фото чи банера, відмовою від слайдера на першому екрані й кешуванням.
  • Поганий INP зазвичай пов’язаний зі сторонніми скриптами: чатами, спливаючими вікнами, пікселями. Допомагає ревізія віджетів і відкладене завантаження того, що не потрібне одразу.
  • Поганий CLS виникає, коли фото, банери чи вбудовані блоки не мають заданих розмірів і «розсувають» сторінку. Його виправляють у шаблоні сайту, часто це робота для розробника.

Шість головних причин повільності

Неоптимізовані фотографії

Класика: фото інтер’єру салону чи готової кухні завантажили прямо з камери — 5–8 МБ і 6000 пікселів завширшки, хоча на сторінці воно показується шириною 800. Одна така галерея важить більше, ніж решта сайту разом.

Зайві віджети й скрипти

Онлайн-чат, кнопка зворотного дзвінка, вбудована стрічка Instagram, два лічильники аналітики, піксель реклами, карта на кожній сторінці. Кожен з них окремо «легкий», але разом вони можуть суттєво збільшити час завантаження.

Важкі теми й конструктори

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

Відео й анімації на першому екрані

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

Шрифти

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

Слабкий хостинг

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

Фотографії: стиснення крок за кроком

Фото — найчастіша і найпростіша для виправлення причина повільного завантаження. Для цього не потрібен програміст: достатньо безкоштовного онлайн-компресора чи графічного редактора й доступу до адмінпанелі.

Де фото на сайтіОрієнтовна ширинаОрієнтовна вага після стиснення
Великий банер на першому екрані1600–2000 pxдо 200–300 КБ
Фото в тексті чи блоці послуги800–1200 pxдо 100–150 КБ
Мініатюри в галереї чи каталозі400–600 pxдо 50–80 КБ
Логотип, іконкиза розміром показу, бажано SVGкілька КБ
  1. Зберіть усі фото, які збираєтеся замінити, в одну папку на комп’ютері.
  2. Зменште ширину відповідно до таблиці. Більше, ніж показує екран, не потрібно.
  3. Збережіть у форматі WebP або стисніть JPG з якістю близько 75–80%. Різницю на телефоні зазвичай не видно.
  4. Дайте файлам зрозумілі назви латиницею: manikiur-hel-lak.webp замість IMG_4532.jpg.
  5. Завантажте на сайт замість старих і додайте атрибут alt з описом, що на фото.
  6. Перевірте, чи увімкнене «ліниве завантаження» (lazy loading) для фото нижче першого екрана — у більшості сучасних CMS воно є стандартно.

Якщо фото сотні, як у каталозі

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

Ревізія віджетів і плагінів: що залишити

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

  • Чат і кнопка зворотного дзвінка. Залиште один спосіб зв’язку, який справді працює. Часто клікабельний телефон і посилання на месенджер замінюють обидва.
  • Стрічка Instagram. Краще кілька статичних фото з посиланням на профіль, ніж вбудована стрічка, яка тягне десятки файлів.
  • Карта Google. Показуйте лише на сторінці контактів, а не в підвалі кожної сторінки.
  • Лічильники аналітики. Якщо їх два-три і ви дивитеся лише в один, решту видаліть.
  • Плагіни WordPress. Вимкніть і видаліть ті, що не використовуються. Кожен — потенційне сповільнення й діра в безпеці.

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

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

Хостинг і сервер: коли проблема не на сторінці

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

Як зрозуміти, що винен хостинг

  1. Відкрийте в PageSpeed звіт і знайдіть пункт про початковий час відповіді сервера.
  2. Перевірте найлегшу сторінку сайту, наприклад контакти без карти. Якщо вона теж повільна, справа не в фото.
  3. Повторіть перевірку в різний час доби. Якщо ввечері значно гірше, сервер, імовірно, перевантажений.
  4. Напишіть у підтримку хостингу з результатами перевірки й запитайте, чи є обмеження на вашому тарифі.

Що допомагає в такому разі: увімкнути кешування (у більшості CMS і на хороших хостингах це одна галочка або безкоштовний плагін), оновити версію PHP чи CMS, перейти на тариф із ресурсами під ваш сайт, обрати сервер ближче до аудиторії. Для невеликого сайту послуг зазвичай вистачає звичайного віртуального хостингу, але між тарифами за схожу ціну буває велика різниця в якості.

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

Міфи, через які власники витрачають час даремно

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

  • «У мене все швидко відкривається». Ви заходите з того самого комп’ютера, де браузер уже зберіг файли сайту. Новий відвідувач з телефона завантажує все з нуля.
  • «Треба поставити плагін-прискорювач, і все». Плагіни кешування корисні, але вони не зменшать фото на 8 МБ і не приберуть п’ять зайвих віджетів. Іноді кілька таких плагінів одночасно конфліктують і ламають сторінки.
  • «Чим менше тексту, тим швидше». Текст важить кілобайти, а фото й скрипти — мегабайти. Скорочувати корисний опис послуги заради швидкості немає сенсу; про те, як писати такі описи, — у статті як написати SEO-текст.
  • «Головне — 100 балів». Сайт з оцінкою 75–85 на мобільних і зеленими Core Web Vitals для малого бізнесу цілком достатньо. Різниця між 90 і 100 вже не впливає на клієнтів.
  • «Це разова робота». Без контролю сайт поступово обростає новими фото, банерами й кодом і знову сповільнюється.
  • «Мобільна версія — це просто зменшений сайт». Насправді телефон завантажує ті самі важкі файли, лише показує їх меншими. Якщо банер важить 4 МБ, на смартфоні він важить стільки ж.

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

Що зробити самому, а що доручити фахівцю

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

ЗадачаХто зазвичай робитьОрієнтовний час
Перевірка в PageSpeed і на телефоніВласник15–20 хвилин
Стиснення й заміна фотоВласник з доступом до адмінпанелі1–3 години
Прибирання зайвих віджетівВласник або адміністратор30–60 хвилин
Увімкнення кешуванняВласник за інструкцією хостингу або фахівець15–60 хвилин
Аналіз теми, коду, шрифтів і скриптівФахівецьвід кількох годин
Налаштування сервера, перенесення на інший хостингФахівецьвід кількох годин до кількох днів

Якщо після стиснення фото й прибирання віджетів сторінки все одно завантажуються 5–6 секунд і довше, допоможе технічна перевірка. На SEO-аудиті сайту завантаження розглядають разом з індексацією, дублікатами та структурою, бо повільність часто лише один симптом. Що саме перевіряють під час аудиту, детально описано в статті SEO-аудит сайту: що перевіряють і навіщо. У GuideWay експрес-аудит коштує 49 $, повний — 199 $; орієнтовні ціни на інші роботи зібрано на сторінці цін і пакетів.

Якщо стежити за сайтом самостійно немає часу, оновлення CMS, плагінів і регулярні перевірки можна передати на постійну техпідтримку: такі послуги зазвичай оплачуються щомісяця, орієнтовно від 30 $ на місяць. Головне — домовитися, що саме входить у підтримку і як часто ви отримуватимете звіт.

Як утримати швидкість сайту після оптимізації

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

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

  • стискайте кожне фото перед завантаженням, навіть якщо «воно ж одне»;
  • перед встановленням нового віджета запитайте себе, чи принесе він заявки;
  • раз на квартал перевіряйте 2–3 ключові сторінки в PageSpeed і порівнюйте зі старими скриншотами;
  • оновлюйте CMS і плагіни або доручіть це техпідтримці;
  • домовтеся з усіма, хто має доступ до сайту, про ті самі правила для фото.

Як говорити з підрядником про швидкість сайту

Багато власників не знають, як сформулювати задачу, і отримують відповідь «усе нормально» або рахунок за «оптимізацію» без зрозумілого результату. Щоб цього не сталося, ставте задачу через вимірювані речі й просіть показати результат до і після.

  • Назвіть конкретні сторінки, які треба прискорити, і додайте скриншоти PageSpeed для мобільної версії.
  • Попросіть пояснити простими словами, що саме гальмує кожну сторінку і що буде змінено.
  • Домовтеся про мету: наприклад, зелені Core Web Vitals на мобільних, а не «100 балів».
  • Попросіть зробити резервну копію перед змінами і перелік видалених плагінів чи скриптів.
  • Після робіт перевірте сторінки самі — і в PageSpeed, і на телефоні з мобільним інтернетом.

Такий підхід захищає і вас, і виконавця: обидві сторони однаково розуміють, що вважати виконаною роботою.

Сім коротких кроків на цей тиждень

Щоб усе прочитане перетворилося на результат, розбийте роботу на короткі кроки по 20–40 хвилин.

  1. День 1. Перевірте головну й дві найважливіші сторінки в PageSpeed і на телефоні, збережіть скриншоти.
  2. День 2. Складіть список усіх віджетів і плагінів, позначте, які реально приносять заявки.
  3. День 3. Приберіть зайві віджети, перенесіть карту на сторінку контактів.
  4. День 4–5. Стисніть і замініть фото на першому екрані й на сторінках послуг.
  5. День 6. Увімкніть кешування за інструкцією хостингу або попросіть про це підрядника.
  6. День 7. Повторіть перевірку й порівняйте з першим днем. Якщо покращення немає, це сигнал звернутися до фахівця.

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

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

Часті запитання

Яка нормальна швидкість завантаження сайту?

Орієнтир від Google — щоб головний вміст сторінки з’являвся до 2,5 секунди, а сайт реагував на натискання до 200 мілісекунд. Для малого бізнесу добрим результатом вважається, коли на мобільному інтернеті людина бачить заголовок, фото й кнопку запису за 2–3 секунди. Усе, що довше 4–5 секунд, варто виправляти в першу чергу.

Чому в PageSpeed Insights щоразу різні бали?

Тест імітує завантаження з певного сервера й мережі, тому результат коливається залежно від навантаження на ваш хостинг, сторонніх скриптів і реклами. Різниця в 5–10 балів між перевірками — нормальна. Робіть 2–3 перевірки поспіль і орієнтуйтеся на середнє значення та на показники Core Web Vitals, а не на одну цифру.

Чи впливає швидкість на позиції в Google?

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

Чи допоможе перехід на дорожчий хостинг?

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

У якому форматі завантажувати фото на сайт?

Для більшості фото добре підходить WebP: він легший за JPG за схожої якості й підтримується сучасними браузерами. Якщо ваша CMS не працює з WebP, використовуйте JPG, стиснений до якості близько 75–80%. PNG залиште для логотипів і графіки з прозорим фоном, а іконки по можливості зберігайте у SVG.

Чому сайт швидкий на комп’ютері й повільний на телефоні?

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

Як часто перевіряти швидкість завантаження?

Достатньо раз на квартал для 2–3 ключових сторінок, а також після кожної помітної зміни: нового дизайну, галереї, віджета чи плагіна. Якщо ви запускаєте рекламу, перевірте посадкову сторінку перед стартом кампанії. Зберігайте результати, щоб бачити динаміку й вчасно помітити, що сайт почав сповільнюватися.

Над статтею працювали

Ярослава Баржицька, SEO-спеціаліст GuideWay
Ярослава БаржицькаSEO-спеціаліст, 20 років у просуванні сайтів
Єва Мочайло, розробниця сайтів GuideWay
Єва МочайлоРозробка сайтів, 4 роки досвіду

GuideWay — веб-студія з України: створюємо сайти для малого бізнесу й просуваємо їх у Google. Більше про нас

Потрібен сайт, який приводить клієнтів?

Готовий сайт для вашої ніші з SEO з першого дня — від 290 $ і від 5 робочих днів. Консультація безкоштовна.