Навчання
Speed Index: що це таке і як зробити сторінки візуально швидшими
Speed Index показує, як швидко заповнюється видима частина сторінки. Гайд пояснює, як покращувати візуальний прогрес, а не лише фінальний load time.
Запусти свіжий аудит DomainLens і використовуй звіт як список пріоритетів.
Що вимірює Speed Index
Speed Index оцінює, як швидко видима частина viewport стає візуально заповненою під час завантаження. Нижче значення означає, що користувач раніше бачить змістовний контент і сторінка відчувається швидшою, навіть якщо не всі assets ще завантажились.
На відміну від однієї часової точки на кшталт FCP або LCP, Speed Index дивиться на візуальний прогрес у часі. Він добре показує сторінки, які повільно відкривають контент через CSS, зображення, JavaScript або third-party scripts у above-the-fold зоні.
Чому Speed Index погіршується
- Великі CSS-файли або render-blocking stylesheets затримують перший layout.
- Hero images і above-the-fold media вантажаться пізно або в неправильному розмірі.
- Важкий JavaScript блокує rendering і залишає viewport порожнім або неповним.
- Повільна відповідь сервера й слабке кешування затримують усі наступні requests.
- Third-party scripts конкурують із критичними ресурсами сторінки на старті.
Як покращити Speed Index
Пріоритезуй перший viewport. Зроби initial layout простим, inline тільки critical CSS, preload найважливішого image або font і defer усього, що не потрібне для першого екрана. Ціль — стабільний видимий прогрес, а не тільки швидший final load event.
Зменш main-thread pressure: прибери unused JavaScript, розбий bundles, відклади third-party tags і не рендери на клієнті те, що може прийти як HTML. Додай resize images, modern formats, caching і CDN delivery.
Типові помилки
- Зменшувати total page size, коли перший viewport досі чекає blocking CSS.
- Lazy-load для above-the-fold images, які мають вантажитися з високим priority.
- Віддавати великий JavaScript app до базового тексту й layout.
- Тестувати тільки швидкий desktop run і пропускати повільний mobile visual progress.
- Розглядати Speed Index окремо від LCP, FCP і TTFB замість читати їх разом.
Як перевірити результат
Порівнюй filmstrips або screenshots до і після зміни, а не тільки score. Перший viewport має заповнюватися раніше й плавніше. Потім перевір, чи FCP, LCP, TTFB і render-blocking opportunities рухаються в той самий бік.
Після деплою повтори DomainLens audit і спершу дивись mobile Lighthouse data. Якщо Speed Index покращився, але LCP лишився поганим, продовжуй з конкретним LCP element і server-response fixes.