Что такое TTFB и как улучшить этот показатель
В переводе с английского аббревиатура TTFB расшифровывается как Time To First Byte (время до получения первого байта).
Что влияет на TTFB
Сетевые проблемы и задержки, объем входящего трафика, настройки веб-сервера, объем и оптимизированность контента (качество графики,размер css/js/html). Быстрая загрузка страницы зависит как от оптимизации клиентского кода HTML / CSS / JavaScript, так и от работы сервера.
Не на все вышеперечисленные моменты можно легко повлиять.
Инструменты для анализа
Чтобы проверить скорость ответа сервера можно использовать следующие инструменты:
Как улучшить показатель TTFB
Оптимизировать работу с базой данных
Выбрать более производительный сервер
Использовать акселераторы PHP
Каждый раз при загрузке страницы сервер обрабатывает PHP-файлы, но часто при загрузке выполняется один и тот же участок кода. Акселераторы PHP позволяют уменьшить TTFB путем предварительной компиляции PHP-кода. Это снизит нагрузку на процессор, но потребует большего объема оперативной памяти.
Использовать серверное кэширование
При отсутствии кэширования страниц сервер генерирует запрашиваемую страницу при каждом обращении пользователя. Если кэшировать страницу целиком, то при последующем обращении пользователя к файлу сервер не будет генерировать страницу заново, а отдаст пользователю уже сгенерированную страницу.
TTFB с отключённым кэшированием:
Вывод
Если TTFB больше 200 мс:
10 советов по уменьшению TTFB в WordPress
TTFB или время до первого байта – это сложнее всего оптимизировать в WordPress. Это руководство поможет вам реализовать несколько простых шагов по улучшению TTFB.
Что такое TTFB?
Время до первого байта. Как следует из названия, это время, необходимое для получения первого байта от сервера, или, неважно, как быстро вы получаете данные при запросе веб-страницы.
TTFB против времени загрузки
Иногда TTFB путают со временем загрузки сайта. Однако это не то же самое. Время загрузки – это общее время запроса, которое включает отправку, TTFB, загрузку, анализ и т. Д.
Как измерить TTFB?
Есть несколько инструментов для измерения TTFB. Мне больше всего нравится https://tools.keycdn.com/performance, потому что он будет проводить тест из 14 мест.
Что такое хороший TTFB?
Google рекомендует использовать TTFB максимум 200 мс. Даже 200-400 мс – это нормально. Все, что превышает 500 мс, считается медленным. Это явно повлияет на всю скорость работы веб-сайта и взаимодействие с пользователем.
Как уменьшить TTFB в WordPress?
Используйте Cloudflare DNS
DNS играет жизненно важную роль в скорости страницы и TTFB. Именно так ваш браузер находит ваш сервер и подключается к нему. Чем быстрее ваш браузер подключается к серверу, тем быстрее TTFB!
Вот сравнение времени отклика Cloudflare DNS с популярными сервисами:
| Провайдер | ProvResponse Time (чем меньше, тем лучше) |
|---|---|
| Cloudflare | 12 мс |
| GoDaddy | 48 мс |
| Маршрут 53 (AWS) | 49 мс |
| Google Cloud | 59 мс |
Используйте плагин кеширования
Для каждого нового запроса к странице WordPress должен выполнять запросы PHP и MySQL. Но в 90% случаев вам это не нужно. Вы можете создавать HTML-файлы и напрямую их обслуживать. Это очень быстро по сравнению с генерацией из PHP.
Есть несколько плагинов, которые помогут вам включить кеширование в WordPress.
Используйте VPS-сервер или высокопроизводительный управляемый хостинг
В отличие от виртуального хостинга, VPS-серверы и несколько управляемых хостинг-провайдеров не разделяют ресурсы на других сайтах. Для вас это означает более быстрый веб-сайт.
Вот несколько, что я рекомендую:
Используйте PHP v7.3
Какую версию PHP вы используете? Это 7.0 или 7.1 или 7.2? В таком случае вам обязательно стоит перейти на PHP v7.3.
Если кеширование или статический веб-сайт не являются хорошим решением (особенно для электронной коммерции, форумов), то единственный способ ускорить обработку. Дело не только в увеличении ЦП и ОЗУ.
Несмотря на то, что это меньшее количество обновлений, производительность заметно отличается!
Используйте TLS 1.3
TLS является преемником SSL. Это протокол для обеспечения сквозного шифрования (HTTPS). TLS 1.3 – последняя версия. Версия 1.3 сокращает количество циклов приема-передачи и обеспечивает значительное улучшение TTFB.
Для этого требуется всего несколько изменений на сервере, но вы можете сократить время до 250 мс, просто обновив до TLS 1.3.
Выбирайте расположение сервера с умом
Если ваша аудитория находится в Индии, а ваш сервер находится в США, это добавит дополнительной задержки в сети на 200–300 мс.
Cloudways (DigitalOcean) местоположения
Используйте OpenLiteSpeed или LiteSpeed Server
LiteSpeed - это веб-сервер, похожий на Nginx и Apache, который обеспечивает гораздо лучшую производительность, особенно с точки зрения TTFB. OpenLiteSpeed - это версия LiteSpeed Enterprise с открытым исходным кодом.
Кешировать HTML-страницы на CDN
HTML-страница – это первая часть, которую ваш браузер запрашивает, когда пользователь посещает ваш сайт. По нескольким причинам Cloudflare по умолчанию не кэширует HTML / JSON. Однако вы можете написать собственные правила для кеширования HTML-страниц на их серверах CDN. Это уменьшит TTFB в 10 раз или даже больше!
Используйте Cloudflare Argo
Argo обнаруживает перегрузки в реальном времени и направляет веб-трафик по самым быстрым и надежным сетевым путям
Cloudflare обеспечивает 10% Интернета! Они знают, какой путь доставить быстрее всего. С Cloudflare Argo вы можете ускорить TTFB на 35%.
Арго не является бесплатным, в отличие от вышеупомянутых сервисов. Это стоит 5 долларов в месяц + 0,10 доллара за дополнительный гигабайт.
Преобразование в статический веб-сайт и использование статического хостинга
Что такое статический веб-сайт?
Если ваш сайт WordPress не очень динамичный, вы можете создать его статическую версию. Статическая версия – это сайт, содержащий только HTML, CSS, JS, изображения и т. Д. Не PHP или MySQL. Целевая страница для компании / продукта, блогов и т. Д. – хорошие примеры статических сайтов.
Что такое статический хостинг?
Поставщики статического хостинга, такие как Netlify, предназначены для высокопроизводительной доставки статических файлов. Он поставляется со встроенным CDN, включая HTML.
Создание статической версии WordPress и развертывание
Установите плагин WP2Static, который будет генерировать статический веб-сайт. Затем подключите Netlify в качестве хостинг-провайдера (для этого я напишу подробное руководство).
Наслаждайтесь сверхбыстрыми статическими сайтами!
Вывод
Первое впечатление – лучшее впечатление. TTFB важнее, чем общее время загрузки вашего сайта. Я надеюсь, что описанные выше шаги помогут вам уменьшить TTFB.
TTFB, или время ответа сервера: как увеличить скорость загрузки сайта
TTFB, или время ответа сервера, – это одна из первых характеристик, на которую необходимо смотреть, если скорость загрузки сайта вас не устраивает.
TTFB – зависимая характеристика: уменьшить этот показатель без проведения тщательной и продуманной оптимизации не получится. Давайте разбираться, что такое TTFB, на что влияет это характеристика и как сделать, чтобы сайт загружался максимально быстро.
Что такое TTFB (Time to First Bite)
Начнем с теории. Time to First Bite (или сокращенно TTFB, оно же – время ответа сервера) – характеристика, которая обозначает временной интервал до получения самого первого байта страницы, сразу после отправки соответствующего запроса. Чем меньше значение TTFB, тем лучше и быстрее загружаются страницы сайта.
Время ответа сервера тесно связано со временем отправки запроса и временем получения ответа:
Хорошее время отклика – от 250 до 350 миллисекунд, приемлемый отклик – до 500 миллисекунд. Все, что больше, определяется как долгий отклик, и в отчете Google PageSpeed Insights это будет обозначено как проблема.
Проверяем TTFB на своем сайте
Поговорим об инструментах, которые позволят проверить время ответа сервера. Среди них будут как встроенные инструменты браузера, так и специализированные сервисы. Первые удобны, чтобы получить чистые данные «здесь и сейчас», когда доступ к сторонним сервисам отсутствует. Вторые гораздо более универсальны и способны показывать самые разные параметры, связанные со скоростью загрузки сайта. Они также дают советы, которые позволят увеличить скорость загрузки сайта.
Предлагаю рассмотреть те cервисы, с которыми я работал сам – никаких сложностей и других сюрпризов с ними точно не возникнет.
Webpagetest.org
Удобный и функциональный сервис для проверки TTFB с возможностью выбора браузера и местоположения. Возможность выбрать ГЕО – нужная функция во многих случаях. Дело в том, что скорость загрузки сайта зависит не только от внутренних, но и от внешних факторов. К последним относят локацию сервера и его удаленность от конечного сервера. Во многих случаях нужно проверять скорость загрузки сайта из определенного региона, так что сервис в этом плане весьма удобен.
Чтобы проверить время до получения первого байта страницы, указываем домен:
При необходимости – выбираем локацию (+ устройство):
Нажимаем Start Test:
Тест займет от десятка секунд до нескольких минут. Интересующая нас характеристика будет отображаться в самом первом столбце – First Byte:
Мне нравится, что Webpagetest позволяет использовать дополнительные настройки. Например, можно выбрать тип подключения (по кабелю, кастом, несколько вариаций 3G, 4G и LTE, DSL):
Для более точного тестирования и выполнения специфических задач можно заблокировать Java Script, очистить кэш SSL-сертификата, захватить tcpdump, можно добавить кастомный хедер или выполнить собственный скрипт:
Приятно, что есть пакет настроек Chromium:
Можно задать правила для авторизации с логином и паролем:
Есть возможность добавить собственный скрипт:
Можно симулировать сбой определенного домена:
Также есть функция, позволяющая заблокировать требуемые домены:
Обязательно проверяйте время до получения первого байта не только на главной, но и на других ключевых страницах, особенно в карточках и категориях. Даже если главная выдает неплохой TTFB, сайт все равно может загружаться очень медленно.
РаgeSpeed Insights
Многофункциональный инструмент, который не только показывает скорость загрузки сайта по нескольким важным параметрам, но и указывает ошибки, которые необходимо устранить для ускорения сайта. Есть поддержка не только десктопа, но и мобильных устройств.
Чтобы проверить время до получения первого байта страницы, необходимо указать домен в поисковой строке и нажать кнопку «Анализировать»:
Будут указаны результаты имитации загрузки страницы и сопутствующие данные:
В блоке рекомендаций отобразятся все проблемы, которые снижают скорость загрузки страниц и тормозят сайт:
Отчет довольно большой, но зато полный и затрагивает практически все аспекты, влияющие на скорость загрузки сайта:
Если существуют проблемы со временем ТТFB, будет отображаться рекомендация «Сократите время ответа сервера». В нашем случае все нормально:
Отчет довольно большой, но зато полный и затрагивает практически все аспекты, влияющие на скорость загрузки сайта:
Инструменты браузера
Чтобы проверить время до получения первого байта страницы, можно воспользоваться встроенным отладчиком в браузере. Он есть в Google Chrome и Mozilla Firefox. В обоих браузерах он вызывается аналогичным образом: при помощи F12 или сочетания горячих клавиш Ctrl + Shift + I.
Покажу, как найти показатель TTFB в браузере Mozilla Firefox:
1. запускаем отладчик;
2. выбираем пункт «Сеть» (либо – Network);
3. нажимаем клавишу F5;
4. выбираем фильтрацию HTML (цифрами на скриншоте обозначен порядок выбора пунктов для попадания в необходимый раздел)
Отчет довольно большой, но зато полный и затрагивает практически все аспекты, влияющие на скорость загрузки сайта:
5. Смотрим раздел «Тайминги»:
Указанное значение и есть искомый нами ТТFB.
Netpeak Spider
Настоящий комбайн, который используется для полноценной SEO-оптимизации и проведения соответствующего аудита. Удобство этого инструмента в том, что он сканирует TTFB сразу на всех страницах сайта, подсвечивая самые медленные из них в окне результатов анализа. Чтобы проверить время ответа сервера, достаточно указать домен и выбрать поиск по всему сайту:
Мне нравится, что инструмент показывает все сопутствующие ошибки сайта, которые влияют на скорость загрузки, в правом углу экрана:
Google Analytics
Аналитика Google – это удобный и функциональный инструмент для получения детальной статистики по всем посетителям сайта. Она также позволит узнать скорость загрузки вашего сайта – для этого необходимо обратиться в раздел «Поведение» – «Скорость загрузки сайта» – вкладка «Обзор»:
Нас интересует параметр, выделенный красным прямоугольником:
Основные причины продолжительного ответа сервера
Перечислять все причины долгого ответа сервера в рамках данной статьи не имеет смысла – их слишком много. Поэтому скажу о самых частых из них.
Итак, наиболее часто встречаются четыре проблемы, приводящие к росту TTFB:
Как уменьшить TTFB
Чтобы уменьшить TTFB, необходимо устранить бо́льшую часть найденных ошибок из отчета PageSpeed Insights. Да, сервисов для оценки TTFB много, но PageSpeed Insights дает практические рекомендации – что именно нужно сделать, чтобы ускорить сайт, с позиции Google. После проработки всех замечаний в отчете PageSpeed Insights скорость загрузки веб-ресурса должна заметно вырасти.
Но иногда этих действий бывает недостаточно. Предлагаю рассмотреть четыре важных фактора, которые влияют на параметр TTFB.
Кэширование страниц
Если кэширование страниц на вашем сайте отключено, сервер будет вынужден заново генерировать страницу, к которой обращается каждый новый посетитель сайта. Если таких страниц и самих посетителей очень много, то скорость загрузки сайта снизится. Чтобы решить эту проблему, необходимо задействовать серверное кэширование. При активном кэшировании страница не будет генерироваться заново при каждом новом обращении – посетителю будет просто отдаваться уже ранее созданная страница.
Когда я создавал первый сайт, время загрузки страниц на нем было вполне приемлемым. Но по мере того, как сайт стал разрастаться (появлялись новые страницы, обновлялась коллекция медиафайлов), скорость загрузки значительно снизилась. После включения серверного кэширования мне удалось понизить TTFB вдвое
Оптимизация БД
Если время ответа сервера остается неприемлемым – значит пришло время заняться базой данных. Проблемы с отсутствием оптимизации БД возникают у тяжелых сайтов, которые имеют десятки тысяч и сотен страниц. Особенно часто их испытывают интернет-магазины.
Правило одинаковое для всех типов сайтов: чем больше выполняется запросов, тем дольше будет формироваться страница. Соответственно, увеличится время ответа сервера.
Для формирования каждого блока на сайте используется одновременно несколько десятков запросов.
Блок рекомендации, например, может формироваться очень долго – для его генерации нужно определить и посчитать сразу несколько параметров.
Задача, таким образом, очевидна: необходимо минимизировать суммарное число запросов к БД. Чтобы сделать отладку и в дальнейшем идентифицировать наиболее тяжелые запросы, понадобятся технические специалисты, включая программиста.
PHP-расширения
Уменьшить показатель TTFB можно при помощи так называемых акселераторов. PHP-акселератор представляет собой специальное расширение, которое обрабатывает сценарии, кэшируя байт-код. Использование акселератора положительно влияет на общую скорость загрузки всего сайта.
Принцип работы акселератора построен на предварительном кэшировании PHP-кода. Использование PHP-акселератора позволяет частично освободить ресурсы системы при обработке PHP-файлов.
Использовать акселератор можно на любых сайтах. Я рекомендую воспользоваться любым, который подходит технически, из этого списка:
Серверные ограничения
Часто время ответа сервера страдает из-за того, что сервер не обладает требуемым уровнем производительности. В таком случае необходимо обратить внимание на то, как сервер отрабатывает предельные нагрузки. Если сайт часто падает или загружается очень медленно, переезд на более производительный вариант хостинга может стать наиболее продуманным и эффективным сценарием.
Конфигурация сервера обязательно должна быть с запасом! На случай непредвиденных ситуаций, например, скачков посещаемости. Естественно, хостинг должен быть платным и предусматривать масштабирование вашего проекта. Рано или поздно вам придется увеличить следующие лимиты:
Комментирует отдел разработки TexTerra
Для быстрой загрузки сайта важны три основные переменные:
1. содержимое сайта;
2. сторона сервера;
3. сторона пользователя.
Каждый аспект можно рассматривать долго, но выделю основные моменты, которые замедляют загрузку.
Со стороны содержимого сайта замедлять загрузку может:
1. JavaScript
Существенная часть элементов для взаимодействия пользователя с сайтом работает на JS. При загрузке страницы браузер может уделять большое количество времени загрузке скриптов, особенно если они не оптимизированы и совершают избыточные действия.
Решение: оптимизировать, избавиться от лишнего кода. Задействовать асинхронную загрузку, которая не зависит от загрузки остальных элементов страницы. Также можно разместить крупные скрипты в заключительной части кода страницы, перед
Время до первого байта: что это такое и почему это важно
Сейчас я работаю над проектом для одного клиента. Речь идёт о сайте из сферы электронной коммерции, поэтому меня очень сильно интересуют некоторые аспекты производительности. Для начала это — различные показатели, характеризующие время загрузки сайта. Дальше — это время начала рендеринга страницы, которое важно для тех посетителей, которые хотят, после захода на сайт, увидеть его содержимое как можно быстрее (в эту категорию, естественно, попадают все посетители сайта). Есть среди интересующих меня показателей производительности и такие, которые отражают специфику деятельности моего клиента. Например: «Насколько быстро загружается основное изображение товара?». Анализ всех этих показателей способен дать ценные сведения о состоянии проекта.
Однако есть один показатель, которому, как кажется, фронтенд-разработчики часто не уделяют должного внимания. Речь идёт о времени до первого байта (Time to First Byte, TTFB). Это можно понять, можно и хотя бы отчасти простить разработчикам такое отношение к TTFB, особенно учитывая то, что они видят этот показатель как нечто, зависящее только от бэкенда проектов. Но если попытаться буквально в двух словах выразить проблему, касающуюся этого показателя, то можно сказать следующее: «Хотя хорошее значение TTFB не обязательно означает того, что демонстрирующий его сайт можно счесть быстрым, плохой показатель TTFB практически гарантированно указывает на проблемы с производительностью проекта».
Даже если учитывать то, что фронтенд-разработчик может быть в таком положении, в котором он не способен самостоятельно повлиять на бэкенд и на TTFB, важно учитывать то, что высокие значения TTFB способны заметно повредить производительности сайта. В результате усилия фронтенд-разработчика, стремящегося к скорости сайта, будут напоминать игру в догонялки. Это относится, например, и к оптимизации изображений, и к минимизации объёмов материалов, входящих в состав важнейших разделов проекта, и к асинхронной загрузке веб-шрифтов. Нельзя сказать, что, зная это, можно опустить руки и отказаться от оптимизаций фронтенда. Но если показатель TTFB слишком высок, то все подобные оптимизации напоминают попытки исправить некую проблему в условиях, когда она уже нанесла вред, и когда исправлять эту проблему уже слишком поздно. Собственно говоря, именно поэтому тем, кто занят разработкой фронтенда, очень важно пристально следить за показателем TTFB, и очень важно, при появлении слишком высоких его значений, принимать меры к его улучшению.
Что такое TTFB?
Показатель TTFB выглядит не особенно информативным (изображение в полном размере)
TTFB — это показатель, который выглядит, мягко говоря, непрозрачным. На него так много всего влияет, что у меня возникает такое ощущение, будто мы всё время просто отмахиваемся от его серьёзного анализа. Многие предполагают, что TTFB — это просто время, необходимое серверу на то, чтобы подготовить ответ, но это, на самом деле, лишь малая часть того, что влияет на TTFB.
Первое, на что мне хотелось бы обратить ваше внимание, это то, узнав о чём, люди обычно очень удивляются. Речь идёт о том, что в TTFB входит время, которое запрос от клиента идёт по сети к серверу, и время, которое занимает путь ответа сервера клиенту. Речь идёт о так называемом «времени приёма-передачи» (Round Trip Time, RTT). TTFB — это не просто некое время, потраченное сервером на подготовку ответа. Это ещё и время которое тратится в пути данными, идущими от клиента к серверу и от сервера к клиенту (в составе этих данных, понятно, и находится интересующий нас «первый байт»).
Теперь мы, вооружённые этим знанием, легко можем понять причину того, что при просмотре сайтов с мобильных устройств показатель TTFB часто оказывается просто неприлично большим. Вполне возможно, что раньше вы в подобных ситуациях задавались примерно таким вопросом: «Уверен, сервер не знает о том, что я смотрю сайт с мобильного. Как он тогда увеличивает TTFB?». Причина этого в том, что, как правило, мобильные сетевые соединения — это соединения с высокой задержкой. Если показатель RTT, отражающий время, необходимое данным для прохождение пути от телефона к серверу и обратно, составляет, например, 250 мс, то на соответствующее значение вырастет и TTFB.
Если бы мне хотелось, чтобы читатели этого материала вынесли бы из него лишь одну важнейшую идею, то я сформулировал бы эту идею так: «Сетевые задержки влияют на TTFB».
Что ещё влияет на TTFB? На самом деле — уйма всего. Вот далеко не полный список того, что вносит вклад в формирование этого показателя. Пункты этого списка расположены в произвольном порядке.
Снятие покрова тайны с TTFB
Теперь, надеюсь, TTFB выглядит уже не таким уж и таинственным показателем. А если потратить немного времени на реализацию API Server Timing, то можно приступать к измерениям хитрых серверных временных показателей и к отправке их на клиентские системы. Это позволит веб-разработчикам обнаруживать и устранять потенциальные узкие места производительности, которые раньше были скрыты от их взоров.
Именно этим механизмом мы воспользовались в прошлом году при работе над BBC iPlayer.
Новый заголовок Server-Timing можно добавить к любому ответу (изображение в полном размере )
Теперь, прямо в браузере, можно видеть структуру TTFB (изображение в полном размере)
Если вы хотите реализовать у себя API Server Timing — взгляните на этот материал.
Итоги
Очень важно, чтобы веб-разработчики понимали бы масштабы влияния TTFB на всё то, что называют «производительностью сайтов». Время до первого байта — это некая граница, после пересечения которой можно говорить об оптимизации сайта. Чем ниже этот показатель — тем лучше.
Уважаемые читатели! Оптимизируете ли вы свои веб-проекты с учётом TTFB?