joomix

Скорость загрузки сайта, как фактор ранжирования Google

В июле 2018 году Google меняет работу поисковых алгоритмов. Это обновление получило название Speed Update. И с этого момента скорость загрузки страницы становится одним из факторов ранжирования. Простыми словами: скорость загрузки вашего сайта влияет на его место в поисковой выдаче.

В том же 2018 году кроме обновления Speed Update, Google изменил способ индексирования веб-страниц под названием mobile first index. Теперь рейтинг веб-страниц формируется на основе данных, которые поисковая система получает только с мобильных версий. Те ресурсы, которые не имеют адаптивной или мобильной версии, автоматически теряют позиции в поисковой выдаче. Кто-то скажет: "не справедливо!".

На самом деле все не так. Если взглянуть на динамику мобильного трафика за последние 10 лет, все становится понятно. В 2009 году мобильные гаджеты генерировали менее 1% всего интернет-трафика. В 2018 году – 52%, а уже в 2020 судьба мобильного трафика достигает отметки 60-70%.

Скорость загрузки страницы также влияет на поведение посетителей. Если верить исследованиям компании Forrester Consulting 40% пользователей покидают сайт, если он загружается более 3 секунд.

Поведение посетителей – это еще один фактор, который использует Google для определения рейтинга веб-страниц.

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

Какая скорость загрузки страницы оптимальная?

Сначала разберемся, какие метрики характеризуют скорость загрузки.

Первое отображение содержимого (First Contentful Paint, FCP) – это время с момента перехода на сайт до момента, когда браузер отображает первый бит контента. Для пользователя это сигнал, что сайт начинает загружаться.

Первое значительное отображение (First Meaningful Paint, FMP) - это время от начала загрузки страницы до момента, когда пользователь видит достаточно контента, чтобы начать взаимодействовать с ним.

Индекс скорости (Speed Index) - это время, за которое отображается видимая часть веб-страницы. Оптимальная скорость загрузки веб-страницы - 2-3 секунды.

Pagespeed insights позволяет проверить скорость любой веб-страницы в разрезе 3-х метрик о которых мы раньше говорили. Еще один сервис для проверки скорости - это testmysite. Сервисы бесплатны.

Теперь если присмотреться к результатам, то мы увидим разные значения. И вас возникнет вопрос: "Кому верить?"  Если сайт информативный, громоздкий - вам будет трудно достичь оптимальной скорости. В противном случае - добивайтесь оптимальных значений по всем метрикам.

Сначала познакомимся с двумя сроками, которые нам многое прояснят: Это пинг и рендеринг.

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

Рендеринг. Данный термин часто применяют в компьютерной графике. Он означает процесс получения изображения по модели с помощью компьютерной программы.

Веб-сервер такой нечувствительный к браузеру

Чувствительность показывает насколько быстро налаживается связь между браузером и веб-сервером (TTFB). И есть 2 фактора, которые влияют на чувствительность веб-сервера. Это географическое положение и способность сервера одновременно обрабатывать большое количество запросов.

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

А что делать, если мы хотим получать трафик на сайт из разных стран? В такой ситуации есть 2 решения:

1 решение. Это CDN сеть, состоящие из серверов в разных странах на которых создаются копии файлов сайта. Когда подается запрос из браузера, контент загружается с близлежащего сервера.

2 решение. AMP - это технология, которую использует Google, позволяет создавать ускоренные мобильные версии страниц. AMP-страницы Google хранит на собственных серверах и когда пользователь делает переход со страницы результатов поиска, браузер загружает данные страницы с CDN-сети Google. Эта технология позволяет увеличить скорость загрузки страницы в разы.

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

А чтобы этого избежать, можно использовать специальные сервисы loadimpact.com, WebPageTest.org для тестирования веб-сервера и не нужно экономить на хостинге.

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

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

Подключение браузера к файлу разметки является первым шагом рендеринга. Специальные теги "head" и "body" разделяют веб-страницу на видимую и невидимую части. Все элементы, которые доступны пользователю на странице размещаются в видимой части. А данные, которые предназначены только браузерам и поисковым системам размещается в невидимой. Эти данные пользователь не видит. Кроме этого, в невидимой части выполняется подключение скриптов и CSS-стилей.

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

Как не заставлять пользователей сайта ожидать?

Когда браузер доходит до тега <script> он останавливается, чтобы загрузить контент файла и выполнить его код, и только после этого продолжает дальше рендерить страницу. Скрипты блокируют визуализацию контента и увеличивают время пассивного ожидания. Поэтому необходимо все скрипты, которые не участвуют в визуализации первого экрана переместить вниз файла HTML-документа. К важным скриптам (которые участвуют в визуализации первого экрана + скрипт аналитики) необходимо применить атрибут async, который сообщает браузеру, что скрипт может быть выполнен асинхронно.

В таком случае браузера нет необходимости останавливаться, когда он достигает тега <script> для загрузки и исполнения. Скрипт будет выполняться параллельно с разбором HTML-документа.

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

Чтобы ускорить загрузку необходимо уменьшить вес всех файлов веб-страницы. Для этого нужно настроить на веб-сервере утилиты сжатия gzip или brotli, позволяющие объем переданных данных уменьшится в 4-5 раз.

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


Рейтинг статьи

Рейтинг: 97.5% - 6 голоса (-ов)

98%