Словник для веб-оптимізації продуктивності: LCP, CLS, TTFB і далі

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

Проблема в тому, що термінологія веб-продуктивності змішує акронімами (LCP, CLS, TTFB), запозичені поняття (гідрація, з’єднання) і вимірювальний словник (перцентили, бюджети, водоспади), що може бути заплутаним навіть для носіїв англійської мови.

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

Основні веб-сайти

Core Web Vitals Google є офіційним набором метрик, що вимірюють якість користувацького досвіду. Вони є основою словника виконавців.

1. Європейський Союз LCP — найбільша контентна картина

Вимова: /el siː piː/ (написати)

LCP вимірює час, який знадобиться для відтворення на екрані найбільшого видимого елемента вмісту — зазвичай, це зображення героя, великий заголовок або мініатюра відео. Це представляє момент, коли сторінка відчуває себе «завантаженою» для користувача.

** Хороший порог: ** Менше 2,5 секунд ** Потрібно поліпшити: ** 2,5 - 4,0 секунди ** Погана: ** Більше 4, 0 секунд

** Що впливає на LCP:**

• Час відповіді сервера
• Блокування ресурсів відтворення (CSS, JavaScript)
• Час завантаження ресурсів (великих зображень, веб- шрифтів)
• Відтворення на стороні клієнта

** Використання: ** *“Наш LCP на мобільному телефоні становить 3,8 секунди — трохи за межею «хорошого» порогу. Винуватцем є зображення героя, яке є 2МБ WebP, яке не попередньо завантажено. *

2-й. CLS — кумулятивний перехід макету

** Вимова: ** /siː el es/

CLS вимірює ** візуальну стабільність ** — наскільки неочікувано змінюється розкладка сторінки під час завантаження. Якщо завантаження зображення призведе до зменшення розміру тексту або якщо з’ явиться рекламне повідомлення, яке пересунуть кнопку, яку ви збираєтеся натиснути, це буде означати зміну компонування.

CLS оцінюється від 0 до будь- якого значення — 0 означає ідеальну стабільність, більші значення означають більший зсув.

** Добрий поріг: ** Нижче 0, 1 ** Потрібно поліпшити: ** 0, 1 - 0, 25 ** Погана: ** Понад 0, 25

** Поширені причини CLS:**

• Зображення без явних атрибутів width і height
• Веб- шрифти, які призводять до перенесення тексту під час завантаження (FOUT/ FOIT)
• Динамічно вставлений вміст (реклами, банери, повідомлення про куки)
• Веб- компоненти, ініціалізація яких забирає багато часу

** Використання: ** *“Рейтинг CLS підскочив з 0. 05 до 0. 31 після того, як ми додали банер згоди на використання куки — він завантажується після початкового відтворення і переміщує весь заголовок вниз.” *

** Порівняльні терміни: **

• ** Зсув розкладки ** — один випадок несподіваного руху
• ** ПОМИЛКА ** (Блискавка нестилізованого тексту) — коли текст буде показано короткочасно у резервному шрифті перед завантаженням веб- шрифту
• ** FOIT ** (Флеш невидимого тексту) — коли текст буде приховано під час очікування на веб- шрифт

3-й. INP — Інтеракція до наступної картини

** Вимова: ** /aɪ en piː/

INP замінив FID (First Input Delay) як Core Web Vital в березні 2024 року. За допомогою цього параметра вимірюється ** здатність сторінки реагувати на дії користувача протягом усього циклу життя сторінки — не лише під час першого клацання, але і під час всіх клацань, натискань і натискань клавіш.

** Хороший поріг: ** Менше 200 мілісекунд ** Потрібно поліпшити: ** 200 мс - 500 мс ** Погана: ** Більше 500 мс

** Використання: ** * “Наша INP на сторінці результатів пошуку становить 420 мс — користувачі відчувають помітну затримку під час введення тексту у поле пошуку. Головна нить блокується великим синхронним аналітичним скриптом.”*

4-й. FCP — Перша контентна картина

** Вимова: ** /ef siː piː/

Час з моменту початку навігації до моменту, коли на екрані з’ явиться перший елемент вмісту — будь- який текст, зображення або небілий елемент полотна. FCP повідомляє вас про те, коли сторінка перестає бути порожньою.

Не є важливим веб- показником, але важливий діагностичний показник.

** Хороший порог: ** Менше 1,8 секунд

5-й. TTFB — час до першого байту

Вимова: /tiː tiː ef biː/ (написати)

Час між наданням запиту і отриманням ** першого байта відповіді ** переглядачем. TTFB відображає продуктивність сервера, затримку мережі і ефективність CDN.

** Хороший поріг: ** Менше 800 мілісекунд

** Використання: ** “Наша TTFB з місць США становить 120 мс, але з Південно-Східної Азії вона перевищує 900 мс — у нас немає краю вузла в цьому регіоні.”

** Що впливає на TTFB: **

• Час обробки сервером (запити бази даних, логіка програми)
• Затримка мережі (фізична відстань)
• Покриття CDN
• Час розв’ язання DNS

Рендерування і JavaScript-терміни

Гідратація

Вимова: /haɪˈdreɪʃən/

У серверних (SSR) або статично генерованих фреймворках (Next.js, Nuxt, Astro), гідрування є процесом приєднання обробників подій JavaScript до вже відтвореного HTML, роблячи його інтерактивним.

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

** Використання: ** *“Сторінка відтворюється за 1, 2 секунди, але користувачі повідомляють про 3- секундну затримку перед тим, як кнопки почнуть працювати — гідрування займає більше часу, ніж початкове відтворення.” *

** Порівняльні терміни: **

• ** Часткова гідрація ** — гідрація лише інтерактивних компонентів, залишаючи статичний вміст негідрованим (архітектура островів Astro)
• ** Прогресивно гідратація ** — гідратація компонентів у порядку пріоритету, відповідно до потреб користувача
• Невідповідність гідрації — коли відтворений сервером HTML відрізняється від того, що очікує React (або інший фреймворк), що викликає повне перевідтворення

7-й. Розділення пакетів / коду

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

** Використання: ** “Ми реалізували розділення коду на рівні маршруту — кожна сторінка тепер завантажує лише потрібний JavaScript. Головний набір впав з 1.2 МБ до 380 КБ.”

** Порівняльні терміни: **

• ** Чунк ** — один з менших шматків, отриманих шляхом розділення звязки
• ** Динамічний імпорт ** — механізм JavaScript ( import() ), який використовується для завантаження шматка на запит
• ** Tree shaking ** — вилучення невикористовуваного коду з збірки
• ** Єднання коду ** — синонім для тріскання дерева

8-й. Шлях критичного відтворення

Послідовність кроків, які виконує переглядач для відтворення сторінки: аналіз HTML → побудова DOM → аналіз CSS → побудова CSSOM → відтворення дерева → компонування → малювання. Ресурси, які блокують цей шлях, є ** блокуванням відтворення **.

Використання: “Цей скрипт аналітики сторонньої сторони блокує відтворення — він сидить в <head> без defer або async, утримуючи весь критичний шлях відтворення.”

** Порівняльні терміни: **

• ** Ресурс блокування відтворення ** — CSS або синхронний JavaScript, який призупиняє відтворення
• ** async attribute** — завантажує скрипт без блокування; виконує, коли готовий
• ** defer attribut** — завантажує скрипт без блокування; виконується після аналізу HTML

9. Легке завантаження

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

Використання: “Ми додали loading="lazy" до всіх зображень нижче складання — це зменшило початковий рахунок ресурсів з 45 запитів до 12.”

10. Попереднє завантаження

• ** Попереднє завантаження ** ( <link rel="preload"> ) — повідомляє переглядачу, щоб він звантажив ресурс раніше, оскільки він буде потрібним незабаром. Використовується для шрифтів, зображень героїв, критичних скриптів.
• ** Prefetch ** ( <link rel="prefetch"> ) — повідомляє переглядачеві про те, що ресурс слід звантажити у фоновому режимі, оскільки він * може * бути потрібним для наступного перегляду.
• ** Preconnect ** ( <link rel="preconnect"> ) — встановлює з’ єднання з джерелом на початковому етапі, перед тим, як буде надсилатися запит на ресурс з цього джерела.

** Використання: ** * “Ми додали підказку для попереднього завантаження зображення героя — LCP покращено на 400 мс, оскільки переглядач починає завантажувати його під час аналізу HTML, а не чекає на обробку CSS.” *

Вимірювання і описування мовлення

Бюджет

Набір обмежень щодо показників продуктивності або розмірів ресурсів, які команда зобов’ язується не перевищувати. Приклади:

• “LCP должен оставаться ниже 2,5 секунд”
• • “Всього JavaScript під складанням не може перевищувати 200КБ” *
• • « Жоден скрипт сторонньої програми не може блокувати відтворення » *

** Використання: ** “Наша швидкість бюджету встановлена у конвеєрі CI — PR, який збільшує розмір збірки на більше ніж 5КБ, потребує перегляду швидкості перед об’ єднанням.”

12-й. Водоспад (англ. Waterfall)

Візуальне представлення всіх мережевих запитів, зроблених під час завантаження сторінки — показано, коли починається виконання кожного запиту, скільки часу він триває і як він пов’ язано з іншими запитами. Доступний у DevTools переглядача і інструментах, таких як WebPageTest.

** Використання: ** * “Якщо подивитися на водоспад, то побачите, що завантаження шрифтів відбувається каскадно — переглядач не виявить шрифт до того, як буде розглянуто CSS, що буде занадто пізно.” *

13-й. 50-річчя УНР (1975, 1979, 1985, 1990, 1995)

Метричні показники продуктивності вимірюються у процентилях, а не лише середніх значеннях. p75 LCP означає, що 75% завантажень сторінок реальних користувачів мають LCP на рівні або нижче цього значення.

Google рекомендує вимірювати Core Web Vitals на 75-му процентилі.

** Використання: ** “Наша p75 LCP становить 2,1 секунди, що в “доброму” діапазоні. Але p95 становить 5,8 секунд — є довгий хвіст дуже повільних завантажень, які нам потрібно дослідити.»

14-й. Інформація про лабораторію

• ** Дані поля ** (також: Реальний моніторинг користувача / RUM) — продуктивність, вимірювана з пристроїв реальних користувачів у реальному світі. Відображає справжній досвід користувача.
• ** Лабораторні дані ** — швидкодію виміряно у контрольованому, імітованому середовищі (Lighthouse, WebPageTest). Відтворюваний, але може не відображати реальні умови.

** Використання: ** “Lighthouse дає нам лабораторний бал 92, але наші дані з CrUX показують, що ми знаходимося в діапазоні « потребує поліпшення » для LCP — справжні користувачі на повільних з’ єднаннях відчувають щось інше. “

15-й. CrUX — Chrome User Experience Report (англійською)

** Вимова: ** /kruːks/ (як “crux”)

Публічний набір даних про швидкодію, зібраних від користувачів Chrome, які згодні ділитися ними. Використовується Google PageSpeed Insights і Search Console для оцінки Core Web Vitals в даних поля.

** Використання: ** “Наші дані CrUX показують, що 78% завантажень сторінок досягають « хорошого » LCP. Нам потрібно отримати більше 90%, щоб бути впевненими в нашому становищі.”

Ключеві моменти

• ** LCP ** (Largest Contentful Paint) вимірює сприйняту швидкість завантаження — ціль менше 2, 5 секунд.
• ** CLS ** (Скуплений зсув розкладки) вимірює візуальну стабільність — ціль нижче 0, 1.
• ** INP ** (Interaction to Next Paint) вимірює швидкість реакції — ціль менше 200 мс.
• ** TTFB ** вимірює швидкість сервера і мережі — цільова швидкість менше 800 мс.
• ** Гідрація ** — це додавання JavaScript до HTML, відтвореного сервером — повільна гідрація означає, що сторінка виглядає готовою, але не є інтерактивною.
• ** Розділення пакунків ** і ** ліничне завантаження ** зменшують початкову вартість JavaScript і ресурсів.
• Завжди вимірювати продуктивність за реальними процентилями користувача (p75), а не лише за середніми лабораторними показниками.
• ** Поле даних ** (CrUX, RUM) дає вам змогу дізнатися, що насправді відбувається з користувачами; ** лабораторні дані ** призначені для діагностики і регресійного тестування.

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