Водопад диаграммы диаграммы, которые представляют, как веб-сайт ресурсы загружаются, анализируется двигателем, в сроки, что дает нам возможность увидеть последовательность и зависимости между ресурсами. Он помогает определить, где произошли важные события во время процесса погрузки. Они также могут позволить пользователю легко увидеть, насколько хорошо или плохо производительность их веб-сайта, показывая вам именно то, что замедляет ваш сайт.
Диаграммы водопадов на платформе Dotcom-Monitor могут помочь пользователям определить, где произошли важные события во время процесса загрузки страницы. Водопад диаграммы давайте посмотрим каскадный эффект на несколько задач, и в течение нескольких секунд, пользователь может видеть, как плохо / хорошо производительность веб-сайта, например, сколько ресурсов блокируют параллельные загрузки или сколько строк существует. Пользователь имеет резюме на устройстве, с описательной визуализации статистики устройства на круге диаграммы. Пользователи также могут смотреть фактическое видео загрузки URL в окне браузера.
На скриншоте ниже приведен образец диаграммы водопада, на amazon.com представить, как выглядят водопадные диаграммы. Как вы можете видеть, Есть много различных элементов, которые вступают в игру во время загрузки страницы. Некоторые из этих факторов включают в себя следующее:
- Url
- Местоположение теста
- Браузер (Хром, Firefox, Internet Explorer, мобильные браузеры и т.д. …)
- Подключения
- Количество тестов
- Повторный просмотр
Элементы, используемые в диаграммах водопадов
Интерактивный слайдер: Интерактивный слайдер является показателем производительности каждого элемента с точки зрения миллисекунд. На рисунке ниже, он указал на со стрелкой. Пользователь может перетащить интерактивный слайдер, чтобы увидеть, какой элемент загружается, и в какой момент времени. На этом скриншоте вы можете увидеть выделенные элементы загружаются в 531-ю миллисекунду.
Нагрузка Время Grid: выделенная область ниже называется нагрузка время сетки. Он показывает, сколько времени требуется для загрузки для каждого элемента.
Список элементов:Элементы, существующие на веб-странице, отображаются в списке элементов. Расширение элемента может быть HTML, CSS, GIF и т.д.
Элемент производительности: Пользователь может достичь информации о производительности каждого элемента, который существует в диаграмме водопада.
Когда пользователь нажимает на кнопку конкретного элемента, его приветствует страница производительности, показанная ниже.
Анализируя страницу производительности, пользователь имеет более глубокие знания о деталях ответа. Они могут выбрать желаемые и выпустить кнопку мыши для отображения деталей. Пользователь также может наблюдать за проблемами производительности, обращая внимание на красную отмеченную область,что означает, что есть период падения производительности.
Информация о времени загрузки для отдельныхэлементов : В диаграмме водопада, когда пользователь перемещает курсор на определенном баре, ему показывают детали времени загрузки, которые dnsTime, ConnectTime, SSLTime, RequestTime, FirstByteTime, ResponseTime, StartTime, EndTime, Скорость, которая указывается в красном овале.
Объяснение цветового кодирования: Внутри платформы Dotcom Monitor, представление деталей времени загрузки определяется следующими цветами:
Сроки навигации: Они могут быть показаны в качестве столбца в диаграмме водопада, чтобы показать навигационный старт, перенаправление начала, перенаправление конца, Fetch Start, домен Lookup Start, домен Lookup End, Connect Start, Безопасный запуск соединения, Connect End, Запуск запроса, Начало ответа, Конец ответа, Начало события разгрузки, Выгрузка Конец события, DOM Загрузка, DOM Интерактивный, DOM Содержимое Загруженное событие Начало, DOM Содержимое Загружено Событие End , DOM Complete, Запуск события нагрузки и окончание события нагрузки с цветовой кодировкой (показано ниже в красном овале).
Важно отметить, что в платформе Dotcom Monitor есть функция, которую пользователь может смотреть фактическое видео загрузки URL в окне браузера (см. ниже).
Оптимизация веб-производительности путем понимания водопад диаграммы
Производительность и скорость веб-сайта играет огромную роль. Если ваш сайт не достаточно быстро, пользователь не будет ждать, пока он закончит загрузку. Быстрый веб-сайт увеличивает коэффициенты конверсии и приводит вас к хорошо работать в поисковых системах. Чтобы понять скорость вашего сайта, диаграммы водопада используются. Водопад диаграммы помогут вам определить источник проблемы и являются отличным способом для диагностики того, что замедляет ваши веб-страницы.
В диаграмме водопада, глядя размер файла, который составляет более 1 МБ может привести к вашему сайту, чтобы замедлить. С помощью временной шкалы в диаграмме водопада, пользователь может обнаружить различные фазы загрузки ресурсов и понять, какие фазы замедляют их веб-сайт вниз. Некоторые этапы представлены ниже:
- Получение. Время, необходимое для загрузки файлов. Это первый этап временной шкалы. Большие файлы, такие как неоптимизировали изображения, задерживает время загрузки и поглощает больше пропускной способности, вызывая задержку на веб-сайте. Решение этой конкретной проблемы заключается в том, что пользователь должен оптимизировать мультимедиа за счет уменьшения размера изображений без снижения их качества. Чтобы повысить доступность пропускной способности, пользователь должен хранить изображения на облачном сервере.
- Время ожидания. Время, захваченное сервером для получения ответа. Если времени ожидания слишком много, это может означать перегруженный сетевой сервер или может быть неэффективный код, который должен быть исправлен разработчиками программного обеспечения путем поиска ошибок и исправления кода. Кроме того, утилита кэширования может уменьшить время ожидания. В этом случае пользователь должен перейти от общего хостинга к специальному хостингу.
- Очередь запрос. Удобные соединения HTTP/HTTP2, аутентификация HTTP, выполнение CSS или JavaScript, время подключения SSL, является важным этапом временной шкалы.
- DNS поиск. Состоит время для DNS решить и дает пользователю большой ключ, что замедляет веб-сайт. В целом, большинство скриптов замедляют работу веб-сайтов из-за поиску DNS.
Когда пользователь определяет проблемы, которые замедляют их веб-страницы с помощью водопад диаграммы, они могут начать придумать решение этой проблемы. Некоторые из проблем и их решения представлены ниже.
| Решение | проблемы |
Ссылка на отслеживание страниц | Удалить или удалить используемый инструмент отслеживания |
| Медленный поиск DNS | Пользователь может использовать CDN |
| Медленный конец сервера | Отправить по электронной почте поставщику услуг. |
| Ошибка из-за плагинов | Пользователь может удалить плагины. |
| Неиспользованная/массовая тематическая настройка Пользователь | может нанять веб-разработчика |
Даже abeginner пользователь может быстро понять конкретные причины, которые замедляют их веб-сайт вниз, наблюдая водопад диаграммы. Например, длинные бары означают, что загрузка связанного элемента занимает слишком много времени, красный текст означает получение данных об ошибке, а длинные промежутки между полосами означают время, когда нет запросов.
Как ускорить загрузку веб-сайтов
Используя диаграммы водопада, мы можем создать большой пользовательский опыт, сделав загрузку веб-страницы быстрее.
Уменьшение ширины водопада
Производительность веб-сайта может быть улучшена за счет сокращения количества времени, необходимого для загрузки ресурсов, которые приводят уменьшить ширину диаграммы водопада.
Если есть длинные фиолетовые бары в водопад диаграммы
. Фиолетовый означает время, затраченное на выполнение переговоров SSL/TLS. В случае, если пользователь сталкивается с фиолетовым непрерывно, это означает, что веб-сайт не оптимизирован для TLS. Пользователь должен оптимизировать производительность TLS.
Если на графике водопада много оранжевого. Оранжевый означает первоначальное соединение TCP сделано для вашего сайта. Только 2-6 запросов на конкретное имя хоста должны создать соединение TCP. После 2-6 запросов существующие соединения используются повторно. Когда пользователь сталкивается с большим количеством оранжевого, они должны понимать, что веб-сайт не использует постоянные соединения. При постоянном подключении ширина каждого запроса будет в два раза, так как веб-браузер не собирается делать новые соединения с каждым запросом.
Если есть длинные синие полосы в диаграмме водопада
. Синий цвет означает время, затраченные на загрузку ответа. Если есть длинный синий бар, есть большая вероятность, что это потому, что ресурс слишком велик. Уменьшение размера файла может помочь решить проблему. Пользователь может уменьшить размер за счет оптимизации изображения или сжатия HTTP.
Если есть слишком много зеленого водопада диаграммы
. Зеленый цвет означает, что браузер ждет, чтобы получить содержимое. Чтобы уменьшить зеленый цвет, пользователь должен переместить статическое содержимое на CDN.
Снижение высоты диаграммы водопадов
Скорость веб-сайта может быть улучшена за счет уменьшения количества запросов, которые браузер должен выполнять для загрузки веб-страницы, что приводит к уменьшению высоты водопада. Пользователь должен просмотреть все их содержание на каждой странице и решить, если они действительно в ней нуждается вообще.
Если есть слишком много файлов JavaScript/CSS, которые меньше, чем 2kb
. Пользователь должен включать содержимое этих файлов непосредственно в HTML через inline, , or
Теги.
Если на диаграмме водопада слишком много файлов JavaScript/CSS.
Пользователь должен объединить их с плагином CMS или как часть процесса сборки. Это действие уменьшит количество сделанных запросов, увеличит скорость страницы.
Если Есть слишком много 302 перенаправляет
. желтые строки означают перенаправления, что означает, что ссылки на странице ошибочно сделаны или устарели, что создает ненужные перенаправления, которые увеличивают высоту водопада. Решение заключается в замене этих ссылок прямыми ссылками.
Увеличение времени рендера
Чтобы улучшить время рендеринга, пользователю следует оптимизировать заказ запросов ресурсов, который перемещает зеленую линию Start Render влево.
Если запросов на отдельные файлы CSS слишком много.
Прежде чем браузеры начнут визуализацию страницы, они ждут, пока все CSS будет загружен. Пользователь должен вкоть или объединить эти файлы CSS.
Если пользователь видит вызовы для загрузки библиотек JavaScript.
JavaScript включает в себя может блокировать визуализацию страницы. Пользователь должен переместить их ниже на странице.
Если пользователь видит внешние шрифты.
Пока браузер не загружает внешний шрифт, он ничего не рисует. Пользователю следует избегать использования внешних шрифтов.
Первый визит и повторный визит. Что важнее?
На основе визита пользователя, может быть два типа водопад диаграммы созданы: Первый визит и повторите визит. Какая разница?
Пустой кэш (Первый взгляд): Пользователь впервые получает доступ к веб-сайту и не имеет кэшированных данных. Типичные инструменты на основе браузера собираются очистить кэш, прежде чем делать запросы. Другими словами, люди посещают веб-сайт в первый раз.
Кэшированный режим (Повторный визит): Пользователь получает доступ к веб-сайту во второй раз, подражая второму посещению с точки зрения пользователя, который включает в себя все файлы, теперь кэшированные в локальном хранилище. Другими словами, поскольку люди посещали ваш сайт заранее, теперь они могут иметь ваши изображения, CSS обналичелись в своем браузере, так что система не должна доставить много для них.
На скриншотах ниже, вы можете увидеть, как различные первый визит водопад диаграммы и повторить визит водопад диаграммы.
Одна из важных вещей, чтобы понять, что пустой кэш занимает 6,8 секунд для загрузки, в то время как повтор, который является кэшированный режим, занимает 1,9 секунды.
Если веб-сайт работает хорошо, это будет тот же случай с точки зрения сравнения таймингов, с пустым кэшем занимает больше времени, чем кэшированная версия. Причина в первом посещении, инструменты будут опорожнять кэш перед тем, как сделать запросы, и в повторном посещении, система будет иметь файлы, которые могут быть кэшированы в локальном хранилище, что приводит к более короткому времени для загрузки веб-сайта.
Диаграмма Кэшированный режим (Repeat View) имеет меньше строк, что означает, что было загружено гораздо меньше ресурсов. Это хороший пример веб-сайта, где эффективное кэширование используется.
Без изменения ничего на сайте, повторный визит будет реагировать быстрее из-за элементов, кэшированных. Первый раз посещение займет больше времени, чем повторный визит. Если что-то не так на веб-сайте, который замедляет веб-сайт, пользователь исправляет его. И они проверяют веб-сайт снова. Они учитывают такие факторы, как геолокация, CDN-серверы и PoP (точки присутствия). Они могут видеть из водопада диаграммы, какой элемент замедляет процесс. Может быть, веб-сайт использует слишком много процессора. После исправления, они могут проверить веб-сайт снова.
Первый раз посещение важно, потому что пользователь понимает, сколько времени требуется, чтобы загрузить фотографии и другие ресурсы. Повторный визит также важен, потому что после процесса кэширования пользователь должен оценить, сколько времени требуется для загрузки оставшихся элементов. Кроме того, пользователь наблюдает, какие ресурсы кэшируются, глядя на водопад диаграммы с первого визита и повторного посещения. Таким образом пользователь может понять производительность веб-сайта и проблемы с контентом с ресурсами.
Хотите узнать, какие элементы могут замедлять работу вашего сайта? Запустите бесплатный тест скорости веб-сайта и просмотрите свои результаты с помощью каскадных диаграмм и отчетов о производительности.
Как использовать диаграмму водопада для того чтобы контролировать ваше правильное распределение CDN
Сеть доставки контента (CDN) — это географически распределенная группа серверов, оптимизированных для доставки статического контента конечных пользователей. Этот статический контент может быть практически любого рода данных, однако CDNs, как правило, используются для доставки веб-страниц и связанных с ними файлов, аудио, потокового видео и больших пакетов программного обеспечения.
Использование CDN
Краевые серверы CDN повышают скорость, преодолевая разрыв между ресурсами веб-сайта и его посетителями. Вместо того, чтобы делать запросы непосредственно к происхождению веб-сайта, пользователи подключаются к нескольким платформам распределения CDN, которые есть у провайдера. Чем ближе перемещается запрос, тем больше времени сэкономлено. Кроме того, CDN хостинг вмещает сжатие файлов, что улучшает общий просмотр, потому что меньшие размеры файлов приравниваются к более быстрой скорости загрузки.
Использование диаграмм водопада для мониторинга CDNs
На скриншоте диаграммы водопада ниже область URL-адреса мониторинга представляет список всех отдельных элементов, а также их размер и производительность справа.
Если пользователь использует CDN, он может увидеть много файлов и ресурсов, поступающих из одного источника, что является одним из способов определения правильной настройки CDN.
Вам нужен CDN?
Диаграммы водопада позволяют пользователю узнать, как задержка влияет на скорость веб-сайта. Вернувшись к цветной диаграмме ранее в статье, желтый бар означает, что веб-браузер ждет данных с сервера доменных имен (DNS). Как правило, 100ms время ожидания принимается как обычно, в то время как 400ms считается медленным. При проблеме скорости его можно интерпретировать как ресурс, который занимает слишком много времени для загрузки, или его размер слишком велик. Кроме того, это может означать, что скорость передачи веб-сервера слишком медленно. Для этой конкретной проблемы использование CDN может быть решением для сокращения времени ожидания.
Кроме того, если пользователь испытывает слишком много времени ожидания, чтобы получить ответ, это может означать, что содержание веб-сайта физически дальше от посетителя. Чтобы иметь возможность решить, есть ли необходимость в CDN, местоположение сервера должно быть известно. Для этого можно использовать такую платформу, как Dotcom-Monitor, для мониторинга местоположения, удаленного от сервера. Просмотрите диаграмму водопада и строки для запросов и ресурсов. Если время ожидания составляет более 100 мс, пользователю следует рассмотреть возможность использования CDN.
Попробуйте полную платформу Dotcom-Monitor бесплатно в течение 30 дней.
