Как читать диаграмму Waterfall Chart

Вот уже пару лет у всех на слуху такой инструмент как Google PageSpeed Insights, но есть и более старые и крутые инструменты для контроля загрузки страниц вашего сайта. Сегодня я предлагаю поговорить о таком крутом инструменте как диаграмма Waterfall Chart (Диаграмма водопада). Я думаю, многие ее видели при поиске различных сервисов оценки скорости загрузки сайта, но понимают, как она работает только единицы.

Для чего нужна и как работает диаграмма Waterfall?

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

Если вы запустите подобную диаграмму, вас может смутить куча непонятных терминов. Для примера я возьму сайт одного из моих клиентов которому мы делали сайт под ключ, и покажу его диаграмму (vgamp.com). Использовать я буду инструмент gtmetrix.com. Мне нравится этот сервис за счет комплексной проверки сайта, самыми разными инструментами и после анализа в нем тоже можно использовать Waterfall диаграмму. Итак, пример проверки

waterfall chart диаграмма

В конце первого столбца мы можем видеть количество запросов, в моем примере их 74 и размер всей страницы 472.6 кб. Справа можно увидеть время загрузки страницы 1,29 секунды и момент полного завершения события onload 1.38 секунд.

В этом примере, в первом столбце, вы можете видеть, что все запросы с методом GET (получение элементов), бывают также POST запросы, но сейчас не о них. Для уменьшения GET запросов можно использовать спрайты, это когда все мелкие изображения на странице (в основном это иконки) собираются в одно изображение и потом средствами CSS выводятся в фоне элементов, а для вывода разных просто фон прокручивается (меняет позицию). Достаточно удобный метод для иконок, но при использовании SVG элементов, у вас есть возможность встраивать их в страницу и тогда серверу не нужно их искать, они будут генерироваться во время загрузки основного HTML кода.

Если в первом столбце вы наведете на имя ресурса (картинки,  скрипта … ), то увидите полный путь где расположен подгружаемый ресурс на вашем или стороннем сайте. Для просмотра более подробной информации нужно просто нажать на имя ресурса, как показано на изображении ниже.

подробный анализ скорости загрузки сайта

Рассмотрим каждый важных для скорости загрузки страницы пункт по отдельности:

  1. Status — код ответа сервера, правильно будет, если он стоит 200. Если вы получаете код 404, 301 или 500 значит, что-то пошло не так и это будет замедлять вашу страницу. Подробнее о кодах ответа сервера на Wikipedia.
  2. Content-encoding — в данном случаи показывает, что элемент был сжат методом GZip и это хорошо, так как такие элементы будут грузиться быстрее.
  3. Content-type — показывает какого типа проверяемый элемент.
  4. Server — это сервер, который настроен у вас на хостинге, в нашем случаи это nginx.
  5. Scheme — у нас это HTTP, работающий через шифрованные транспортные механизмы SSL. Полезно для сохранности данных при передаче на сайте, особенно для магазинов. Важно чтобы все подключенные файлы на вашем сайте имели один тип протокола, такой же как на вашей главной странице. Если у вас HTTPS, то и у всех файлов должен быть HTTPS, исключением могут быть внешние ссылки на сайты (не файлы).
  6. Path — путь к проверяемому файлу.

Легенда одного файла при оценке производительности сайта

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

Легенда загрузки страницы и данные на ней

Легенда показывает, что происходит с запросом к файлу в виде разных цветовых решений. Фаз запроса в легенде может быть много, основные из них это: блокировка (светло серый), отправка (красный), ожидание (фиолетовый), получение (серый). Цвета могут отличаться на разных сервисах, но определения обычно одинаковые.

Краткое определение отдельных фаз запроса, которые мы можем увидеть:

  • Blocking: время, проведенное в очереди браузера, ожидающее сетевого подключения.
  • DNS lookup: время для разрешения DNS.
  • Connecting: время, необходимое для создания TCP-соединения.
  • Sending: время отправки данных запроса на сервер.
  • Waiting: время ожидания ответа с сервера.
  • Receiving: время загрузки тела ответа.

Пока я не написал интерпретацию статьи на русском, вы можете почитать о разных фазах запроса подробнее тут. Это если вы хотите совсем серьезно понимать в этом.

Пределы загрузки документа

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

Когда пользователь начинает видеть страницу, время загрузки страницы

Рассмотрим, что означают эти линии:

  1. Первое отображение сайта, хотя многие кто анализируют скорость загрузки сайтов, связывают вывод элементов уже с этапом [3].
  2. Полная загрузка элементов DOM элементов страницы. Происходит, когда все элементы загружены и проанализированы.
  3. Завершение события onload. В некоторых случаях элементы могут завершать или начинать загрузку после события onload.
  4. Полная загрузка до и после события onload.

Ваши диаграммы Waterfall скорее всего будут сложнее чем эта, но основные принципы мы рассмотрели и разобрали наш инструментарий.

Как ориентироваться и оптимизировать страницу с помощью диаграммы Waterfall

Теперь когда мы уже знаем многое об этой диаграмме рассмотрим некоторые моменты которые упрощают определение проблем на ней.

На примере ниже есть снимок с неправильным ответом сервера 404 и 403, рядом вы можете увидеть, насколько замедлилась загрузка страницы при этом.

Диаграмма водопада анализ ошибок сервера

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

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

Очень долгая загрузка страницы

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

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

waterfall chart example

Спасибо за то что дочитали эту статью до конца. Надеюсь эта статья немного приоткрыла вам глаза на, то как разбирать диаграммы водопада.

Если у вас будет необходимость ускорить сайт по диаграмме waterfall или PageSpeed, или просто вам не нравится, как долго ваш сайт грузится, смело пишите мне я помогу. Услуга будет не бесплатной, так как время стоит денег, если у вас просто появились вопросы по статье, то пишите в комментариях или в моих социальных сетях, где мы вместе их будем решать.


Купить хостинг WordPress
/* Репетитор по wordpress
Услуги репетитора онлайн. Список курсов которые я веду
  • Базовый курс по веб-дизайну;
  • Верстка сайтов;
  • Общий курс по CMS WordPress и продолжение курса по разработке шаблонов;
  • Разработка сайтов на PHP.
Подробнее читайте на странице репетитор по WordPress
*/

Николаенко Максим

Директор веб-студии ProGrafika. Занимаюсь разработкой, дизайном и продвижением веб-сайтов. Всегда рад новым читателям блога и хорошим клиентам.


Вам может также понравиться...

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Шаблоны для WordPress
Самый лучший хостинг в Украине
Стабильный хостинг для Drupal