Швидкість завантаження сайту, її оцінка та вплив на видачу

Чим довше завантажується веб-сторінка, тим більша ймовірність, що відвідувач не дочекається кінця завантаження і покине ресурс. І піде куди-небудь, де його не змусять чекати так довго. “Довго” – в понятті сучасного інтернету, це більше 3 секунд.

Особливо критичним питання швидкості завантаження сайту стає для тих користувачів, які переглядають інтернет через свій смартфон. Без оптимізації цього технічного параметра ресурсу всі інші дії по його SEO-просуванню і поліпшенню втрачають сенс. Фахівці Rubika надали свої рекомендації, як дізнатися швидкість завантаження сайту, і що робити, якщо вона залишає бажати кращого.

Швидкість завантаження та SEO

Побічно, швидкість, з якою завантажується веб-сторінка, впливає на її просування в пошукових системах, зокрема – в Google. Ще в 2010 році представники корпорації заявили про те, що швидкість завантаження буде входить у список основних чинників ранжирування.

У 2017 році все стало набагато серйозніше. Google випустив свій пошуковий алгоритм “mobile-first”. Він відстежує наявність у веб-сайтів адаптивної версії (та її якість) для перегляду на мобільних пристроях, і так, швидкість завантаження сайту теж входить у список параметрів, які слід перевірити.

Дослідження SOASTA за 2017 рік підтверджують, що навіть зростання часу, за яке завантажується сторінка, з 1 до 10 секунд збільшує ризик відмови на 127%.

Інші дослідження, проведені агентством Unbounce серед активних прихильників покупок в інтернеті, показали, що 70% опитаних стануть сумніватися, чи здійснювати покупку в інтернет-магазині, чий сайт завантажувався довше, ніж вони того очікували. В їхній свідомості відкладеться інформація, що це – повільний ресурс, і в подальшому вони задумаються, чи варто сюди повертатися взагалі.

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

Самостійна оптимізація швидкості сайту

Іноді малої ревізії основних параметрів вистачає, щоб збільшити швидкість завантаження до 90%! Таке трапляється з веб-ресурсами, які збиралися некомпетентними фрілансерами, без глибокого знання процесу веб-розробки.

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

Одним з таких інструментів є PageSpeed Insights – спеціальний інструмент від Google. Але цей інструмент тільки відкриває можливості для вивчення даних. Незалежно від обраного сервісу, чек-лист параметрів, що підлягають оптимізації, буде приблизно однаковий (його наведемо в кінці статті).

Крок 1. Окресліть межі прискорення завантаження

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

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

Для середнього ресурсу, який робив звичайний фрілансер або початківець розробник, характерна наступна ситуація:

• Скрипти знаходяться в різних файлах, яких багато, і у них – складна система пріоритетів читання. Верстка сайту погано структурована і погано простежується вкладеність елементів. Браузер довго обробляє всі команди, перемикаючись від документа до документа в пошуках кінцевої, що стає причиною низької швидкості сайту (low pagespeed);
• Таблиці стилів CSS створювалися різними верстальниками, в різний час. В таких документах немає єдиної системи стилів, яка дозволяла б швидко прочитати таблицю. Окремий шматок розмітки був написаний для якогось особливого блоку в недозволеному місці (чим нижче прописано правило стилів – тим вище у нього пріоритет), і цього може бути достатньо, щоб почати гальмувати завантаження.

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

Крок 2. Визначте актуальну швидкість завантаження

Зробити це можна за допомогою того ж Google PageSpeed Insights. Для первинної, загальної перевірки його досить.

Щоб отримати більш детальну інформацію, можна скористатися інструмантами:

• WebPagetest;
• GTmetrix.

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

WebPagetest і GTmetrix дозволять подивитися дані по частці ресурсів JS і CSS на сайті в процентах.

Додатково, у кожного є свої особливості:

WebPagetest додатково показує дані за запитами, теж у графічному вигляді. Через нього можна перевірити, наскільки вірно була проведена робота по налаштуванню .htaccess, подивившись, які файли були стиснуті методом GZIP;

GTmetrix показує діаграму завантаження файлів, до того ж у звітах про помилки та попередження надає рекомендації, як кожну з помилок оптимізувати.

Використання звітів у Google Analytics

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

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

Основні звіти по швидкості завантаження сторінок в Google Analytics:

• Призначений для користувача час – швидкість відгуку ресурсу на дію користувача по типу дії та контенту (клік, завантаження зображення, запуск відео, натискання кнопки, перехід тощо);
• Час завантаження сторінок – скільки часу потрібно сторінці, щоб завантажитися. Мається на увазі, за допомогою фільтрів, можна перевірити швидкість завантаження сайту в різних країнах;
• Хронометраж DOM – окремий розділ в звіті “Час завантаження сторінок” показує, з якою швидкістю браузер обробляє дані і виводить сторінку на екран користувача.

Як прискорити завантаження: чек лист щодо оптимізації

Наведемо наостанок чек-лист, як самостійно оптимізувати швидкість завантаження сайту шляхом налаштування і виправлення технічних показників.

Оптимізація зображень

• Картинки повинні бути строго в тому розмірі, яке потрібно на сторінці. Це означає, що, якщо на сторінці картинка 640 на 480px – то потрібно використовувати саме в цьому розмірі зображення, а не 800 на 600px і більш;
• Об’єднуйте іконки в спрайти (єдине зображення). Так браузер буде посилати менше запитів на сервер;
• Стискайте зображення. Спеціально для цього можна скористатися одним із онлайн-сервісів (наприклад, TinyPNG, Kraken.io), які можуть стиснути файли JPEG, GIF, SVG та ін. без втрати візуальної якості.

Кількість запитів на сервер і оптимізація CSS/JS

• Зменшення кількості зображень, зведення однотипних в спрайт.
• Об’єднання CSS-файлів в один.
• Об’єднання або зведення до мінімуму всіх JS-файлів.
• Зменшення кількості елементів з динамічним завантаженням, щоб знизити число запитів до бази даних.
• Реалізація завантаження всіх JS-скриптів і CSS-стилів в кінці, після завантаження сторінки.