Спершу виміряйте. Вгадувати дорого.

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

Три метрики, які важливі

• LCP — скільки чекати до появи основного контенту. Норма — менше ніж 2,5 секунди. Поганий LCP зазвичай означає картинки або повільний сервер
• INP — як швидко сторінка відповідає на натискання. Норма — менше ніж 200 мілісекунд. Поганий INP означає надлишок JavaScript
• CLS — наскільки верстка стрибає під час завантаження. Норма — менше ніж 0,1. Поганий CLS означає картинки й банери без зарезервованого місця
• Тестуйте на мобільному і на звичайному з'єднанні. Ваш офісний вайфай і десктопний браузер — це не там, де ваші клієнти
• Тестуйте сторінку товару чи послуги, а не лише головну. Головна зазвичай єдина, яку хтось уже оптимізував

П'ять причин за частотою

• Картинки. Фото прямо з камери телефона важить чотири мегабайти й показується завширшки 600 пікселів. Причина номер один і найдешевша у виправленні
• Плагіни. Кожен плагін вантажить свої скрипти й стилі на кожній сторінці, включно з тими, де він не використовується. Двадцять плагінів — це не двадцять можливостей, а двадцять збирачів податку
• Хостинг. Дешевий шаред-хостинг означає, що ваш сайт стоїть у черзі за сотнями інших. Якщо сервер відповідає довше ніж 600 мс до того, як узагалі щось почнеться, жодна робота з фронтендом не врятує
• Сторонні скрипти. Чати, аналітика, пікселі, віджети відгуків, шрифти із зовнішніх сервісів. Кожен — це запит до чужого сервера, який ви не контролюєте
• Сама збірка. Блокуючий рендер CSS, відсутність кешу й стиснення, неконтрольовані шрифти. Це та частина, де потрібен розробник, а не галочка в налаштуваннях

Що окупається насамперед

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

• Переведіть картинки у WebP і віддавайте їх у тому розмірі, у якому вони реально показуються. Часто це саме по собі мінус 60–70% ваги сторінки
• Увімкніть ліниве завантаження всього нижче першого екрана й задайте явні ширину й висоту, щоб нічого не стрибало
• Проведіть ревізію плагінів. Вимкнути, заміряти, повторити. Усе, що ви не можете обґрунтувати вголос, знімається
• Нормально ввімкніть кешування і стиснення. На пристойному хостингу це налаштування, а не розробка
• Розмістіть шрифти в себе й вантажте лише використовувані накреслення. Два, а не дев'ять
• Відкладіть сторонні скрипти й вантажте віджет чату після того, як сторінка стала інтерактивною, а не до
• Переїжджайте на кращий хостинг, якщо час відповіді сервера все ще вузьке місце. Робіть це останнім: з цього починають, а причиною саме по собі воно буває рідко

У що повільний сайт реально обходиться

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

Коли річ не у швидкості

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

Висновок

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