Создание сайтов на WordPress
Создание сайтов на WordPress

Анализ скорости загрузки сайта с помощью сервиса WebPageTest

Здравствуйте!

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

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

Анализ скорости загрузки сайта

Начальные настройки

Заходим на главную страницу сервиса https://www.webpagetest.org.

Сервис WebPageTest

В поле Enter a Website URL вводим адрес сайта.

В раскрывающемся списке Test Location выбираем место тестирования. Для наглядности можно воспользоваться кнопкой Select from Map и выбрать город на карте. Если России в списке нет, то можно выбрать соседние страны: Китай или Польшу.

В раскрывающемся списке Browser выбираем браузер, для которого будет проводиться тест. Лучший вариант – это выбрать самый популярный браузер Chrome.

При нажатии на Advanced Setting откроется ряд вкладок с расширенными настройками.

Расширенные настройки WebPageTest

Мы будем делать настройки только в первой вкладке Test Setting, остальные вкладки нас не интересуют.

В Connection выбираем тип соединения. По умолчанию уже стоит нужное нам кабельное соединение Cable.

В Number of Tests to Run выбираем количество тестов. Для начала ставим 1.

В Repeat View выбираем тип просмотра First View and Repeat View (Первый и последующий).

Ставим галочку в Capture Video, чтобы записать видео загрузки страницы.

В итоге настройки у вас должны выглядеть как на скриншоте ниже.

Настройки WebPageTest

Нажимаем кнопку Start Test. Начнётся тестирование, которое может занять несколько минут.

Анализ результатов теста скорости загрузки сайта

По окончании тестирования будут выданы результаты. Рассмотрим их по порядку. Начнём с самой верхней части.

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

Здесь представлен ряд показателей, имеющих буквенную оценку: от А (отлично) и далее по убывающей. Рассмотрим каждый из этих показателей.

Security score. Оценка безопасности. Производится проверка на предмет уязвимостей JavaScript и заголовков безопасности. Если нажать на квадрат с оценкой, то перейдём на другой сервис, где будет предложено исправить уязвимости. Но сервис этот платный и мы им пользоваться не будет.

First Byte Time. Это один из важнейших показателей, о нём подробно будет написано далее.

Keep-alive Enabled. Этот показатель позволяет сделать вывод о том, передаются ли все файлы сайта с сервера за одно соединение или для каждого файла создаётся собственное соединение. Нам нужно, чтобы всё передавалось за одно соединение. Эта опция включается на сервере и, как правило, уже работает по умолчанию.

Compress Transfer. Отвечает за сжатие передаваемой информации. Сжатые файлы весят меньше и передаются быстрее. Как правило, сжатие на сервере уже включено по умолчанию.

Compress Images. Показывает, насколько сжаты изображения на сайте. Критерием выступает сжатие в Photoshop при сохранении изображения для веба. Сжатие с качеством 50% и ниже считается хорошим, если больше, то балл будет снижен.

Cache static content. Показывает наличие кэширования контента сайта в браузере.

Effective use of CDN. Эффективность использования CDN (сети распределения контента). Здесь два варианта: CDN или используется или нет. Подключиться к сети CDN можно самостоятельно, но эта услуга платная. Это имеет смысл, когда у вас большой сайт: портал или интернет-магазин.

Помимо этого, при нажатии на оценку параметра откроется более подробная информация о каждом тесте с оценкой по 100-балльной шкале.

Подробная информация о тестах

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

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

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

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

Start Render. Начало рендеринга. Это время, через которое начинается видимая пользователем отрисовка страницы. Начало рендеринга является одним из важнейших показателей, так как влияет на восприятие скорости сайта посетителем. Чем меньше показатель Start Render, тем быстрее пользователь увидит, что страница начала загружаться. В норме этот показатель не должен превышать 1500 мс.

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

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

Web Vitals. Это группа метрик, предоставляемых Google. Включает следующие три метрики.

Largest Contentful Paint. Измеряет время загрузки самого большого элемента на странице. Не должно превышать 2,5 секунды.

Cumulative Layout Shift. Измеряет время от момента, когда пользователь впервые взаимодействует со страницей (щёлкает по ссылке, нажимает кнопку и т. п.) до момента, когда браузер действительно может начать обработку обработчиков событий в ответ на это взаимодействие. Норма – не более 100 мс.

Total Blocking Time. Производит оценку сдвигов макета, когда элемент на странице изменяет своё положение. Сдвиги элементов могут привести к затруднениям во взаимодействии пользователя со страницей. Например, кнопка может уехать в сторону в тот момент, когда на неё хотят нажать. Total Blocking Time измеряется в безразмерных единицах. Норма – не более 0,1.

Метрики Web Vitals для наглядности выделены цветом. Красный – это плохой показатель, оранжевый – средний, зелёный – хороший.

Document Complete. Эта группа позволяет оценить загрузку документа страницы, то есть основного контента. Включает в себя три метрики.

Time. Время загрузки страницы.
Requests. Количество HTTP-запросов для загрузки страницы.
Bytes In. Размер загруженной страницы.

Fully Loaded. Эта группа показывает полное время загрузки страницы, помимо самого документа включая все скрипты и т. п. В эту группу входит четыре метрики, три из которых – Time, Requests и Bytes In аналогичны предыдущим. Четвёртый параметр – Cost показывает, сколько стоит использование вашего сайта в мобильных сетях. Нам этот параметр не нужен.

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

Подведём итог. Важнейшие показатели, на которые нужно обратить внимание – это First Byte, Start Render, а также Time и Requests в Document Complete и Fully Loaded. В первую очередь нужно добиваться снижения этих показателей.

Переходим к третьему разделу результатов анализа. Это таблица, состоящая из трёх строк.

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

В первой строке First View приведен график, на котором подробно показано, как загружается страница при первом посещении. Также в первой строке показан скриншот страницы и приведены ссылки Filmstrip View и Watch Video на скриншоты и видео загрузки страницы.

Строка First View

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

График загрузки страницы

Во второй строке Repeat View находится то же самое, что и в первой, но при повторной загрузке страницы.

В третьей строке Content Breakdown на диаграммах в процентном соотношении показано распределение контента страницы по количеству запросов (Requests) и по размеру в байтах (Bytes).

Диаграмма загрузки страницы

Таким образом, наглядно видно, какой контент больше всего нагружает страницу.

Анализ скорости загрузки сайта с помощью сервиса WebPageTest позволяет получить массу полезной информации, из которой можно понять, в каком направлении производить оптимизацию и ускорение сайта.

До свидания!

Поделиться в соцсетях:

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *