Как проверить скорость загрузки сайта

Как проверить скорость загрузки сайта

Автор: Евгений Аралов, SEO-аналитик компании SiteClinic
Сегодня поднимем очень важную тему – скорость загрузки сайта. Наш аналитик Евгений Аралов рассказывает о тех показателях, которые влияют на позиции сайта в поисковых системах.

Прочитав эту статью, вы сможете самостоятельно проверить время загрузки своего сайта и улучшить его.
В статье подробно рассмотрим:
Что такое время загрузки сайта
Какие показатели скорости сайта влияют на его видимость в Яндексе и Google
Кейс: как влияет время загрузки на поведенческие факторы
Как понять, что оптимизировать, с помощью webpagetest.org

 

Что такое время загрузки

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

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

В свою очередь полное время загрузки можно разделить на следующие составляющие:

A) Время ответа сервера – как быстро сеть и сервер вернули первый байт HTML-файла, который вы запросили. Сюда входит время на подключение к DNS, TCP и время до первого байта TTFB (Time to first byte). Чем больше это время, тем дольше пользователь видит белый экран.

Б) TTFB (Time to first byte) – важнейший показатель, это время, которое нужно серверу, чтобы обработать запрос и отправить ответ браузеру. Например, при запросе php-страницы ее обрабатывает специальный интерпретатор, соединяет с базой данных – и только потом ответ будет отправлен.
Прежде всего, на это время влияют настройки сервера, оптимизация кода сайта, CMS и базы данных.
Также влияние оказывает расстояние клиента от сервера и количество маршрутов, которое проходит пакет с данными. Чем дальше клиент от сервера, тем дольше пакет будет до него идти.
Например, если клиент находится в Москве, а сервер с сайтом в Папуа-Новой Гвинее, ответ займёт больше времени, нежели если бы сайт находился в Москве.

Забегая наперед, сразу скажу, что TTFB является фактором ранжирования.

В) Обработка HTML и загрузка содержимого – время, затраченное браузером на обработку HTML, загрузку скриптов, изображений и CSS. Здесь время в основном зависит от чистоты кода HTML и размера самих файлов – чем они больше, тем дольше времени занимает загрузка.

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

Данный показатель зависит от скорости ответа сервера, правильной верстки, оптимизации CSS и JS. Именно это значение пользователь воспринимает как скорость загрузки страницы.

Таким образом, условно время загрузки можно представить в виде следующей блок-схемы:

 

Какие показатели влияют на позиции сайта в Яндексе и Google

В 2010 году Google официально заявил, что скорость сайта является фактором ранжирования, однако не уточнил, что именно влияет на ранжирование.

Яндекс никаких официальных заявлений не делал, однако в справке для вебмастеров мы можем найти следующее замечание: “Выбирая хостинг для сайта, следует учитывать скорость доступа и наработку на отказ. Старайтесь использовать тот хостинг, который обеспечит наилучшую скорость доступа к сайту и наименьшее время, в течение которого сайт может быть недоступен из-за технических неполадок.”

Кроме подсказок о влиянии времени загрузки самих поисковых систем, ряд специалистов проводил исследования на поиск зависимости позиций и времени загрузки. Одно из самых известных исследований провели специалисты MOZ. Давайте посмотрим, к каким выводам они пришли:

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

 

Б) Корреляции между полным временем загрузки страницы и ее позицией в Google не обнаружено:

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

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

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

По данным представителя Яндекса Алексея Шафранова, 38% пользователей покидают страницу, если время загрузки превышает 10 секунд, с мобильных устройств 74% пользователей уйдут, если страница грузится более 5 секунд.

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

 

Кейс: как влияет время загрузки на поведенческие факторы

Давайте посмотрим на реальном примере, как, за счет уменьшения времени загрузки, улучшились показатели поведенческих факторов:
Интернет-магазин с трафиком 100 000 сеансов/месяц. Регион – США.
Что сделано: оптимизировали изображения, подключили CDN хостинг на SSD, оптимизировали самописный движок.

Результат:
– Время загрузки уменьшилось с 11 с до 5 с
– Время ответа сервера уменьшилось с 2,5 с до 0,6 с

Влияние на показатель отказов и количество страниц за сеанс:

1. Зависимость среднего времени загрузки и показателя отказов:
В данном случае при уменьшении времени загрузки с 11 с до 5 с показатели отказов уменьшились с 65% до 55%:

 

2. Зависимость среднего времени загрузки и количества страниц за сеанс:

На данном графике видно, как параллельно уменьшению времени загрузки увеличивается количество страниц за сеанс с 3 до 5.
Нельзя не отметить и зависимость конверсии от скорости загрузки. Так, по некоторым исследованиям, увеличение времени на 100 мс увеличивает конверсию на 1%. Обычно это заметно на очень крупных проектах.

Хорошо видно влияние времени на конверсию на следующем графике:

Итак, подведем итоги:
– Основной фактор ранжирования – это время до получения первого байта TTFB.
– Время загрузки и время рендеринга – косвенные факторы, которые влияют на поведенческие факторы и удовлетворенность пользователя.

Оптимальные показатели времени загрузки страницы

Прежде чем перейти к анализу времени загрузки, определимся с оптимальными показателями.
Исходя из собственной практики и из рекомендаций самих поисковых систем, можем определить следующие требования:
Время до первого байта (TTFB): до 300 мс. Google в своей справке рекомендует 200 мс, но на практике и 300 мс не всегда получается
Время загрузки страницы: 3-5 с;
Время рендеринга: до 1,5 с.

 

Как узнать и проанализировать показатели загрузки сайта с помощью webpagetest.org

Webpagetest.org – это открытый ресурс для измерения загрузки страниц, разработанный AOL и поддерживаемый Google.

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

В рамках этой статьи я покажу, как интерпретировать результаты и на их основе выбрать направление оптимизации. Итак, возьмем любую страницу и запустим тест с московских серверов, браузер Chrome:

После запуска теста мы увидим следующую таблицу:

В таблице мы видим результаты нескольких тестов: first view и repeat view. Cервис запрашивает страницу несколько раз, результаты второго запроса должны быть меньше, чем первого. Если это не так, значит, у сайта проблемы с настройками кэширования и их нужно срочно исправлять.
Остальные показатели мы разобрали в начале статьи, думаю, не составит труда перевести их на английский.

Данная таблица позволяет нам быстро оценить состояние нашего сайта и настроек сервера. Однако WPT позволяет проводить и более глубокий анализ с помощью своеобразной диаграммы Ганта:

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

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

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

Также можно заметить вертикальные линии: начало рендеринга – зеленая; завершение загрузки основных элементов – синяя. Оценивая показатели данной диаграммы, мы можем оптимизировать время загрузки, отталкиваясь от ее ширины или высоты.

 

Оптимизация по ширине

В зависимости от того, какой цвет преобладает в той или иной строке, мы понимаем, что нужно оптимизировать:

1. Если много зеленого – это значит, браузер слишком долго ждет первый байт.

Возможные решения:

А) Оптимизация CMS – как мы говорили в начале статьи, проблемы могут быть связаны с долгой генерацией ответа из-за проблем с оптимизацией программного кода. В данном случае нужно подключать программистов, которые смогут это оценить.

Б) Закрыть доступ к различным краулерам (паукам): ahrefs, linkpad, megaindex и прочее. Бывает, что сторонние пауки достаточно сильно грузят сервер, из-за чего возникают проблемы со временем загрузки.

В) Возможно, стоит задуматься о смене хостинга.

Г) Использовать CDN (ContentDeliveryNetwork) – данная система распределяет статические элементы сайта (CSS, JS, изображения, видео) на различных серверах по всему миру. В зависимости от нахождения пользователя, система отдает ему контент с ближайшего сервера. Кроме того, что сокращается расстояние между клиентом и сервером, также снимается нагрузка с основного сервера. Однозначно стоит задуматься мультирегиональным сайтам, сайтам с высоким трафиком и с большим количеством медийного контента (подробнее: https://habrahabr.ru/company/webzilla/blog/236511/)

 

2. Если много оранжевого цвета – это говорит о том, что сайт не использует постоянное подключение.
Явление достаточно редкое, но если вы такое у себя обнаружили, стоит задуматься о настройке постоянного соединения HTTP (подробнее: https://goo.gl/F02d4a).

 

3. Много синего – контент слишком много весит: изображения, JS-скрипты, CSS

Выглядит это так:

Возможные решения:

А) Оптимизация изображений:
– Старайтесь максимально сжимать изображения без потери качества. Помочь в этом могут некоторые программы: FileOptimizer, PUNYpng и т.д.
– Старайтесь использовать формат JPG вместо PNG
– Не злоупотребляйте изображениями PNG c прозрачностью

Б) Сжимайте CSS и JS с помощью специальных программ OnlineJavascriptCompressionTool и OnlineJavaScript/CSS Compression.

В) Используйте g-zip сжатие – сжимать можно на лету (файл сжимается в момент запроса) или хранить на сервере уже заархивированные файлы. Надо сказать, что если у сайта большой трафик, сжатие на лету может дать дополнительную нагрузку на сервер.

 

Оптимизация по высоте

Оптимизация по высоте подразумевает сокращение запросов от браузера к серверу:
– jбъединяйте файлы CSS и JS – если у вас очень много CSS- или JS-файлов, их можно объединить;
– в вёрстке используйте спрайты.

Пример: http://i.rozetka.ua/h.05d448/sprite.png:

 

Ускорение рендеринга

Не вдаваясь в подробности процесса, перейдем сразу к рекомендациям (как происходит рендеринг, вы можете почитать по здесь):
– Пишите валидный код, как CSS, так и HTML: проверка валидности для CSS, проверка валидности для HTML;
– Старайтесь делать CSS проще: чем меньше вложенность, тем лучше;
– CSS включайте в тег

, а все скрипты – перед ;
– Старайтесь в скриптах минимизировать работу с DOM;
– Используйте кэш.

Таким образом рекомендую проверять свой сайт через WPT и оптимизировать время загрузки сайта. К сожалению, сегодня многие вебмастера мало времени уделяют данной проблеме.
Быстрый сайт радует пользователей и алгоритмы, что в итоге в любом случае скажется на позициях. Успехов в оптимизации!

 

Полезные ссылки

Набор инструментов для анализа и оптимизации времени загрузки
How brousers work
Rendering: repaint, reflow/relayout, restyle
Как сделать CDN для своего сайта и почему это полезно для высоконагруженных проектов
Обзор приложений для сжатия изображений

Как проверить скорость загрузки сайта 83
Как оптимизировать скорость загрузки
Как проверить скорость загрузки сайта 57
Как увеличить скорость скачивания в
Как проверить скорость загрузки сайта 30
Топ-10 советов о том, как увеличить
Как проверить скорость загрузки сайта 97
Как увеличить скорость закачки в
Как проверить скорость загрузки сайта 96
Как увеличить скорость торрента
Как проверить скорость загрузки сайта 39
Ty: Региональные новости и
Как проверить скорость загрузки сайта 18
«Мужчины с Марса, женщины с Венеры» читать
Как проверить скорость загрузки сайта 62
Бумажные цветы своими руками: 100 ярких фото идей
Как проверить скорость загрузки сайта 73
Газификация дачного дома - что и как делать Своими
Как проверить скорость загрузки сайта 63
Двери шкафа купе своими руками
Как проверить скорость загрузки сайта 80
Как проверить скорость загрузки сайта 53
Как проверить скорость загрузки сайта 1
Как проверить скорость загрузки сайта 96
Как проверить скорость загрузки сайта 77
Как проверить скорость загрузки сайта 2
Как проверить скорость загрузки сайта 51
Как проверить скорость загрузки сайта 62