Time to stop time оптимизация

Обновлено: 07.07.2024

Всех приветствую! Присаживайтесь поудобнее, налейте вкусного чаю и давайте обсудим довольно популярную и животрепещущую тему: оптимизацию производительности сайта.

Одним из инструментов для анализа качества и usability страницы с составлением отчёта является PageSpeed Insights (далее просто PageSpeed).

Какие вопросы я затрону в статье:

что такое PageSpeed;
как измеряется и оценивается производительность;
лирическое отступление: critical render path;
способы оптимизации PageSpeed;
для чего это нужно?

оценить производительность;
оценить доступность для людей с ограниченными возможностями;
определить, насколько сайт оптимизирован для SEO;
получить рекомендации по повышению этих показателей.

При анализе мы получаем два результата: для десктопной и мобильной версий, где значения от 0 до 49 являются низкими, от 50 до 86 — средними, и от 87 до 100 — высокими.

На текущий момент в основном используются: имитация мобильного устройства Nexus 5 на Android, сеть 3G со скоростью 8 мегабит/с., задержка 150 миллисекунд, рендерится на европейских серверах и применяется троттлинг процессора.

Показатели с каждым запуском анализа могут колебаться из-за A/B-тестов, изменений маршрутизации интернет-трафика, дополнительных активных расширений браузера, которые добавляют или изменяют сетевые запросы, и антивирусов.

Если говорить о критериях оценки, то основные представлены ниже:

First Contentful Paint — первичная отрисовка контента; показатель, определяющий интервал между началом загрузки страницы и появлением первого видимого блока, текста или изображения. Иными словами, время от ответа сервера до отрисовки, белый экран. Ответ сервера при этом не входит в этот показатель.

Speed Index — индекс скорости загрузки, который показывает, как быстро загружается содержимое.

Largest Contentful Paint — время отрисовки крупного содержимого, находящегося на первом экране. Под крупным содержимым мы понимаем картинки, видео или текст.

Time to Interactive — время, в течении которого страница становится полностью готова к взаимодействию с пользователем.

Total Blocking Time — сумма всех периодов от первой отрисовки содержимого, когда скорость выполнения задач превышала 50 мс. Измеряется в миллисекундах.

Cumulative Layout Shift — процентная величина, на которую смещаются видимые элементы области просмотра при загрузке.

Прежде чем описывать способы улучшения этих показателей, важно вспомнить, что такое Critical Render Path. Схематично шаги по отрисовке сайта выглядят следующим образом:

запрос на сервер;
получение HTML-документа;
построение DOM-дерева;

получение и отработка JS-кода;
построение render-дерева;
отрисовка страницы

Содержание

Бюджеты производительности

О том, что такое бюджеты производительности, я рассказывал в предыдущей статье.

Для работы с бюджетами в Perfectum Synthetic используется соответствующий раздел конфигурации мониторинга. Можно установить бюджет как для временных, так и для ресурсных показателей проекта.

Для отдельных страниц приложения могут устанавливаться собственные бюджеты. А каждый показатель может иметь бюджет как для десктопной, так и для мобильной версии страницы.

Вся информация о превышении бюджетов будет отображаться в соответствующем разделе отчета производительности:

Как уменьшить TTFB

Чтобы уменьшить TTFB, необходимо устранить бо́льшую часть найденных ошибок из отчета PageSpeed Insights. Да, сервисов для оценки TTFB много, но PageSpeed Insights дает практические рекомендации – что именно нужно сделать, чтобы ускорить сайт, с позиции Google. После проработки всех замечаний в отчете PageSpeed Insights скорость загрузки веб-ресурса должна заметно вырасти.

Но иногда этих действий бывает недостаточно. Предлагаю рассмотреть четыре важных фактора, которые влияют на параметр TTFB.

Кэширование страниц

Если кэширование страниц на вашем сайте отключено, сервер будет вынужден заново генерировать страницу, к которой обращается каждый новый посетитель сайта. Если таких страниц и самих посетителей очень много, то скорость загрузки сайта снизится. Чтобы решить эту проблему, необходимо задействовать серверное кэширование. При активном кэшировании страница не будет генерироваться заново при каждом новом обращении – посетителю будет просто отдаваться уже ранее созданная страница.

Когда я создавал первый сайт, время загрузки страниц на нем было вполне приемлемым. Но по мере того, как сайт стал разрастаться (появлялись новые страницы, обновлялась коллекция медиафайлов), скорость загрузки значительно снизилась. После включения серверного кэширования мне удалось понизить TTFB вдвое

Оптимизация БД

Если время ответа сервера остается неприемлемым – значит пришло время заняться базой данных. Проблемы с отсутствием оптимизации БД возникают у тяжелых сайтов, которые имеют десятки тысяч и сотен страниц. Особенно часто их испытывают интернет-магазины.

Правило одинаковое для всех типов сайтов: чем больше выполняется запросов, тем дольше будет формироваться страница. Соответственно, увеличится время ответа сервера.

Для формирования каждого блока на сайте используется одновременно несколько десятков запросов.

Блок рекомендации, например, может формироваться очень долго – для его генерации нужно определить и посчитать сразу несколько параметров.

Задача, таким образом, очевидна: необходимо минимизировать суммарное число запросов к БД. Чтобы сделать отладку и в дальнейшем идентифицировать наиболее тяжелые запросы, понадобятся технические специалисты, включая программиста.

PHP-расширения

Уменьшить показатель TTFB можно при помощи так называемых акселераторов. PHP-акселератор представляет собой специальное расширение, которое обрабатывает сценарии, кэшируя байт-код. Использование акселератора положительно влияет на общую скорость загрузки всего сайта.

Принцип работы акселератора построен на предварительном кэшировании PHP-кода. Использование PHP-акселератора позволяет частично освободить ресурсы системы при обработке PHP-файлов.

Использовать акселератор можно на любых сайтах. Я рекомендую воспользоваться любым, который подходит технически, из этого списка:

Zend OPcache;
APC;
XCache;
eAccelerator;
WCE (Windows Cache Extension);
PhpExpress.

Серверные ограничения

Часто время ответа сервера страдает из-за того, что сервер не обладает требуемым уровнем производительности. В таком случае необходимо обратить внимание на то, как сервер отрабатывает предельные нагрузки. Если сайт часто падает или загружается очень медленно, переезд на более производительный вариант хостинга может стать наиболее продуманным и эффективным сценарием.

Конфигурация сервера обязательно должна быть с запасом! На случай непредвиденных ситуаций, например, скачков посещаемости. Естественно, хостинг должен быть платным и предусматривать масштабирование вашего проекта. Рано или поздно вам придется увеличить следующие лимиты:

дисковая квота;
нагрузка на базу данных;
разрешенная статическая нагрузка;
почтовая квота.

Заключение

Хорошая производительность проекта не является приложением к экспертизе отдельного человека или целой команды — это всегда результат целенаправленной работы.

И если вы заботитесь не только о скорости разработки, но и о качестве продукта, то внедрение подобных инструментов этому только поспособствует.

Сергей Алмакин Редакция «Текстерры»

TTFB, или время ответа сервера, – это одна из первых характеристик, на которую необходимо смотреть, если скорость загрузки сайта вас не устраивает.

TTFB – зависимая характеристика: уменьшить этот показатель без проведения тщательной и продуманной оптимизации не получится. Давайте разбираться, что такое TTFB, на что влияет это характеристика и как сделать, чтобы сайт загружался максимально быстро.

Анализ данных

Результат работы синтетического мониторинга отображается в виде двух отчетов Lighthouse. Один отчет генерируется для десктопной версии страницы, другой — для мобильной:

Определить собственные характеристики среды можно через настройки аудита.

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

Для предварительной аутентификации, необходимо указать путь к файлу auth-скрипта.

Для чего нам нужно улучшать метрики?

При грамотном использовании этих рекомендаций мы решаем основополагающие задачи: улучшение позиций, увеличение конверсии и снижение нагрузки на сервер. И, как следствие, пользователи довольны, а компания получает прибыль.

Очень ёмко и кратко смысл оптимизации описывает цитата из твиттера Википедии:

Благодаря внедрению клиентского мониторинга производительности, мы с полной уверенностью можем диагностировать проблемные места проекта и составить план для дальнейшей оптимизации.

Однако было бы неплохо иметь инструмент, который еще на этапе разработки позволял бы выявлять возможные регрессы производительности. Именно так родилась идея о создании синтетического мониторинга.

Что такое TTFB (Time to First Bite)

Начнем с теории. Time to First Bite (или сокращенно TTFB, оно же – время ответа сервера) – характеристика, которая обозначает временной интервал до получения самого первого байта страницы, сразу после отправки соответствующего запроса. Чем меньше значение TTFB, тем лучше и быстрее загружаются страницы сайта.

Время ответа сервера тесно связано со временем отправки запроса и временем получения ответа:

Хорошее время отклика – от 250 до 350 миллисекунд, приемлемый отклик – до 500 миллисекунд. Все, что больше, определяется как долгий отклик, и в отчете Google PageSpeed Insights это будет обозначено как проблема.

Проверяем TTFB на своем сайте

Поговорим об инструментах, которые позволят проверить время ответа сервера. Среди них будут как встроенные инструменты браузера, так и специализированные сервисы. Первые удобны, чтобы получить чистые данные «здесь и сейчас», когда доступ к сторонним сервисам отсутствует. Вторые гораздо более универсальны и способны показывать самые разные параметры, связанные со скоростью загрузки сайта. Они также дают советы, которые позволят увеличить скорость загрузки сайта.

Предлагаю рассмотреть те cервисы, с которыми я работал сам – никаких сложностей и других сюрпризов с ними точно не возникнет.

Удобный и функциональный сервис для проверки 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 – это удобный и функциональный инструмент для получения детальной статистики по всем посетителям сайта. Она также позволит узнать скорость загрузки вашего сайта – для этого необходимо обратиться в раздел «Поведение» – «Скорость загрузки сайта» – вкладка «Обзор»:

Нас интересует параметр, выделенный красным прямоугольником:

Как можно улучшить метрики?

используется мультиплексирование;
служебные заголовки передаются в сжатом виде;
повышается безопасность.

Оптимизация изображений

Используйте правильные размеры изображений. На странице не должно быть изображений, размер которых больше, чем можно отобразить на экране пользователя. С помощью «отзывчивых» изображений можно создать несколько версий каждой картинки, а затем через, к примеру, @media-запросы указать нужную для отображения. Также можно воспользоваться ресайзерами: thumbor, npm sharp, imagemagick или любым другим на ваш вкус.

Вне первого экрана важно использовать для всех изображений «ленивую загрузку», она позволяет подгружать картинки по мере необходимости.

Использование критического CSS

Прежде чем браузер отрисует содержимое страницы, он должен получить и обработать всю информацию о макете и внешних стилях для неё. Внешний CSS — это код, загружаемый через внешнюю таблицу стилей. В теории, он может считаться блокирующим, потому что, как сказано выше, браузер не сможет отрисовать страницу, пока этот код не будет обработан. Критический CSS отвечает за стили первого экрана сайта, такой код необходимо заинлайнить внутри <hеad> прямо в HTML-документе, это снижает нагрузку на сервер.

Уменьшайте bundle.js

Минифицируйте JS и CSS, это ускорит анализ скриптов и сократит объём полезной сетевой нагрузки.

Откажитесь от тяжёлых библиотек и асинхронной/отложенной загрузки скриптов

Для сокращения расхода трафика необходимо поддерживать код в актуальном состоянии, своевременно удалять неиспользуемый код. Чтобы не блокировать основной поток, по возможности загружайте сторонние скрипты асинхронно (атрибут async или defer в тегах script , или приоритизация загрузки основного содержимого, к примеру, рекламу грузим после), и при их выборе отдавайте предпочтение более легковесным библиотекам. Если в подгружаемой библиотеке используется менее 10-ти методов, можно рассмотреть вариант самостоятельной реализации этих методов в проекте, но такой подход должен быть хорошо обдуман.

Уменьшайте Critical Render Path

Включает в себя совокупность предыдущих пунктов. Сюда можно добавить «ленивую загрузку» DOM-элементов.

Использование SSR

Server Side Rendering — рендеринг страницы на сервере. В этом случае поисковые роботы получают готовый код сайта, что важно в условиях новых правил ранжирования.

Это основные моменты, которые работают на практике и которые мы применяем у себя в ДомКлик при разработке сервисов.

Метрики

Как упоминалось ранее, Perfectum Synthetic использует Lighthouse. Поэтому рассмотрим, как в этом инструменте происходит общая оценка производительности проекта.

Lighthouse использует значения шести метрик. Каждая метрика отражает состояние разных стадий загрузки страницы и имеет собственный вес, который показывает степень влияния метрики на общий результат.

Ниже приведена соответствующая таблица:

Название метрики	Вес
First Contentful Paint (FCP)	15%
Largest Contentful Paint (LCP)	25%
Cumulative Layout Shift (CLS)	5%
Speed Index (SI)	15%
Time to Interactive (TTI)	15%
Total Blocking Time (TBT)	25%

Метрики FCP, LCP и CLS подробно рассматривались в статье о клиентском мониторинге производительности, поэтому в этой мы рассмотрим остальные — SI, TTI и TBT.

Speed Index

Speed Index (SI) показывает, насколько быстро отображается содержимое страницы в процессе загрузки приложения.

Принцип работы

В основе работы SI лежит понятие визуального завершения (Visually Complete, VC):

Рассмотрим два возможных варианта загрузки страницы:

Оба варианта начинают загрузку и становятся визуально завершенными (VC) за одно и тоже время (5 секунд). Но очевидно, что вариант А гораздо предпочтительнее с точки зрения пользователя. И чтобы увидеть количественную разницу между подобными вариантами загрузки, используется показатель SI.

SI оценивает процент визуального завершения в разные моменты времени:

Стандартный механизм определения VC, используемый, к примеру, в WebPageTest, основывается на анализе оттенков цветовой палитры страницы. Каждые 100 мс происходит сравнение количества оттенков между двумя соседними фреймами:

Однако следует отметить, что в Lighthouse применяется другая модель определения визуальной завершенности. Вместо сравнения количества оттенков цветовой палитры используется индекс структурного сходства (SSIM), который основывается на оценке воспринимаемого качества изображения, включая информацию об изменениях яркости и контраста.

Разобравшись с тем, как происходит расчет показателя VC, представим графически рассмотренные варианты загрузки страницы:

Графики отображают отношение времени загрузки и процента визуальной завершенности.

Область графика под кривой можно представить как отрендеренную часть страницы в определенный момент времени:

Для вычисления SI мы могли бы использовать площадь данной области, однако есть важный нюанс. Напомню, что 5 секунд загрузки которыми мы оперируем, являются временем визуальной завершенности (VC), но они не являются показателем полной загрузки страницы. Это значит, что область под кривой будет увеличиваться пропорционально времени загрузки, при этом увеличивая результат показателя SI.

В то же время использование области графика над кривой будет лишено подобных недостатков, поскольку она всегда ограничена наступлением события VC:

Именно поэтому алгоритм работы SI использует данную область при вычислении результата.

Разумеется, для нахождения площади указанной области (плоской криволинейной фигуры) формула расчета использует определенный интеграл и выглядит следующим образом:

Поэтому чем меньше площадь данной области, а соответственно, и значение SI — тем лучше:

Оценка результатов

При оценке результатов показателя рекомендуется использовать следующие градации:

Способы оптимизации

Как правило, любые оптимизации, направленные на увеличение скорости загрузки страницы, положительно скажутся на показателе SI.

Список данных оптимизаций я приводил в статье о клиентском мониторинге производительности.

Дополнительной рекомендацией будет проверка на отсутствие явления FOIT (Flash Of Invisible Text).