Сайт відкривається на робочому ноутбуці й виглядає нормально. А потім клієнт каже, що на телефоні він вантажився цілу вічність, або ви самі відкриваєте його з мобільного інтернету на парковці й дивитесь, як логотип самотньо висить на білому екрані, поки решта наздоганяє. Ви гуглите, чому сайт повільно завантажується, запускаєте безкоштовний тест швидкості й отримуєте сторінку червоних позначок і термінів, з яких не зрозуміло, що саме робити.
Звичні висновки: потрібен дорожчий хостинг або треба переробити весь сайт. Іноді щось із цього справді так. Частіше причин небагато, їх видно у звичайному браузері, а дешеві виправлення йдуть першими. Повільний сайт — не просто прикрість: відвідувач, який чекав достатньо, щоб роздратуватися, рідко заповнює форму, і це одна з тихих причин, чому на сайт заходять, але не пишуть.
Чому сайт повільно завантажується: типові причини
Зображення набагато більші за місце, яке вони займають. Фото потрапляють на сторінку прямо з камери чи фотостоку в кілька разів ширшими за блок, у якому стоять, і браузер завантажує весь файл, перш ніж його зменшити. Ознака: структура сторінки з’являється швидко, а картинки підвантажуються одна за одною, і на телефоні сайт помітно гірший, ніж на дротовому комп’ютері.
Забагато плагінів, віджетів і скриптів. Сайт на CMS чи конструкторі роками обростає доповненнями: слайдер, віджет чату, кілька тегів аналітики, банер про cookie, модуль бронювання, яким уже ніхто не користується, автовідтворення відео в шапці. Кожне вантажить свій код, перш ніж сторінка заспокоїться. Ознака: сторінка ще довго «працює» після того, як текст уже видно, кнопки мить не реагують, а верстка стрибає, коли докочуються нові частини.
Сервер повільно відповідає. Перш ніж з’явиться хоч щось, браузер чекає на сервер. Дешевий спільний хостинг, CMS, яка збирає кожну сторінку з нуля на кожен візит, бо кешування вимкнене, або база даних, що роками розросталася, — усе це виглядає однаково: мить білого екрана, а потім усе одразу.
Відвідувач далеко від сервера. Сайт, розміщений в одній країні й відкритий з іншої, витрачає час на саму відстань: удома він швидкий, за кордоном повільний, і вдома цього ніхто не помічає. Ознака: скарги приходять з певного регіону.
Щось на сторінці блокує все інше. Шрифт, який має завантажитися, перш ніж можна намалювати текст, карта, вбудована на кожну сторінку, скрипт, що чекає на сторонній сервіс, у якого поганий день. Ознака: в одні дні сайт нормальний, в інші ні, або він лишається порожнім, доки не з’явиться один конкретний елемент.
Як зрозуміти, яка причина ваша
Усе нижче робиться з телефоном, ноутбуком і безкоштовними інструментами, які вже є у вашому браузері. Ідіть по порядку: перша перевірка, яка не пройде, зазвичай і є вашою причиною.
- Відкрийте сайт на телефоні через мобільний інтернет, а не Wi-Fi. Приблизно засічіть час за годинником — від дотику до посилання до моменту, коли можна читати й натискати, — а потім те саме на ноутбуці. Якщо на телефоні різко гірше, справа в зображеннях і важких скриптах.
- Дивіться, що з’являється першим. Перезавантажте й запам’ятайте порядок. Білий екран, а потім усе одразу — це сервер; спочатку текст, а картинки підтягуються — це зображення; верстка стрибає й кнопки не реагують — це скрипти.
- Запустіть один безкоштовний тест швидкості від великої пошукової системи чи розробника браузера й не дивіться на оцінку. Читайте лише список найбільших файлів і запропоновані покращення: там простими словами названо завеликі зображення, невикористані скрипти й повільну відповідь сервера. Перевіряйте сторінку послуги, а не лише головну.
- Відкрийте інструменти розробника в браузері на вкладці мережі, перезавантажте сторінку й відсортуйте за розміром. Якщо найбільші записи — файли зображень, набагато більші за видиму картинку, ось і відповідь; якщо в списку десятки скриптів із доменів, яких ви не впізнаєте, рахуйте плагіни.
- Випишіть кожен плагін, віджет і сторонній тег на сайті й навпроти кожного напишіть, хто ним користується і навіщо. З нашого досвіду, список виходить довшим, ніж усі очікували, і частина його мертва.
- Перевірте тариф хостингу й налаштування кешування. Зайдіть у панель хостингу й подивіться, за що ви платите і чи ввімкнене кешування сторінок. Якщо не знаєте — знає той, хто робив сайт, і це питання на один лист.
- Перевірте з інших ваших ринків. Попросіть колегу за кордоном засікти ту саму сторінку або скористайтеся безкоштовним тестом, у якому можна вибрати місце перевірки.
Що виправляти і в якому порядку
Спочатку найдешевше. З нашого досвіду більшість сайтів повертає більшу частину швидкості на перших трьох кроках, без переробки.
- Зменшіть і стисніть зображення. Експортуйте фото в тому розмірі, який реально використовує верстка, у сучасному вебформаті й замініть оригінали; на CMS плагін оптимізації зображень обробить усю бібліотеку за один прохід. Це найпоширеніше виправлення, і воно коштує один вечір.
- Приберіть те, чим не користуються. Вимкніть і видаліть кожен плагін, віджет і тег, для якого ніхто не зміг назвати користувача, об’єднайте дубльовані теги аналітики в один, замініть живу карту статичною картинкою з посиланням на карту й увімкніть відкладене завантаження для всього, що нижче першого екрана.
- Увімкніть кешування. Кешування сторінок означає, що сервер віддає готову копію замість того, щоб збирати сторінку для кожного відвідувача. Більшість CMS і хостингів пропонують це як налаштування або плагін.
- Виправте елементи, що блокують. Завантажуйте шрифти так, щоб текст одразу показувався запасним шрифтом і підмінявся пізніше, відкладіть скрипти, не потрібні для першого екрана, і приберіть відео з шапки. Зазвичай це година розробника, а не проєкт.
- Наблизьте сайт до відвідувача. Мережа доставки контенту (CDN) зберігає копії ваших статичних файлів у багатьох регіонах, тож відвідувач з іншої країни завантажує їх з найближчого. Більшість хостингів і реєстраторів доменів її пропонують; якщо ви продаєте за кордон, цей пункт має стояти в списку раніше за будь-який апгрейд хостингу.
- Змінюйте хостинг лише тоді, коли сервер доведено повільний. Якщо очікування білого екрана лишається після ввімкнення кешування, вузьке місце — тариф. Переходьте на план, який відповідає трафіку, а не на найдешевший, що технічно працює.
- Перебудуйте найважчі сторінки, а не сайт. Якщо шаблон тягне десятки компонентів на кожну сторінку, часто досить зібрати ключові посадкові сторінки на легшій структурі. У наших проєктах з розробки сайтів швидкість — критерій запуску, і саме на цьому кроці сторінку проєктують під те, що вона має робити, а не під те, що пропонує тема.
Швидкість впливає й на те, як сайт знаходять: пошукові системи вимірюють ті самі очікування, які відчувають ваші відвідувачі, тож зміни вище — частина будь-якої чесної роботи з SEO. А якщо сайт довго був повільним, частина звернень загубилася непомітно; облік того, звідки прийшло кожне звернення, — саме з нього починаються наші проєкти з CRM та аналітики, — покаже, чи змінило виправлення хоч щось.
Що вимірювати
- Час до придатної сторінки на телефоні через мобільний інтернет, засічений вручну однаково щоразу, щомісяця.
- Вагу сторінки й кількість запитів для головних посадкових сторінок, з вкладки мережі, до і після кожної зміни.
- Час відповіді сервера з тесту швидкості — очікування, поки хоч щось прийде, — який має впасти після ввімкнення кешування.
- Показник відмов і заповнені форми на змінених сторінках, у вашій аналітиці, за кілька тижнів після зміни проти кількох тижнів до.
Де підключаємось ми
Власник із вільним вечором, годиною розробника й доступом до хостингу може зробити все це сам. Ми додаємо порядок: зображення й мертвий вантаж раніше за хостинг, кешування раніше за переробку, і вимір до та після, щоб покращення було фактом, а не відчуттям. Якщо діагностику зручніше віддати, для старту досить короткого брифу з адресою сайту й сторінками, які важать найбільше.
