Работаем с производительностью сайтов

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

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

Инструмент Audits в Chrome

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

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

• Здесь есть 243 неиспользуемых CSS-правила, которые можно без проблем удалить;
  
  • Изображения немного больше, чем они должны быть;
    
  • Размер куков слишком большой (возможно, из-за трекеров аналитики).

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

Давайте попробуем еще один инструмент, на этот раз, это веб-сервис.

PageSpeed

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

Если ваш сайт еще недоступен широкой публике, так как он пока что является скрытым стартапом или по другой причине размещен в локальной среде, вы все равно можете воспользоваться PageSpeed. Просто запустите веб-сервер, который принимает сигнал от порта $PORT, после чего выполните следующие команды в Bash.

npm install localtunnel -g
lt --port $PORT

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

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

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

Далее представлен еще один инструмент для анализа эффективности в виде сервиса.

WebPageTest

WebPageTest (или сокращенно WPT) это вне всяких сомнений наиболее детализированный инструмент для анализа эффективности, а кроме того его спонсировал Google. Они помогут вам разобраться с каждым запросом вплоть до уровня связи TCP. Здесь есть несколько различных точек зрения на одни и те же данные, что делает инструмент еще более полезным.

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

Если вы хотите получить точные результаты от WPT, не запускайте только один тест из одного положения, одного браузера и одного типа соединения. Попробуйте различные конфигурации, определите, как опыт взаимодействия воспринимают мобильные пользователи с 3G-интернетом, использующие Android Browser, а не только пользователи Chrome с широкополосным интернетом.

Кристиан Хайльман

Обзор отчета

Прежде всего, WPT представляет нам обзор отчета. Здесь мы мельком знакомимся с важнейшими индикаторами эффективности для нашего сайта. Например, здесь мы узнаем, что SpeedIndex равен 1203 при первой загрузке, но он снижается до 799 после подкачки кэша. SpeedIndex это общая оценка в баллах, которая говорит, насколько быстро появляется видимый контент страницы и чем ниже это значение, тем лучше.

Понимание, как сайт ведет себя при первой загрузке и во второй раз, обычно говорит о многом. Если разница заключается в более быстрой загрузке на 60%+, вполне вероятно, что мы не используем все возможности кэша.

Каскадный обзор

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

Как вы видите из обилия данных на этом графике, HTML полностью загружается за 153 мс, после чего загружаются стили, изображения и шрифты. Прорисовка начинается примерно на отметке 1сек., а большинство элементов JavaScript начинают загружаться только после отметки 2 сек. Однако в этот момент сайт уже видим. Конечно же, мы говорим о Chrome и широкополосной связи, поэтому, все, что имеет менее чем молниеносную скорость, покажет более печальные результаты.

Основной подход должен заключаться в том, что как только фактический контент полностью загрузится, мы можем вносить улучшения через JavaScript, добавлять изображения и прочее. Правильное упорядочение загрузки ресурсов приведет к повышению скорости первой загрузки страницы, это уже не говоря о сокращении загрузки изображений, которые будут загружаться раньше в каскадном графике. А как ведет себя сайт при повторном просмотре после подкачки кэша с некоторыми ресурсами?

Как вы видите, у нас все еще остались некоторые запросы по аналитике и рекламным ресурсам, но в большинстве случаев ЦП дымит при 100%-ном использовании и пытается вытянуть прорисовку. Общее время загрузки уменьшено вдвое от примерно 3 сек. до около 1,6 сек., чего и следовало ожидать при агрессивном кэшировании изображений, шрифтов, JavaScript и прочих статичных объектов. Количество запросов, один из легче всего отслеживаемых показателей, сократилось с 29 до 6.

Детальный анализ запросов

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

Чеклист оптимизации

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

В случае если вам недостаточно отчетов для первой части этой статьи, есть еще один ценный отчет WebPageTest, о котором вы должны знать.

Диафильм

Чтобы получить визуальный анализ вашего сайта, просто выберите вкладку \"Визуальное сравнение\" WPT, а затем введите страницу, которую вы хотите протестировать.

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

Конечно, не все так радужно. WPT является довольно медленным, иногда время запуска теста превышает 20s. Сервис ставит ваш сайт в очередь на конкретный тест. Если вы не хотите ждать, можете просто поискать тест, который не так загружен.