Як прискорити сайт і що з цього дає результат

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

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

Чому оцінка в балах нічого не гарантує

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

• Це синтетичний тест. Сторінка перевіряється не в тих умовах, у яких її відкривають ваші відвідувачі.
• Результат стрибає. Два запуски поспіль дають різні числа.
• Бали й відчуття не збігаються. Сайт із високою оцінкою може відкриватися повільно.
• Частина рекомендацій некритична. Інструмент перелічує все підряд, без ваги.

Значно корисніше дивитися на дані реальних відвідувачів, які Google збирає в браузері Chrome. Вони показують, що відчувають люди, а не як поводиться тестовий стенд.

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

Метрики, які описують відчуття людини

Скільки чекають до першої картинки

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

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

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

Чому сторінка стрибає під пальцем

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

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

Затримка відповіді на дотик

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

Час відповіді сервера окремо від решти

Ця цифра стоїть осібно, бо на неї не впливає ніяка оптимізація зображень.

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

• Слабкий або перевантажений тариф. Найпоширеніша причина.
• Немає кешу. Сервер щоразу проходить повний цикл складання сторінки.
• Важкі запити до бази. Особливо на каталогах із фільтрами.
• Далекий сервер. Фізична відстань до відвідувача.

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

Кешування і оптимізацію запитів до бази робимо в межах підтримки та розвитку проєктів. Перед кожною зміною знімається копія, а результат перевіряється на реальних сторінках.

Що справді дає результат

Роботи, які змінюють ситуацію помітно.

• Стиснення і правильні формати зображень. Найчастіше найбільша частка ваги сторінки.
• Кешування сторінок. Сервер віддає раніше зібрану копію замість того, щоб щоразу будувати сторінку заново.
• Прибирання зайвих скриптів. Кожен віджет це окреме звернення до чужого сервера.
• Відкладене завантаження. Те, чого не видно на екрані, завантажується пізніше.
• Оновлення версії PHP. Різниця між старою і новою буває помітною.
• Порядок завантаження шрифтів. Щоб текст з’являвся одразу, а не після шрифту.

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

Що працює слабо або не працює

Роботи, які часто продають, а віддача від них невелика.

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

З чого починати перевірку

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

• Відкрийте сайт із телефона через мобільний інтернет. Не через домашній Wi-Fi. Це найближче до того, що бачить більшість.
• Подивіться, що завантажується найдовше. Зазвичай видно неозброєним оком: велике зображення, шрифт, віджет.
• Порахуйте віджети на сторінці. Чат, карта, відгуки, лічильники, кнопки соцмереж. Кожен щось важить.
• Перевірте вагу головного зображення. Часто там лежить знімок на кілька мегабайтів у повному розмірі.
• Подивіться, скільки часу відповідає сервер. Це видно в будь-якому інструменті перевірки окремим рядком.

Цих п’яти кроків достатньо, щоб зрозуміти, у чому саме проблема, і не витрачати гроші на роботи, які її не стосуються.

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

Лабораторні дані проти польових

Різниця між двома джерелами даних пояснює більшість суперечок.

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

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

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

Норми, на які варто орієнтуватися

Пороги стабільні й опубліковані: основний уміст до 2,5 секунди, зсув розмітки до 0,1, відповідь на дотик до 200 мілісекунд. Ось що за ними стоїть.

• Основний уміст видно за пару секунд. Далі частина людей починає йти.
• Сторінка не стрибає після появи. Зсуви розмітки мінімальні.
• Реакція на дотик миттєва. Без затримки після натискання.
• Сервер відповідає швидко. Це фундамент, без нього решта не працює.

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

Мобільна й десктопна оцінка розходяться завжди

Мобільна оцінка нижча практично в усіх, і це нормально. Телефон слабший за комп’ютер, а мобільний інтернет повільніший.

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

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

Чужі скрипти й скільки вони коштують

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

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

• Скільки їх насправді. Часто виявляється вісім-десять там, де власник пам’ятає про три.
• Чи всі використовуються. Віджет опитування, поставлений два роки тому для однієї акції.
• Коли вони завантажуються. Одночасно з основним умістом чи після нього.
• Що буде, якщо сервіс недоступний. Сторінка має працювати, а не чекати нескінченно.

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

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

Що з цих цифр можна виправити швидко

Порядок робіт від найшвидшого до найдовшого.

• Стиснути наявні зображення. Кілька годин, помітний ефект.
• Увімкнути кешування. Від години до дня залежно від платформи.
• Прибрати невикористовувані розширення. Півдня разом із перевіркою.
• Оновити версію PHP. День із перевіркою сумісності.
• Розібратися з чужими скриптами. Залежить від того, скільки їх накопичилося.
• Оптимізувати запити до бази. Найдовше й потрібно не всім.

Роботи рахуються погодинно, $25/год, і входять до підтримки та розвитку проєктів. Що ще перевіряють разом зі швидкістю, описано в матеріалі про аудит сайту.

Коли гнатися за сотнею не варто

• Сайт уже відкривається за пару секунд. Далі вкладення дають мало.
• Проблема не у швидкості. Мало заявок буває і у швидкого сайту.
• Потрібні скрипти не прибрати. Аналітика й чат потрібні бізнесу.
• Ціна росте нелінійно. Останні бали коштують більше за всі попередні разом.

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

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

Висновки

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

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

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

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