Инструменты измерения скорости открытия сайтов

avatar Вячеслав
Смирнов
21.07.2014, 14:39
комментировать


LoadTime.0.png
Недавно прошла конференция Google I/O 2014, где рассказывали про тестирование производительности, был рассказ про инструменты и советы для ускорения сайтов.

Несколько тезисов с Google I/O 2014:

  • скорость открытия сайта влияет на рейтинг в поисковой выдаче;
  • пользователь теряет контекст, если страница загружается более 1 сек;
  • пользователь уходит с сайта, если страница загружается более 10 сек;
  • клиентская оптимизация особенно важна для мобильных клиентов;
  • есть сервисы, которыми предлагается пользоваться для ускорения сайтов:

Замерим скорость открытия стартовой страницы сайтов из раздела «Новый сайт».

Тестирование выполнялось 01 июля 2014 года. Для замера скорости первого открытия с чистым кешем использовался сервис WebPageTest.

На первых двух страницах списка «Новый сайт» 20 сайтов. Для тестирования были выбраны 18 сайтов, так как один сайт недоступен, а один требует flash для работы.

WebPageTest

WebPageTest — отличный бесплатный сервис, созданный и поддерживаемый с целью ускорения сети Интернет. Доступны исходные коды проекта и инструкция по развертыванию своего узла с агентами на Linux, Windows, iOS, Android. Но на сайте проекта уже есть развернутые в разных городах мира экземпляры системы (Test Location).

Контекст тестирования

Для тестирования выбрал Test Location: Moscow, Russia — WEBO (IE 9,Chrome,Firefox).

WebPageTest поддерживает браузеры:

  • Internet Explorer — основной браузер проекта WebPageTest;
  • Mozilla Firefox — использовал в текущем тестировании;
  • Google Chrome (мобильный и desktop);
  • Apple Safari (мобильный и desktop).

Поддерживается шейпинг. Есть несколько профилей и возможность задать свои ограничения на соединение:

  • Cable (5/1 Mbps 28ms RTT) — значение по умолчанию, использовал в текущем тестировании;
  • DSL (1.5 Mbps/384 Kbps 50ms RTT);
  • FIOS (20/5 Mbps 4ms RTT);
  • 56K Dial-Up (49/30 Kbps 120ms RTT);
  • Mobile 3G (1.6 Mbps/768 Kbps 300ms RTT);
  • Mobile 3G — Fast (1.6 Mbps/768 Kbps 150ms RTT);
  • Native Connection (No Traffic Shaping);
  • Custom.

Контекст тестирования таков. Пользователь находящийся в Москве, использующий Mozilla Firefox и соединение со скоростью 5,1 Мбит/сек открывает ровно один раз стартовую страницу предложенного сайта. Ранее пользователь не посещал данный сайт, ресурсы сайта не закешированы.

Результаты тестирования

На диаграмме отображены 16 результатов такого теста.

LoadTime.png

Легенда:

  • Start Render — момент времени, когда загрузилась DOM-модель документа (HTML, CSS, JavaScript) и браузер понял что к чему и начал отображение. Но возможно, загрузились не все ресурсы;
  • Document Complete — момент времени, когда загрузились все ресурсы. Но возможно, не загрузились компоненты, загрузка которых осуществляется асинхронно (twitter-лента, список читателей из социальной сети, галерея изображений, ...);
  • Fully Loaded — момент времени, когда всё загрузилось.

Ссылки на отчёты WebPageTest:

  1. отчёт по www.em-em-em.ru
  2. отчёт по urbanab.ru
  3. отчёт по synerdocs.ru
  4. отчёт по redkenloft.com
  5. отчёт по www.alteos.ru
  6. отчёт по www.allns.ru
  7. отчёт по en-co.ru
  8. отчёт по htc-cs.ru
  9. отчёт по c-dom.com
  10. отчёт по www.belkamneft.ru
  11. отчёт по vahu.ru
  12. отчёт по aspec-auto.ru
  13. отчёт по directum.ru
  14. отчёт по uslugi.udmurt.ru
  15. отчёт по kultura.udmurt.ru
  16. отчёт по www.izh.ru

Отчёты по сайтам не отображенные на диаграмме:

  1. отчёт по www.agroinvestor.ru
  2. отчёт по poshcafe.ru
  3. отчёт по argo18.ru
  4. отчёт по bk-vesta.ru

Самый отзывчивый, оптимизированный и шустрый сайт из тестового набора — vahu.ru. Это эталон и образец. Большинство сайтов из тестового набора отзывчивые, первый отклик пользователь получает через 2 сек (примерно). Но есть группа сайтов, которые показывают пользователю чистый лист в течение первых 4-6-ти секунд, это долго.

Отзывчивый, неоптимизированный и прекрасный сайт — sunerdocs.ru. На примере этого сайта разберу отчёты WebPageTest и Google PageSpeed.

Разбор отчёта WebPageTest по synerdocs.ru

Собственно, ссылка на отчёт по synerdocs.ru.

Шапка

synerdocs.report.01.header.png

Краткие результаты:

  • First Byte Time — D по шкале от A до X, больше нормы, сервер долго думал прежде чем ответить, но оценка по этому критерию не особо низкая;
  • Keep-alive Enabled — сервер позволяет повторно использовать соединения, что сокращает время загрузки страниц на 40-50%;
  • Compress Transfer — используется сжатие для передаваемого содержимого, что сокращает размер страницы и способствует более быстрой загрузке;
  • Compress Images — оценка F говорит, что некоторые изображения можно сохранить более компактно, размер изображений уменьшится, загрузка ускорится;
  • Progressive JPEGs — рекомендуется использовать формат Progressive jpeg для изображений, чтобы сайт выглядел более отзывчивым;
  • Cache static content — оценка F говорит, что кеширование статики используется, но его можно сделать более эффективным;
  • Effective use of CDN — оценка X говорит, что CDN не используется.

 Summary

synerdocs.report.02.summaryTable.png
В таблице отображаются важные числовые характеристики, в том числе, отображённые на стартовой диаграмме значения Start Render, Document Complete и Fully Loaded.

synerdocs.report.03.waterfall.png
Есть диаграмма загрузки. Видно, что браузер открывает по 7 соединений, и через них скачивает все ресурсы. Известна техника оптимизации — объединение CSS и JavaScript файлов в один, объединение изображений в спрайты, направлена на сокращение издержек при загрузке большого количества файлов через ограниченное количество соединений. Также тут видно какие из объектов загружались дольше других и, возможно, нуждаются в сокращении размеров.

synerdocs.report.04.filmstrip.png
Есть раскадровка процесса загрузки сайта, наложенная на диаграмму загрузки. В данном случае видно, как постепенно загружается png-изображение с воздушным шаром. Сервис WebPageTest тут рекомендует использовать progressive jpeg, чтобы загрузка осуществлялась не сверху вниз, а чтобы изображение постепенно становилось чётче. Возможно, так и стоит сделать, если размер jpeg будет сопоставим с размером png (надо выбрать между размером и плавностью загрузки).

synerdocs.report.05.chart.png
Есть диаграммы, отображающие статистику по количеству и размеру элементов (запросов) с одинаковым типом содержимого. Так тут видно, что картинок много. Можно попробовать спрайты.

Details

Также можно посмотреть детальную информацию.
synerdocs.report.06.connectionView.png
По количеству открытых соединений, с распределением по типу содержимого.

synerdocs.report.07.requestDetails.png
Есть и таблица с числовыми характеристиками загрузки каждого элемента страницы. Значение из колонки Time To First Byte можно использовать, чтобы подсчитать, сколько миллисекунд можно сэкономить от объединения ресурсов. Колонку Bytes Downloaded, чтобы выделить наиболее большие ресурсы.

Perfomance Review

Тут составлена таблица с рекомендациями относительно каждого загружаемого элемента.
synerdocs.report.07.FullOptimizationChecklist.png
В данном случае видно, что некоторые изображения можно сжать. И что рекомендуется включить поддержку кеширования на стороне клиента (установить значение для заголовка «cache-control: max-age»).
Про кешированию важно помнить, что не всегда его нужно включать. Конфиденциальные данные, такие как бухгалтерские документы, страницы с личной информацией не нужно кешировать на стороне пользователя. В данном случае рассматривается маркетинговый сайт, и тут кешировать можно всё.

Google PageSpeed

Преимущество Google PageSpeed в том, что отчёты тут строятся быстрее. Но их нельзя сохранять, отчёты строятся каждый раз заново. Картинок меньше, рекомендации чётче. И есть специальные рекомендации для мобильной оптимизации.
synerdocs.report.08.mobile.02.jpeg
Мобильная оптимизация — важный момент для современного сайта. Где скорости невысокие, экраны относительно небольшие, процессоры относительно медленные.
synerdocs.report.08.mobile.01.png

  1. построить отчёт по www.em-em-em.ru
  2. построить отчёт по urbanab.ru
  3. построить отчёт по synerdocs.ru
  4. построить отчёт по redkenloft.com
  5. построить отчёт по www.alteos.ru
  6. построить отчёт по www.allns.ru
  7. построить отчёт по en-co.ru
  8. построить отчёт по htc-cs.ru
  9. построить отчёт по c-dom.com
  10. построить отчёт по www.belkamneft.ru
  11. построить отчёт по vahu.ru
  12. построить отчёт по aspec-auto.ru
  13. построить отчёт по directum.ru
  14. построить отчёт по uslugi.udmurt.ru
  15. построить отчёт по kultura.udmurt.ru
  16. построить отчёт по www.izh.ru

Заключение

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

Спасибо за внимание.

Не скупитесь на ретвиты ↓
  • Михаил Романов

    >> Пользователь находящийся в Москве, использующий Mozilla Firefox и соединение со скоростью 5,1 Мбит/сек открывает ровно один раз стартовую страницу предложенного сайта. Ранее пользователь не посещал данный сайт, ресурсы сайта не закешированы.

    А какой практический смысл такого сценария? Типа «случайный пользователь»?

  • http://zaynutdinov.ru Aleksey

    Мне больше понравился гугловский сервис. Увидел пару моментов где давно хотелось оптимизировать, а тут всё показано просто и наглядно.

Get Cloud PHP Hosting on CatN