Как бесплатно измерить скорость загрузки сайта

Запомните! Чем больше медленных сайтов ранжирует Google, тем меньше людей будет пользоваться Google!

Конкуренция между системами поиска огромная: Google, Bing, Яндекс, Baidu и куча более мелких. Если вы хотите чтобы ваш сайт индексировался сделайте его быстрым.

Скорость загрузки сайта – один из факторов ранжирования. Большое время загрузки негативно влияет на позиции в выдаче поисковых систем. Ещё в 2016 году Пэтом Минаном (Pat Meenan) из Google и Тамми Эвертс (Tammy Everts) из SOASTA провели исследование, в котором показаны 6 самых влиятельных факторов для конверсии сайта. Самым важным фактором для отказов стало время готовности DOM и вторым по важности полное время загрузки страницы.

Оптимальное время, за которое должна открыться страница, составляет менее 2,2 секунд. Существуют исследования, которые показывают, что около половины (40%) посетителей откажутся от сайта, если он загружается более 3 секунд. Было замечено, что при превышении времени загрузки контента 2-х секунд показатель отказов увеличивается на 30%.

В статье рассказывается как БЕСПЛАТНО измерить скорость загрузки вашего сайта и почему для проверки нужно использовать связки сервисов. Так для проверки десктопной версии вашего сайта рекомендую использовать PageSpeed Insights и GTmetrix, для мобильной PageSpeed Insights и WebPageTest.

Шаг 1 — Как узнать вес собственного сайта

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

1. Откройте нужную страницe в браузере Google Chrome (я открыл главную страницу своего сайта wow2.top).
2. Запустите инструмент разработчика нажав клавишу F12
3. Перейдите на вкладку Network
4. Поставьте галочку для отключения кэш браузера (disable cache)
5. Обновите страницу, в Хроме нажмите CTRL+R или кнопку слева от поля содержащего URL вашей страницы
6. Посмотрите значение в нижнем левом углу.

Для моего сайта, как видно на скриншоте, вес страницы составил 1,8 MB transferred.

Шаг 2 — Как Пользоваться Google PageSpeed Insights (PSI)

Для начала используйте сервис от Google, который называется PageSpeed Insights или кратко PSI. Он проверит скорость загрузки десктопной и мобильной версий и даст рекомендации по ее увеличению.

Личное мнение автора статьи: сервис Google PageSpeed Insights к сожалению стал для многих основным мерилом качества сайта. В реальности сервис глючит и даже в документации описано почему он глючит и подается это как фича, то есть как некая прогрессивная особенность. Относитесь к рекомендациям этого сервиса скептически и не стесняйтесь консультироваться у специалистов. Скорость первичной загрузки сайта в 6 секунд — это нормально, если вы будите настойчиво уменьшать до 2 секунд, возможно вам будет проще удалить свой сайт и пойти работать на завод ??? Желательно использовать и анализировать данные PSI вместе с другими сервисами, например GTmetrix.

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

Оценка скорости загрузки в PSI рассчитывается по итогам имитации загрузки с помощью инструмента Lighthouse. Результат от 90 баллов и выше считается хорошим, от 50 до 90 – средним. Если набрано меньше 50 баллов, значит страница загружается медленно. Более подробно методика измерений PSI описана в официальной документации.

Куда же мы без терминов? Web Vitals — целая группа признаков, по которым Google оценивает удобство сайтов для пользователя. Рассмотрим определения трех основных терминов Web Vitals:

1. LCP (Largest Contentful Paint — Отрисовка основного контента) — время, за которое на видимой части страницы отрисовывается самый большой по площади элемент. Например, самый крупный блок текста, видео или большая картинка. Нужно учитывать, что самый большой элемент может быть разным при просмотре с разных устройств: например, с большого экрана компьютера и маленького экрана смартфона. К тому же пользователь может перейти на ваш сайт по якорной ссылке и попасть не в начало страницы, а сразу дальше. Каждый из этих сценариев — это разная скорость загрузки. Идеальный показатель LCP — до 2,5 секунды.
2. FID (First Input Delay — Задержка первого ввода) — это время с момента первой попытки пользователя взаимодействовать с сайтом до момента, когда интерфейс сайта фактически способен обработать это взаимодействие. Идеальный показатель FID — до 100 миллисекунд.
3. CLS (Cumulative Layout Shift — Совокупное смещение макета) — определяет визуальную стабильность страницы. Например, вы читаете статью, а текст внезапно смещается вниз, потому что выше наконец прогрузился какой-то баннер и подвинул весь контент. Если бы баннер загрузился быстрее или его размер был запрограммирован заранее, такого бы не случилось. CLS измеряется не временем, а как коэффициент таких смещений. Идеальный показатель CLS — до 0,1.
4. Термин TTFB (time for first byte) часто путают c временем отклика сервера. Но время отклика сервера — этот показатель оценки скорость реакции на HTTP-запрос при отсутствии сетевой задержки. А на TTFB влияет почти всё: сетевые проблемы и задержки, объем входящего трафика, настройки веб-сервера, объём и то насколько оптимизирован контент вашего сайта (качество графики, размер css/js/html).

Проверю я свой сайт. Как видите результат не однозначен:) Десктопная версия моего сайта летает, а вот мобильная ползает. Странный результат для моей темы, но делать нечего читаем ниже подсказки Google и пытаемся разобраться с документацией к шаблону самостоятельно (оплаченная техподдержка моего шаблона закончилась).

Оптимизация с помощью Google PageSpeed Insights (PSI)

Внизу в разделе «Оптимизация» PSI выводит список проблем вашего сайта. Ниже я предлагаю способы решения этих проблем. Пойдем по порядку

• Используйте современные форматы изображений. Форматы WebP и AVIF обеспечивают более эффективное сжатие по сравнению с PNG или JPEG, поэтому такие изображения загружаются быстрее и потребляют меньше трафика.
  РЕШЕНИЕ: читайте в разделе Использование медиа-контента на сайте.
• Сократите время до получения первого байта от сервера. За этим предупреждением от Google скрывается метрика TTFB (time for first byte), которая показывает время до получения первого байта (сетевого пакета) веб-страницы после отправки запроса со стороны клиента. Измерение метрики TTFB включает запрос DNS, время подключения к серверу и время ожидания обработанного запроса (обработка, перепаковка, отправка страницы).
  РЕШЕНИЕ: вы не можете самостоятельно улучшить качество сети, а высокий трафик на веб-сайт может быть чем-то плохим только в случае DDoS-атак. Единственное, на что реально повлиять это бэкенд, то есть тонкая настройка (тюнинг) веб-сервера вашего хостинга. Зачастую у вас будет установлен Nginx, Apache или LSWS (LiteSpeed Web Server), настройка каждого из них отличается. Если вы не обладаете опытом, то по большому счету можете попытаться настроить кэширование вашего сайта при помощи плагинов, например самый простой в настройке плагин WP Super Cache. Все остальные настройки, которых полно в интернет, я не рекомендую использовать ибо это может привести к обратному эффекту.
• Включите сжатие текста. Чтобы уменьшить расход сетевого трафика, рекомендуем сжимать текстовые ресурсы (gzip, deflate или brotli (Nginx)).
  РЕШЕНИЕ: Сжатие текста включается в настройках веб-сервера. Проверить настроено сжатия GZIP можно на сайте https://www.whatsmyip.org/http-compression-test

• Устраните ресурсы, блокирующие отображение. Некоторые ресурсы блокируют первую отрисовку страницы. Google рекомендует встроить критическую часть данных JS/CSS в код HTML и отложить загрузку остальных ресурсов.
  РЕШЕНИЕ: Для WordPress смотрите в сторону плагина Autoptimize. Учтите Autoptimize — это немного не про кэширование. Autoptimize позволяет сжимать и объединять HTML/CSS/JS файлы, удалять комментарии, реализовать Lazy Loading и отложенную загрузку некоторых объектов. Autoptimize, безусловно, позволяет увеличить общую скорость загрузки сайта, но вот на время отклика сервера он не повлияет. Autoptimize крайне неплохо может работать в паре с плагином кеширования, который не умеют оптимизировать HTML/CSS/JS, например WP Super Cache или бесплатная версия WP Fastest Cache. Применение этого плагина немножко раскрыто статье Ускоряем работу WooCommerce.

Шаг 3 — Как Пользоваться GTmetrix

Сервис GTmetrix анализирует скорость и производительность сайта. Рекомендую всегда использовать связку PageSpeed Insights, GTmetrix и WebPageTest, а не каждый сервис по отдельности.

Обязательно создайте аккаунт GTmetrix, так как это позволит выбрать локацию для тестирования и устройство (и активировать многие другие параметры). Физическое расстояние между сервером и посетителем важно для скорости, поэтому, если, например, Ваш сервер и Ваши посетители находятся в Европе, Вы получите гораздо более точные данные, если запустите тест из Лондона, а не из Ванкувера в Канаде (расположение по умолчанию). ? Наличие аккаунта также позволит Вам избежать очереди.

Внимание! GTmetrix на бесплатном тарифе позволяет проверить только десктопную версию, для проверки мобильной версии используйте сервис WebPageTest.

Введите URL тестируемой страницы, выберите ближайший сервер (в случае бесплатного тарифа, для европейских стран ближайший сервер находится в Лондоне) и нажмите кнопку Analyze.

Как читать данные разделов Grade (Оценка) и Summary (Сводка) в GTmetrix

Стремитесь к оценке A или B.

Ниже показан раздел Speed Visualization (визуализация скорости). В этом разделе содержится информация обо всех загруженных элементах и ​​о том, как скоро посетители смогут взаимодействовать с тестируемым сайтом.

Смотрим значение TTFB, у меня он равен 147ms. Принято считать, значение TTFB меньше 100ms — идеальным, 100ms-300ms отличным, 300ms-500ms — приемлемым, значение больше 500ms плохим.

Далее отчет в середине страницы Top issues (основные проблемы). В первую очередь решайте проблемы с уровнем влияния High (высокий) и Medium (средний), поскольку они максимально снижают производительность сайта.

Последняя важная информация в этом разделе — время полной загрузки страницы (Fully Loaded Time) и общий размер страницы (Total Page Size). Напоминаю: Google хочет/требует/рекомендует время загрузки менее 2000 мс (2 секунды). Total Page Size (общий размер страницы) — чем меньше, тем лучше (принято считать, что 2 МБ — это много).

Как читать разделы Performance (Производительность) и Structure (Структура) в GTmetrix

В разделе Performance представлена более подробная информация каждом показателе. Для удобства включите кнопку Metric details.

Страница Performance в простом виде помогает определить основные проблемы Вашего сайта, чтобы у Вас было чёткое представление, что именно Вам нужно улучшить. Советы по оптимизации смотрите на вкладку Structure (Структура).

В разделе Structure Вы найдёте полный список аудитов вашего сайта. Рекомендуется сначала устранить проблемы с уровнем влияния High (высокий) и Medium (средний). Проблемы с низким уровнем влияния Low ставить на потом, зачастую они автоматически исчезнут после решения проблем уровня High и Medium.

Щёлкните стрелку возле одной из проблем в списке и получите подробную информацию. Нажмите кнопку Learn how to improve this (Узнать, как это исправить), чтобы ознакомиться с рекомендациями GTmetrix по оптимизации.

Советчики ? первый совет мне — используйте CDN. Напишите, в комментариях к статье, следует ли мне создать статью об использовании CDN в нашем регионе.

Как читать данные раздела Waterfall в GTmetrix

Waterfall визуализирует поведение загрузки сайта по каждому запросу. Каждый скрипт, медиафайл и/или сторонний ресурс, запрашиваемый страницей, отображается в Waterfall.

В первую очередь изучите колонку Status на наличие ошибок 404 и 403. На работающем без ошибок сайте в колонке должен Status быть ответ 200.

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

Более подробно о данных Waterfall читайте в официальным руководством GTmetrix (англ.). Но если вы не программист, то Вам кроме проверки колонки Status ничего здесь не нужно. Для написания технического задания программисту и/или системному администратору используйте страницу Structure (Структура).

Другие сервисы для измерения скорости загрузки сайта

• Изучите данные в Google Аналитика в отчетах «Скорость загрузки сайта» и Яндекс.Метрика — «Стандартные отчеты» / «Мониторинг» / «Время загрузки страниц». Вы должны понимать, что по факту, из этих данных вы узнаете, что сайт загружался долго, но что именно его так долго загружало метрика не скажет. В любом случай информация полезная, если нужно тестировать посадочные страницы, а не только главную страницу сайт.
• Сервис loading.express более нагляден чем Google PageSpeed Insights. Тестирует скорость сайта из сети 3G на мобильном устройстве. И главное позволяет выбрать страну (Украина, Казахстан, Россия, Беларусь и другие) из которой проводится тестирование.

• Проверить оптимизирована ли ваша страница для мобильных устройств https://search.google.com/test/mobile-friendly
• WebPageTest аналог GTmetrix в чем-то лучше. Главное после теста WebPageTest, не пугайтесь значением параметра Security score — если вы нажмете на него, то попадете на платный сервис поиска уязвимостей.
• Pingdom Tools Сервера, с которых идет проверка скорости, расположены в Азии, Европе, Америке и Австралии, русских и украинских нет.
• dotcom-tools.com/website-speed-test позволяет выбрать одновременно несколько локаций, откуда будет идти тест. Для настроек теста также выбирается десктоп или мобайл, нужная операционная система, разрешение и ориентация экрана, а также скорость интернета (2G, 3G, 4G). Отчет выстроен на данных Lighthouse.
• Dareboost качественный сервис, рекомендую прогнать через него ваш сайт. Сканирует скрипты. Поддрежу HTTP версии 2. Ошибки браузера. Выдает индекс скорости сайта.
• GiftofSpeed много полезных утилит на сайте, рекомендую изучить. И также прочитать их статьи.

Заключение, Рекомендации или Шпаргалка

• Рассчитайте скорость загрузки — это важный фактор ранжирования. Рекомендуемое время загрузки — 2 сек. Для высоконагруженных приложений рассчитайте время загрузки самостоятельно — взяв среднюю скорость загрузки сайтов конкурентов. На скорость влияют вес сайта и хостинг.
• Выберите хостинг под технические особенности ресурса. Если вы выбрали VPS вместо виртуального хостинга — наймите опытного системного администратора для постоянного сопровождения вашего сервера.
• Проверьте скорости загрузки. Проверка производится с помощью специальных сервисов: WebPageTest, loading.express. Они подсчитают, за сколько времени загрузился сайт, количество запросов, размеры, уровни производительности, распределение ресурсов по весу и запросам.
• Улучшайте скорость. Сократите количество запросов, по которым обращаются к серверу. Для этого объедините CSS в один файл и скрипты JS тоже в отдельный файл. Оптимизируйте их через инструменты CSS Minifier, CSS Compressor для CSS, и JS Minifier и JavaScript Compression Tool для JavaScript. Размещайте js скрипты перед закрывающим тегом .
• Оптимизируйте изображения. Используйте фотографии только требуемого размера. Используйте современные графические форматы, такие как WebP, вместо JPG и PNG.
• Обратить внимание на количество загружаемых файлов с внешних источников. Не редко, после релиза сайта, изображения или скрипты подгружаются из внешнего источника (тестового сервера, других источников), что может замедлять работу.
• Использовать CDN или нет? CDN распределяет копии контента страницы сайта на множество серверов. Сайт загружается с ближайшего к пользователю сервера CDN. Статический контент кэшируется от 7 до 30 дней. Благодаря CDN, время загрузки страниц уменьшается, никаких обращений к серверу (с вашим сайтом) для отображения картинок не поступает. Они уже подгружаются с распределенных серверов, значительно снижая нагрузку на основной сервер. НО А ГДЕ НАХОДИТСЯ БЛИЖАЙШИЙ К ПОЛЬЗОВАТЕЛЮ СЕРВЕР CDN? Будьте осторожны и обязательно проведите дополнительное тестирование после включения CDN, что бы не оказалось так что ваш сайт и клиент находятся в Уфе, а сервер CDN в Папуа Новой Гвинеи.
• Total Page Size (общий размер страницы) — чем меньше, тем лучше. Принято считать, что 2 МБ — это много, но для фотохостингов или сайтов с портфолио дизайнера это правило работать соответственно не будет.