Производительность и устойчивость: стресс-тестирование сторонних ресурсов
При создании любого сайта и для его работы требуются сторонние ресурсы: веб-аналитику, шрифты, 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. Это средство моделирования различных условий подключения к сети. Инструмент позволяет:
- Ограничить скорость соединения, имитируя плохую сеть. Это идеально подходит для тестирования производительности. Получаемые результаты намного точнее, чем выдает аналог в Chrome DevTools.
- Способность ограничивать работу определенных хостов.
Настройки throttling в Charles Proxy.
Добавьте домен в список, выберите или настройте состояние сети и начните «искусственно» замедлять трафик только с указанного хоста.
Применение
Это отличный способ оценить работу сайта при медленном интернет-соединении. А также выявить ресурсы, которые будут замедлять работу сайта по какой-либо причине. Что произойдет, если у Google Fonts возникнут проблемы? Что произойдет, если Typekit подвергнется DDoS-атаке? Имитация замедления работы сайта сторонними сервисами – это наглядный способ оценить уязвимость площадки.
Серверы Blackhole
Что произойдет, если сторонний сервис полностью отключится? Стоит оценить, как ваш сайт поведет себя в подобной ситуации.
Сервер Blackhole может использоваться для маршрутизации стороннего трафика через конечную точку, которая заставляет запросы исчезать, воссоздавая последствия полного отключения от Сети.
WebPagetest сделал сервер Blackhole доступным по адресу 72.66.115.13. Можно указать конкретные домены в файле hosts, например:
72.66.115.13 platform.twitter.com
72.66.115.13 connect.facebook.net
72.66.115.13 fonts.googleapis.com
72.66.115.13 assets.adobedtm.com
72.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, если есть такая возможность.
Стресс-тестирование сторонних ресурсов – это стандартный процесс, которому я уделяю должное внимание. В противном случае последствия могут быть очень серьезными.