Автор: Евгений Аралов, 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 для своего сайта и почему это полезно для высоконагруженных проектов
Обзор приложений для сжатия изображений