Привет!

DevTools. Оценка производительности сайта

Артур ШевченкоАртур Шевченко

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

Если для домашнего 100BASE-TX интернета нет никакой проблемы в закачке 2 Мб, то в условиях мобильного EDGE соединения, время загрузки растягивается до неприличных 40 секунд на примере загрузки сайта Awwwards, где объем страницы составил 1,3 Мб, а картинки составили вес в 1,1 Мб, но это не самый плохой вариант скорости загрузки.

Согласно статистике, собранной Addy Osmany (фронтендер из Google, спикер), на сегодняшний момент средняя страница в интернете весит в среднем 2 Мб, причем более 60% всего веса составляют изображения.

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

Задачи панели Network

Сетевая панель хранит записи всей сетевой активность вашего приложения, тайминги, HTTP запросы, заголовки запросов, куки и прочее.

  • Какой ресурс приложения загружается дольше всех?
  • Какая часть приложения инициировала именно этот сетевой запрос?
  • Сколько запросов в сеть создает ваш сайт?

На все эти вопросы можно найти ответ здесь.

Панель Network использует Resource Timing API, библиотеку, которая отслеживает сетевую активность. Например, библиотека показывает, когда стартовал HTTP request для картинки, и когда загрузился последний ее байт.

Цепочка сетевых взаимодействий Resource Timing API.

Эта библиотека доступна в стенделоне, а конкретно в Chrome она привязана к объекту window.performance (обязательно посмотрите его в консоли). Например, метод performance.getEntries() возвращает массив таймингов объектов для каждого отдельного ресурса страницы.

Обзор панели Network

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

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

Таблица полей

Тип поляЗначение поляЗначение поляЗначение поля
Name and Path Имя и URL ресурса. Имя и URL ресурса. Имя и URL ресурса.
Method HTTP метод, используемый для запроса (GET или POST например). HTTP метод, используемый для запроса (GET или POST например). HTTP метод, используемый для запроса (GET или POST например).
Status and Text HTTP статус и текстовый ответ. HTTP метод, используемый для запроса (GET или POST например). HTTP статус и текстовый ответ.
Domain Домен ресурса запроса. HTTP статус и текстовый ответ. Домен ресурса запроса.
Type MIME тип запрашиваемого ресурса. Википедия в помощь. MIME тип запрашиваемого ресурса. https://ru.wikipedia.org/wiki/%D0%A1%D0%BF%D0%B8%D1%81%D0%BE%D0%BA_MIME-%D1%82%D0%B8%D0%BF%D0%BE%D0%B2. Домен ресурса запроса.

Прокачай свой скилл

Каждый из столбцов панели Network имеет возможность фильтровать данные по возрастанию и убыванию. Для этого нужно кликнуть по заголовку столбца. Самым интересным для вас будет последний столбец Timeline. При клике на него вы увидите время ответа, начало и конец загрузки, время загрузки и задержку загрузки каждого файла. Это полезно для отслеживания “слабых звеньев” сайта.

Практический кейс

Для практического примера анализа я возьму отличный ресурс от Виталия Фридмана — Smashing Magazine. Этот сайт достаточно хорошо “прокачан” и оптимизирован. Это неудивительно, поскольку Виталий Фридман является одной из ключевых фигур в современном фронтенде.

Сначала проверим загрузку без сетевых эмуляций каналов интернета. Не забудьте поставить галочку в пункте “Disable cache”, чтобы все ваши загрузки не кешировались.

Общая картина загрузки ресурсов в Smashing Magazine. Перед вами образец идеальной оптимизации ресурса в рамках новостного блога. С моей скоростью интернета в 50 Мбит, блог с 7 постами на странице, изображениями и текстом загрузился за 4 секунды.

Как вы видите, вес страницы составляет всего 761 Кб. Картинки весят 359 Кб. Файлы стилей весят 8,5 Кб, причем часть стилей грузится непосредственно в head документа (по сути это дефолтные стили, которые относятся к форматированию текста, заголовков и контента). Чтобы проверить размер всех картинок, скриптов, стилей и шрифтов в отдельности, нужно воспользоваться фильтром сортировки.

Выбираем отобразить только загрузку изображений. Самая “тяжелая” картинка весит всего 47.4 Кб.

Изучаем загрузку Smashing Magazine

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

Затем произошла загрузка всех изображений. Самая “тяжелая” картинка весит всего 47.4 Кб. Кроме того здесь частично используются .svg изображения, а общий вес изображений составляет 359 Кб. Это отличный показатель, поскольку зачастую столько весит только одна картинка в большом размере (например в fullscreen background сайтах).

Далее загрузились скрипты, которые в общей сложности весят 45.7 Кб. Да, здесь нет никакого JQuery, все сделано на pure JavaScript, весит очень мало. Все скрипты минифицированны.

Интересным нюансом стало подключение шрифтов. Он здесь подключен через правило font-face с Base64 кодированием. По сути, Base64 – это способ кодирования двоичных данных в ASCII текст. Закодировать шрифт в этот формат можно на сайте Font Squirrel.

Вес внешних файлов стилей составляет 8.5 Кб. Это невероятно мало.

Проверяем загрузку сайта в режиме эмуляции EDGE соединения

В этом режиме общее время загрузки составило 16.71 секунды. Для сравнения, украинский сайт Dou.ua загружается в EDGE режиме 31.21 секунду.

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

Заключение

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

Все статьи серии Дебаггинг в Google DevTools.

Дебаггинг в Google DevTools. Часть 1: Введение

Дебаггинг в Google DevTools. Часть 2: Дебаггинг адаптивности