Производительность и устойчивость: стресс-тестирование сторонних ресурсов

При создании любого веб-сайта и для его работы требуются сторонние ресурсы: веб-аналитику, шрифты, CDN, рекламные платформы и многие иные.

Большинство проблем производительности веб-сайтов связано с внешними ресурсами. В данной статье я рассмотрю пару инструментов для идентификации и сортировки возникших неполадок.

Сводка Bottom-Up

Чтобы быстро определится с главным виновником проблемы, я обычно использую сводку производительности Bottom-Up в Chrome DevTools.

После того как создадите запись производительности Performance страницы веб-сайте, вы увидите панель с вкладкой Bottom-Up. Отсортируйте данные при помощи фильтра Group by Domain. Сейчас мы видим, откуда появляется задержка:

Производительность и устойчивость: стресс-тестирование сторонних ресурсов

Функцию Bottom-Up в Chrome DevTools.

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

Блокировка запроса

Начиная с Chrome 59, в браузере появилась опция, позволяющая запретить отправку запросов на определенные URL. Данная функцию блокирует исходящие запросы, и это отличный метод увидеть отсутствие ресурсов на текущей странице.

Производительность и устойчивость: стресс-тестирование сторонних ресурсов

Опция блокировки запросов от определенных доменов в DevTools.

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

Применение

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

Короче говоря, эта функцию хорошо подходит для анализа веб-сайтов и определения того, что происходит, когда мы удаляем сторонние ресурсы из загрузки страницы.

Charles Proxy

Это прокси-сервер, в котором выводятся все переданные и полученные данные между компьютером и сетью. Но в данный момент мы больше заинтересованы в возможности throttling. Это средство моделирования разных условий подключения к сети. Инструмент может:

  1. Ограничить скорость соединения, имитируя плохую сеть. Это идеально подходит для тестирования производительности. Получаемые результаты гораздо точнее, чем выдает аналог в Chrome DevTools.
  2. Способность ограничивать работу определенных хостов.
Производительность и устойчивость: стресс-тестирование сторонних ресурсов

Параметра throttling в Charles Proxy.

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

Применение

Это отличный метод оценить работу веб-сайта при медленном интернет-соединении. А также выявить ресурсы, которые будут замедлять работу веб-сайта по какой-либо причине. Что произойдет, если у Google Fonts возникнут проблемы? Что произойдет, если Typekit подвергнется DDoS-атаке? Имитация замедления работы веб-сайта сторонними сервисами – это наглядный метод оценить уязвимость площадки.

Серверы Blackhole

Что произойдет, если сторонний сервис в полном объеме отключится? Следует оценить, как веб-сайт поведет себя в подобной ситуации.

Сервер Blackhole может использоваться для маршрутизации стороннего трафика через конечную точку, которая заставляет запросы исчезать, воссоздавая последствия полного отключения от Сети.

WebPagetest сделал сервер Blackhole доступным по адресу 72.66.115.13. Можно легко указать конкретные домены в файле hosts, например:

72.66.115.13 platform.twitter.com72.66.115.13 connect.facebook.net72.66.115.13 fonts.googleapis.com72.66.115.13 assets.adobedtm.com72.66.115.13 fast.fonts.net

Сейчас, если очистить DNS-кэш браузера и компьютера, обнаружите, что все запросы к внешним ресурсам прекратятся.

Допустим, у вас есть ресурс с элементами render-blocking, размещенный на внешнем домене. К примеру:

  • Скрипт, в котором нет атрибутов async или defer(Adobe Tag Manager);
  • CSS файлы(Google Fonts).

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

1 минуту 20 секунд.

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

Ниже приводится пример событий DOMContentLoaded и Load, происходящих на веб-сайте, где скрипт render-blocking размещен на ином домене. Браузер завис на 78 секунд, ничего не отображая на странице, пока не истекло время ожидания.

Производительность и устойчивость: стресс-тестирование сторонних ресурсов

Задержка в 80 секунд во время того, как DOMContentLoaded и Load были офлайн.

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

В случае с CSS-файлами Google Fonts надо использовать более надежную технику загрузки шрифтов. Для JavaScript лучше применять async или defer, если есть такая функция.

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

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

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