Web Performance

Защо вашият Time to First Byte е бавен и какво да направите

TTFB не е единичен бъг. Това е видимото забавяне, причинено от DNS, установяване на връзка, CDN маршрутизиране, работа на сървъра, пропуски в кеша и понякога една бавна заявка към база данни.

The Wux Webtools Team The Wux Webtools Team 2 мин четене С подкрепа от ИИ, прегледано от човек
A simplified network path from a browser to a CDN and origin server showing points where latency can occur.
Съдържание
  1. Започнете с това какво всъщност измерва TTFB
  2. Какво се счита за бавен TTFB?
  3. Измервайте го на повече от едно място
  4. 1. Инструменти за разработчици в браузъра
  5. 2. Синтетични тестове от няколко региона
  6. 3. Real user monitoring или сървърни логове
  7. Обичайните причини за бавен TTFB
  8. Вашият HTML не се кешира
  9. Вашият CDN кешира само assets
  10. Сървърът ви прави твърде много преди да отговори
  11. Заявките към базата данни са бавни или непредсказуеми
  12. Приложението ви има cold starts
  13. Redirects губят първата заявка
  14. Практична последователност за debugging
  15. Step 1: Тествайте основния документ, не само цялата страница
  16. Step 2: Сравнете региони
  17. Step 3: Прегледайте response headers
  18. Step 4: Проверете origin timing
  19. Step 5: Поправете най-голямото потвърдено забавяне
  20. Решения, които обикновено работят
  21. Кеширайте публичния HTML на edge
  22. Извадете некритичната работа от request path
  23. Намалете backend dependency chains
  24. Поставете compute по-близо до потребителите
  25. Поддържайте redirects скучни
  26. Какво да не правите
  27. Спокойната версия на плана

Започнете с това какво всъщност измерва TTFB

Time to First Byte, обикновено съкращавано като TTFB, е времето между момента, в който браузърът заяви ресурс, и момента, в който получи първия байт от отговора.

Това звучи като сървърна метрика, но не е само сървърна метрика. TTFB включва няколко стъпки:

  • DNS lookup, ако hostname още не е разрешен
  • установяване на TCP връзка
  • TLS договаряне за HTTPS
  • време за пътуване на заявката до сървъра или CDN edge
  • изчакване на опашка и обработка на сървъра
  • време за пътуване на отговора обратно до браузъра

Затова висок TTFB може да означава, че backend-ът ви е бавен. Може също да означава, че потребителят е далеч от вашия origin, CDN-ът ви е конфигуриран неправилно, кешът ви постоянно пропуска или сървърът прекарва твърде много време в решаване какво да изпрати.

Това има значение, защото TTFB стои близо до началото на веригата на зареждане. Ако HTML документът пристигне късно, браузърът открива CSS, JavaScript, шрифтове и изображения също късно. Може да имате отлична front-end оптимизация и пак сайтът да се усеща бавен, ако първият отговор с документа отнема 1,5 секунди.

Какво се счита за бавен TTFB?

Няма универсално число, което да пасва на всеки сайт, регион и архитектура. Все пак практичните прагове помагат.

Насоките на Google web.dev класифицират добър TTFB като под 800 ms, 800–1800 ms като нуждаещ се от подобрение, а над 1800 ms като слаб резултат. За добре кеширана маркетингова страница, обслужвана близо до потребителя, често можете да постигнете много по-добро от това. За сложен автентикиран dashboard, който извършва динамична работа, приемливото число може да е по-високо, но все пак трябва да може да се обясни.

Важният навик е да сегментирате числото. Глобална средна стойност на TTFB от 900 ms може да скрие отговор от 150 ms за потребители близо до вашия CDN edge и отговор от 2200 ms за потребители в друг регион. По същия начин началната ви страница може да е наред, докато страниците за търсене, категории или влезли потребители тихо причиняват проблеми.

Измервайте го на повече от едно място

Не диагностицирайте TTFB от едно единствено Lighthouse изпълнение. Lighthouse е полезен, но е един тест от една среда. Ако тепърва се учите да го интерпретирате, започнете със спокойно прочитане на това как да четете Lighthouse доклад без паника — основният урок е да отделяте лабораторните сигнали от реалността на терен.

За TTFB искате поне три гледни точки:

1. Инструменти за разработчици в браузъра

Отворете Network панела, презаредете с изключен кеш и прегледайте заявката за основния документ. Разбивката на времето показва DNS, connection, TLS, waiting и download фази. Фазата „waiting“ често е това, което хората имат предвид под backend време, макар че може да включва и upstream latency.

2. Синтетични тестове от няколко региона

Пускайте тестове от локации близо до и далеч от вашите потребители. Ако TTFB е нисък в един регион и висок в друг, първо подозирайте география, CDN маршрутизиране, разположение на origin или покритие на кеша, преди да пренаписвате application code.

3. Real user monitoring или сървърни логове

Данните от реални потребители показват какво изпитват хората през различни устройства, мрежи и сесии. Сървърните логове могат да покажат дали origin е генерирал отговора бързо. Разликата между TTFB, наблюдаван от клиента, и времето за обработка на origin често е мястото, където се появяват CDN и мрежови проблеми.

Обичайните причини за бавен TTFB

Вашият HTML не се кешира

Това е най-често срещаният проблем при content сайтове и ecommerce сайтове. Статичните assets се кешират агресивно, но HTML документът — нещото, което браузърът трябва да получи първо — се генерира при всяка заявка.

Понякога това е необходимо. Често не е.

Ако публична страница се променя няколко пъти на ден, вероятно не трябва да изисква ново рендиране от база данни за всеки анонимен посетител. Използвайте full-page caching, edge caching, static generation или stale-while-revalidate модели, където е подходящо.

Проверявайте response headers за сигнали като Cache-Control, CDN-Cache-Status, Age, Vary и Set-Cookie. Страница, която изпраща уникална cookie на всеки посетител, може неволно да стане некешируема. Ако ви трябва практичен начин да мислите за този слой, същите навици за debugging от нашето ръководство за redirects и HTTP headers в production се прилагат директно към работата по TTFB.

Вашият CDN кешира само assets

Много екипи добавят CDN и приемат, че работата по performance е приключила. Но ако CDN обслужва само изображения, CSS и JavaScript, първата HTML заявка може все още да пътува чак до един единствен origin сървър.

Това може да е приемливо за локален бизнес сайт с локални потребители. Не е приемливо за международна аудитория. Колкото по-далеч е потребителят от origin, толкова повече latency плащате още преди backend работата да започне.

Добрата CDN конфигурация за TTFB обикновено означава:

  • Кеширайте публичен HTML, когато е безопасно
  • Уважавайте умишлените правила за bypass при автентикирани или персонализирани страници
  • Избягвайте ненужни Vary headers, които разделят кеша твърде фино
  • Използвайте cache purging или revalidation вместо да изключвате кеша изцяло
  • Потвърдете, че edge локациите действително обслужват hits, а не препращат всяка заявка

CDN не е магия. Той е кеш и routing слой. Отнасяйте се към него като към такъв.

Сървърът ви прави твърде много преди да отговори

Бавен backend път може да идва от много малки забавяния: заявки към база данни, API calls, рендиране на templates, проверки на feature flags, authentication, personalization, logging и cold starts.

Най-лошият модел е серийна работа със зависимости. Например:

  1. Извличане на page data
  2. След това извличане на related products
  3. След това извличане на pricing
  4. След това извикване на recommendations service
  5. След това рендиране на HTML

Ако всяка стъпка чака предишната, TTFB расте бързо. Паралелизирайте независимата работа, премахнете некритичните calls от първия отговор и кеширайте скъпите резултати.

Полезно правило: ако потребителят не може да види или използва резултата веднага, той вероятно не трябва да блокира първия байт.

Заявките към базата данни са бавни или непредсказуеми

Базите данни често причиняват TTFB проблеми, защото се държат добре в development и зле при реален трафик. Липсващи индекси, големи joins, N+1 queries, lock contention и прекалено големи result sets — всичко това изглежда като „сървърът е бавен“.

Тук не гадайте. Събирайте timings на заявки за бавни requests. Гледайте p95 и p99, не само средни стойности. Страница, която обикновено отговаря за 120 ms, но понякога блокира за 4 секунди, все пак ще създаде лошо потребителско преживяване.

Чести решения включват:

  • Добавяне или коригиране на индекси
  • Премахване на N+1 query patterns
  • Кеширане на read-heavy data
  • Пагиниране на големи заявки
  • Преместване на reporting или analytics queries извън request time
  • Задаване на разумни timeouts за downstream calls

Приложението ви има cold starts

Serverless и containerized платформите могат да бъдат отлични, но cold starts могат да навредят на TTFB, когато трафикът е на изблици или регионите са недостатъчно provisioned.

Ако първата заявка след idle time е много по-бавна от следващите, разследвайте cold starts. Може да ви трябват provisioned concurrency, по-малки bundles, по-малко startup dependencies, warmer functions или различна deployment форма за latency-sensitive routes.

Това не е аргумент срещу serverless. Това е аргумент срещу преструването, че runtime моделът е невидим.

Redirects губят първата заявка

Redirect добавя още един request-response цикъл, преди браузърът да получи крайния документ. Един redirect от http:// към https:// може да е неизбежен за стари links, но веригите са разточителни.

Чести вериги включват:

  • http://example.comhttps://example.comhttps://www.example.com
  • trailing slash normalization след protocol normalization
  • geo или language redirects преди cache lookup
  • legacy campaign links, които прескачат през няколко URLs

Поправете source links, където е възможно, обединете redirect rules и направете canonical URLs директни. Redirect time не винаги се отчита като TTFB за финалната заявка, но потребителят все пак плаща за него.

Практична последователност за debugging

Когато TTFB изглежда бавен, използвайте този ред. Той избягва често срещаната грешка да оптимизирате application code, преди да сте потвърдили поведението на кеша и маршрутизирането.

Step 1: Тествайте основния документ, не само цялата страница

Намерете заявката за HTML документа. Запишете общия TTFB и разбивката на времето. Повторете със и без browser cache. Тествайте публична страница, динамична страница и страница за logged-in потребител, ако е релевантно.

Step 2: Сравнете региони

Пуснете същия URL от няколко географски локации. Ако бавните региони корелират с разстоянието до origin, приоритизирайте CDN и edge caching. Ако всеки регион е бавен, гледайте backend processing и origin capacity.

Step 3: Прегледайте response headers

Търсете cache headers, cookies, Age, CDN status и Vary. Липсващ Age header или повторни cache misses са следи. Широк Vary: Cookie header върху публичен HTML често убива кеша.

Step 4: Проверете origin timing

Добавете server timing instrumentation. Header-ът Server-Timing може да покаже backend фази като време за база данни, време за render и upstream API time. Дори простите labels са полезни:

Server-Timing: db;dur=82, render;dur=41, api;dur=210

Сега browser timings могат да покажат дали сървърът е прекарал 300 ms в реална работа, или забавянето се е случило преди заявката да достигне приложението ви.

Step 5: Поправете най-голямото потвърдено забавяне

Това звучи очевидно, но екипите често поправят това, което им е познато, вместо това, което е измерено. Ако cache misses доминират, поправете кеширането. Ако базата данни доминира, поправете заявките. Ако TLS и установяването на връзка доминират за глобални потребители, поправете routing, CDN coverage или origin geography.

Front-end работата все още има значение. Шрифтовете, изображенията и JavaScript влияят на това, което се случва след пристигането на HTML. Но те не са заместител на бърз първи отговор. Ако работите и по render performance, web fonts остават една от най-лесните победи за много сайтове, защото влияят на това колко бързо текстът става използваем след пристигането на документа.

Решения, които обикновено работят

Кеширайте публичния HTML на edge

За маркетингови страници, документация, блогове, landing pages и category pages, edge caching често е най-голямото подобрение на TTFB. Използвайте кратки TTLs, ако съдържанието се променя често. Използвайте stale-while-revalidate, ако леко остаряло съдържание е приемливо, докато кешът се обновява във фонов режим.

Внимавайте с personalization. Ако страница варира по валута, език, login state или experiment group, дефинирайте тези варианти изрично. Случайна per-user variation унищожава ефективността на кеша.

Извадете некритичната работа от request path

Изпращане на имейли, analytics enrichment, generation на recommendations, webhook calls и тежко logging рядко трябва да блокират първия байт. Сложете ги в queues или ги изпълнявайте след като response е започнал.

Намалете backend dependency chains

Паралелизирайте независимите calls. Кеширайте отговори от бавни APIs. Задавайте timeouts. Проектирайте fallback content за services, които са полезни, но не са съществени.

Бавен recommendations widget не трябва да забавя цялата product page.

Поставете compute по-близо до потребителите

Ако потребителите ви са глобални, а origin е в един регион, latency е структурна. CDN caching може да скрие голяма част от това за публично съдържание. За динамично съдържание обмислете regional deployments, edge rendering за подходящи routes или преместване на APIs по-близо до аудиторията.

Поддържайте redirects скучни

Canonicalize URLs в един hop. Обновете internal links така, че потребители и crawlers да отиват директно до крайната дестинация. Одитирайте стари campaign URLs и platform migrations. Redirects са лесни за игнориране, защото са невидими, когато работят, но все пак струват време.

Какво да не правите

Не преследвайте перфектно TTFB число за всеки route. Автентикиран report, който извършва реални изчисления, няма да се държи като кеширан blog post.

Не използвайте среден TTFB като единствена метрика. Percentiles имат значение. Географията има значение. Типът страница има значение.

Не приемайте, че CDN означава, че HTML-ът ви е кеширан. Проверете го.

И не третирайте TTFB като отделен от продуктовите решения. Personalization, experimentation, real-time inventory и third-party services имат latency разходи. Някои си струват. Други са просто навик.

<!-- tool-cta:start -->

💡 Опитайте това: При диагностициране на TTFB, Get Headers разкрива състоянието на кеша, сървърните времена и пренасочванията, които често обясняват откъде идва забавянето.

<!-- tool-cta:end -->

Спокойната версия на плана

Бавният TTFB обикновено е поправим, щом спрете да го третирате като неясен „сървърен проблем“. Измерете заявката за документа. Сегментирайте по регион и тип страница. Прегледайте headers. Сравнете client timing с origin timing. След това поправете най-голямото потвърдено тясно място.

Повечето сайтове нямат нужда от екзотична архитектура. Те имат нужда от по-малко предотвратими cache misses, по-малко блокираща backend работа, по-чисти redirects и по-ясна представа какво трябва да се случи, преди да бъде изпратен първият байт.

Често задавани въпроси

TTFB метрика от Core Web Vitals ли е?
Не. TTFB не е една от Core Web Vitals, но силно влияе на метрики като Largest Contentful Paint, защото браузърът не може да рендира важно съдържание, докато документът и зависимите му ресурси не бъдат открити.
Каква е добра цел за TTFB?
Като общ benchmark, под 800 ms се счита за добро от web.dev. За кеширани публични страници много екипи могат да се целят по-ниско. За сложни автентикирани routes се фокусирайте върху постоянство, percentiles и дали забавянето е оправдано.
Ще поправи ли добавянето на CDN автоматично TTFB?
Не непременно. CDN подобрява TTFB само ако намалява routing latency или обслужва кеширани отговори. Ако всяка HTML заявка се препраща към origin, вашите CSS и изображения може да са бързи, докато документът остава бавен.
Може ли JavaScript оптимизация да подобри TTFB?
Обикновено не директно за традиционни server-rendered pages. JavaScript влияе на parsing, rendering и interactivity след началото на отговора. TTFB е най-вече свързан с доставянето на първия байт от отговора до браузъра.
Защо TTFB е бавен само за logged-in потребители?
Страниците за logged-in потребители са по-трудни за кеширане, защото са персонализирани. Бавният TTFB там често идва от заявки към база данни, проверки на permissions, API calls, session handling или server-side rendering работа, която не може да се споделя между потребители.

Източници и допълнително четене

  1. web.dev: Optimize Time to First Byte
  2. MDN Web Docs: PerformanceResourceTiming.responseStart
  3. W3C: Server Timing
  4. RFC 9111: HTTP Caching
За автора
The Wux Webtools Team

Последно обновление:

Продължете да четете