Ответ
Как исследовать эффективность сайта с WebPageTest Опции темы
Старый 25.07.2015, 23:54
  #1
Nataly
 
Регистрация: 30.07.2014
Сообщений: 474

Как исследовать эффективность сайта с WebPageTest
Любой SЕО-специалист знает, что как эффективность сайта, так и пользовательский опыт играют важную роль в ранжировании в поисковых системах и росте уровня конверсии. И так же, как существует множество инструментов, которые способны помочь в обнаружении поискового рейтинга, исследовании ключевых слов и отслеживании ссылок, имеются отличные инструменты, которые помогут улучшить эффективность сайта.

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

Можете ли вы ответить на эти вопросы?

Каждый специалист в области SEO должен отвечать на следующие вопросы, когда дело касается улучшения эффективности сайта и пользовательского опыта (UX):

Каково время загрузки первого байта (TTFB – Time to First Byte)? TTFB является мерой того, насколько быстро сеть и сервер возвращают первый байт данных в HTML-файле, который вы запросили. Чем меньше это число, тем лучше, поскольку это означает, что сайт отреагировал быстро. TTFB является важным показателем, так как его значение наиболее сильно коррелирует с ранжированием страницы в поисковой выдаче. Высокое значение TTFB может также указывать на недостаточно мощный веб-сервер.

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

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

Насколько сайт доступен для мобильных пользователей? Все больше трафик сайтов состоит из мобильных пользователей. При оценке эффективности сайта важно понимать, насколько хорошо сайт работает на мобильных устройствах.

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

Понимание ответов на эти вопросы поможет ускорить работу над сайтом, улучшением коэффициента конверсии и UX. К счастью бесплатный инструмент WebPageTest поможет вам с этим!

Что делает WebPageTest?

Созданный первоначально в AOL разработчиком Patrick Meenan в 2008 году, WebPageTest (WPT) - складной нож со многими лезвиями для измерения эффективности сайта. Несмотря на то, что возможности WPT огромны (а иногда и безграничны), с помощью данного руководства вы поймете, что он необходим для улучшения эффективности сайта. Кроме того, WPT является бесплатным, с открытым исходным кодом в рамках бесплатной BSD лицензии!

По сути WPT оценивает то, как загружается конкретная веб-страница. По мере ее загрузки записывается ряд полезных показателей, они заносятся в каталоги и затем отображаются в различных диаграммах и таблицах, удобных для выявления пробелов в эффективности. Эти метрики и графики помогут ответить на важные вопросы, перечисленные выше. Вы также сможете контролировать многие аспекты анализа в WPT, такие как, какую платформу использовать (ПК/мобильное устройство), какой выбрать браузер (Chrome, Firefox, IE и др.) и даже сможете определить географическое положение.

Тестирование сайта с помощью WebPageTest

Давайте разберем пример. Мы выберем несколько конкретных опций, чтобы убедиться, что WebPageTest собирает и измеряет все данные, которые нам нужны, чтобы ответить на важные вопросы касательно эффективности сайта и UX.

Откройте сайт www.WebPageTest.org на выбранном вами браузере. Если есть возможность, попробуйте использовать Chrome, так как некоторые более продвинутые визуальные инструменты для отображения конечных данных лучше всего работают на Chrome. Теперь вы должны увидеть подобную страницу:





Вы видите 2 интересные опции:

Test Location содержит список более чем 40 различных регионов мира. В рамках партнерской программы WPT физически работает (бесплатно) на серверах, расположенных во всех этих местах. При вводе URL-адреса тестируемой страницы сервер в данном месте будет загружать URL-адрес локально через браузер, который вы выберите. Конечно, скорость и надежность тестов может сильно варьироваться от места к месту. Кроме того, не все регионы поддерживают одинаковые параметры тестирования.

Browser содержит большое количество различных конфигураций браузера для ПК и мобильных устройств, доступных для тестирования в данном месте. Обратите внимание, что если не указано иное, мобильные тесты в конкретном браузере на самом деле запускаются на реальных мобильных устройствах, а не на эмуляторах. На странице блога Patrick Meenan есть точное изображение одной из таких конфигураций.





Далее остановимся на установках по умолчанию (Dulles, VA и Chrome). Откройте раздел Advanced Settings и вы увидите нечто подобное:





Прокомментируем некоторые поля:

Connection - имитируемая скорость соединения. Не имеет особого значения, пока вы не начнете делать предварительное тестирование. Просто оставьте по умолчанию Cable 5/1.

Number of tests: как видно из названия этот параметр задает количество повторных запускаемых тестов. Это очень важно, так как Интернет может страдать от частых скачков и случайных искажений во время отклика из-за перегрузки сети. Чтобы получить надежный результат, лучше запустить несколько тестов и позволить WPT автоматически выбрать средний результат. Мы рекомендуем провести, по крайней мере, три теста и более, если у вас есть время.

Repeat View указывает, должен ли каждый тест загружать страницу только один раз (с очищенным кэшем браузера) или один раз с очищенным кэшем и один раз с зарезервированным. Почему это так важно? Всякий раз, когда браузер посещает URL-адрес в первый раз, на нем имеется практически всегда большое количество изображений, файлов JavaScript и других ресурсов, которые должны сначала быть загружены браузером для использования этой страницей.

Как только браузер получит эти файлы, он будет (в зависимости от настроек сервера) кэшировать их локально на вашем устройстве для каждой последующей страницы, загружающейся с данного сайта. Это объясняет, почему первые страницы, которые вы посещаете, практически всегда загружаются медленнее последующих страниц на одном и том же сайте. Мы рекомендуем установить здесь «First View and Repeat View», чтобы вы могли измерить как первый опыт новых пользователей, так и повторный опыт возвращающихся посетителей.

Capture Video позволяет посмотреть, что пользователи увидят на конкретном устройстве в указанном местоположении.

• Пока оставьте остальные параметры незаполненными и можно не обращать внимания на другие вкладки.

Далее введите URL-адрес сайта и нажмите «Start Test». Получение результата обычно занимает 30-60 секунд, в зависимости от выбранных параметров и того, насколько глубока очередь работ. Если это займет чрезмерно много времени, попробуйте повторить тест с другого местоположения. Давайте посмотрим на результаты.

Результаты WebPageTest

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





Как я уже упоминал выше, это медианный результат после 3 запусков. Вы также увидите разбивку для первой загрузки страницы (без кэширования браузером) по сравнению с повторной загрузкой (браузер теперь кэширует некоторые ресурсы).

Вы должны быть готовы к тому, что почти всегда повторный просмотр будет быстрее, чем первый. Если нет, то у вас имеются некоторые проблемы с кэшированием и стоит попробовать бесплатные инструменты, такие как PageSpeed Insights и Zoompf, чтобы провести диагностику настроек кэширования.

Итак, давайте остановимся на ключевых моментах:

1. First Byte: это как раз показатель TTFB (Time to First Byte), который мы ищем! Как вы увидите ниже, HTML-документ - это обычно небольшой кусок от общего времени - изображения, файлы JavaScript, и т. д. занимают большую часть времени загрузки. Вам нужно время примерно 200-400 мс.

2. Start Render: точка, когда вы начинаете видеть что-то кроме белого экрана. Это также то число, которое необходимо для ответа на наши вопросы, заданные выше.

3. Document Complete: та точка, где веб-страница загрузила все исходные компоненты HTML DOM, и вы можете начать взаимодействовать с ней (скроллинг и т.д.). После этого вы можете продолжить наблюдать, как появляются изображения и другие части фона страницы. Это число полезно для разработчиков, но менее важно с точки зрения SEO/UX.

4. Fully Loaded: точка, в которой все загрузилось. Многие сайты намеренно проектируются с учетом более быстрого времени загрузки документа (времени, когда можно взаимодействовать со страницей) за счет замедления времени полной загрузки. В интернет сообществе бушуют дебаты по поводу того, хорошая ли это практика или нет, но я просто скажу: «Делай то, что лучше для пользователей». Опять же, это число, которое полезно для разработчиков, но менее важно с точки зрения SEO/UX.

5. Speed Index: среднее время загрузки визуальных элементов страницы. Это попытка решить растущее расхождение между значениями выше и тем, что пользователь воспринимает как «быстро». Чем меньше это число, тем быстрее и более полно загружается страница.

Рассмотрим далее, как легко сравнивать свои показатели с аналогичными метриками конкурентов.

Каскадные диаграммы

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

Например:





Каскадные диаграммы полезны при определении «узких мест», вызывающих медленную загрузку страницы. Чем шире диаграмма, тем медленнее загружается страница, и чем выше она, тем больше ресурсов она загружает.

Посмотрите, как загружается сайт

Поставьте значок рядом с «Capture Video» перед тем, как запускать тест, и WebPageTest создаст видео ролик, показывающий, что именно увидит пользователь при загрузке сайта, используя заданные параметры теста. Это чрезвычайно ценно, если, например, вы не работаете в Сингапуре на Nexus 7, но все же хотели бы увидеть, какой опыт получают такие пользователи.

Для доступа к видео, перейдите на вкладку «Summary» в результатах теста, затем прокрутите страницу вниз и нажмите на ссылку «Watch Video» в крайнем правом столбце рядом с «Test Result», который вы хотите просмотреть.





Затем вы увидите нечто похожее на это:



Помните те показатели, которые являются важными? Если сайт имеет медленный показатель TTFB, вы увидите большую задержку, прежде чем что-нибудь случится. Видео также поможет показать стартовое время загрузки. Это действительно полезный показатель: 750 мс может показаться быстрым, но, имея возможность визуализировать данный процесс, вы поймете, что в действительности испытывают пользователи.

Сравнение с конкурентами

Да, вы можете это сделать! Видео функции WPT позволяют генерировать видео, на котором ваш сайт и сайт конкурентов будут располагаться параллельно друг другу.
Чтобы сделать это, повторите шаги, описанные выше, чтобы создать новый тест, но теперь используйте URL-адрес конкурента. Запустите тест и нажмите «Test History». Вы увидите нечто вроде этого:





Сравните 2 интересующих теста, и вы получите подобный видео ролик:





Прокручивая влево и вправо, вы сможете увидеть визуальное сравнение того, как 2 страницы загружаются относительно друг друга. Желтая рамка указывает на то, что произошли визуальные изменения на загружаемом сайте. Прокрутите вниз, и вы увидите оверлей, показывающий, где в каскадной диаграмме загружаются изображения. Нажмите кнопку «Create Video», и вы увидите подобное видео.



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



Но что можно сказать о тестировании работы сайта для мобильных устройств? Несмотря на то, что вы можете запустить 2 отдельных анализа работы сайта на ПК и мобильном устройстве, это довольно неэффективно. Вам придется переключаться, сравнивая результаты.

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

Другие опции WebPageTest

В завершении я хотел бы остановиться не нескольких примечательных функциях WebPageTest, важных для оптимизации работы сайта с точки зрения SEO:

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

API: большинство, если не все данные, демонстрируемые в интерфейсе WPT, также доступны посредством Restful API. Воспользуйтесь этим вариантом, если хотите показать эти данные внутренне в своем собственном формате.

Single Point of Failure (SPOF) Testing: что произойдет с сайтом, если ключевой партнер будет не в состоянии работать? Выясните это с помощью опции SPOF testing. Просто укажите имя хоста, чей простой вы хотите имитировать в разделе «SPOF» при запуске теста, и посмотрите, насколько плохо будет работать сайт, когда не загружается ключевой ресурс. Вы можете быть ужасно удивлены.

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

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

Вывод

WebPageTest - это незаменимый инструмент для поиска и отладки проблем с эффективностью сайта, ведь более быстрый сайт обеспечивает положительный пользовательский опыт и улучшает поисковый рейтинг. По умолчанию WPT предоставляет ряд ключевых показателей, важных для SEO-специалистов и их понимания производительности сайта и UX. Надеюсь, этот обзор стал для вас базой для того, чтобы начать заниматься изучением и применением WebPageTest для оптимизации скорости сайта.
Нравится 0   Не нравится 0
Пожаловаться на это сообщение 0  
Ответить с цитированием

Ответ
 
 

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как исследовать ключевые слова с Keyword Planner Nataly Статьи 0 15.06.2015 23:55
Как повысить эффективность гостевого поста в 100 раз Nataly Аналитика 0 04.09.2014 08:34
Эффективность Google Пингвин 2 против спама? Alsu Статьи 14 27.06.2013 08:37
Как легко проследить эффективность СЕО процедур Матрос Статьи 3 20.10.2012 21:53

Метки
ttfb, webpagetest, пользовательский опыт, ранжирование, скорость загрузки, трафик, уровень конверсии, эффективность сайта


Здесь присутствуют: 1 (пользователей: 0, гостей: 1)
 
Опции темы

Быстрый переход


Текущее время: 13:38. Часовой пояс GMT +3.