Про швидкість сайту зазвичай пишуть однаково: стисніть картинки, увімкніть кеш, приберіть зайві скрипти. Ми виміряли власну головну сторінку — і жодна з цих порад не стосувалася проблеми.
Що показав вимір
Мобільна оцінка нашої головної: 63 бали. Розкладка по складниках пояснює, куди вони поділися.
| Показник | Значення | Вага | Втрачено балів |
|---|---|---|---|
| Перша поява контенту | 2,0 с | 10 | 1,6 |
| Індекс швидкості | 5,7 с | 10 | 4,8 |
| Поява головного елемента (LCP) | 7,5 с | 25 | 24,0 |
| Час блокування (TBT) | 310 мс | 30 | 6,9 |
| Зсув макета (CLS) | 0 | 25 | 0 |
Один показник тримає 24 бали з 32, яких бракує до 95. Решта разом — вісім. Це і є відповідь на питання, з чого починати.
Найповільніший елемент виявився абзацом
Далі — найцікавіше. Елемент, поява якого й дає ті 7,5 секунди, — це підзаголовок під головним заголовком. Текстовий абзац. Він важить кілька кілобайт і не вантажить нічого.
Розкладка часу пояснює, як таке можливо:
- 63 мс — відповідь сервера;
- 2 495 мс — очікування перед тим, як текст намалюється.
Текст уже був у HTML. Але браузер не малює його, поки не отримає файл стилів — а той запитується окремо, після того як прийшов сам документ. Один додатковий похід у мережу, і на мобільному з'єднанні він коштує дві з половиною секунди.
Висновок, який суперечить більшості порад: повільним було не завантаження, а очікування. Стискати тут нічого — треба прибрати сам запит, а не зменшити файл.
Чому це стосується вас
Схема повторювана й дуже поширена. Ознаки, за якими вона впізнається:
- LCP помітно гірша за інші показники;
- найбільший елемент — текст або заголовок, а не картинка;
- час відповіді сервера малий, а «затримка відображення» велика.
Якщо це ваш випадок, стиснення зображень не дасть нічого: картинка не була проблемою. Працює інше — зменшити кількість запитів, від яких залежить перший показ.
- Виміряйте публічну адресуЗовнішнім інструментом, не локально. Локальний прогін вимірює ваш комп'ютер.
- Знайдіть найбільший елементЯкщо це текст або заголовок — проблема в запиті, а не у вазі. Стискати нема чого.
- Подивіться розкладку часуВідповідь сервера окремо, затримка відображення окремо. Друга цифра зазвичай більша в десятки разів.
- Прибирайте запит, а не байтиМенше походів у мережу до першого показу. Це і є та секунда, якої бракує.
Пастка вимірювання, у яку легко потрапити
Вимірює ваш сайт
- час відповіді сервера
- кількість і розмір запитів
- порядок завантаження стилів
- зсув макета
Це властивості сторінки. Вони однакові з будь-якого комп'ютера.
Вимірює вашу машину
- час блокування головного потоку
- загальний бал у локальному прогоні
- усе, що залежить від процесора
На завантаженому ноутбуці ця цифра буває вчетверо гіршою за реальну.
Це не теорія: у нас самих оцінка блокування на локальній машині показала понад дві секунди, і з неї було зроблено висновок, що високий бал недосяжний через рекламні теги. Зовнішній вимір публічної адреси дав 310 мс. Теги були ні до чого — винен був завантажений ноутбук.
Правило звідси просте: міряйте публічну адресу зовнішнім інструментом. Локальний прогін годиться для порівняння «до і після» на одній машині й не годиться для тверджень про сайт.
Що це означає для конверсії
Прямої формули «мінус секунда — плюс стільки відсотків» не існує, і будь-яка названа цифра описує чужий сайт.
Практично значуще інше: швидкість — це множник, а не окремий фактор. Людина, яка пішла до появи офера, не побачила ні заголовка, ні доказів, ні форми. Усі зусилля, вкладені в сторінку, множаться на частку тих, хто дочекався.
Саме тому швидкість стоїть у чеклісті лендінга поруч із формами, а не в окремому технічному розділі.
З чого почати
Виміряйте свою головну зовнішнім інструментом і подивіться дві речі: який показник забирає найбільше балів і що є найбільшим елементом. Якщо це текст — шукайте зайвий запит, а не важку картинку.
Дефекти, які знаходяться разом із цим, зібрані в чеклісті CRO: вони усуваються без жодного тесту.
Якщо потрібен погляд збоку на конкретну сторінку — подивіться, як ми працюємо з конверсією.