Как скорость загрузки влияет на позиции сайта в поисковиках?

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

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

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

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

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

Именно коэтому измерять скорость загрузки в абсполютных показателях не совсем верно. Правильно измерять насколько вы применили возможные инструменты для ускорения работы сайта.

Именно так работает сервис Google PageSpeed Insights и альтернативные сервисы, например, Pingdom . Эти сервисы покажут вам насколько ваш сайт оптимизирован по таким критериям как:

  • Наличие редиректов;
  • Использование кеша браузера;
  • Качество CSS, HTML и JS;
  • Оптимизация изображений;
  • и т.д.

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

Как можно увеличить скорость загрузки страницы?

Сокращение HTTP-запросов

Каждый файл, необходимый для веб-страницы для отображения и работы, например HTML, CSS, JavaScript, изображения и шрифты, требует отдельного HTTP-запроса. Чем больше запросов будет сделано, тем медленнее будет загружаться эта страница.

Вот с чего все начинается:

Большинство тем загружают один или несколько файлов CSS и несколько файлов JavaScript. Некоторые, такие как JQuery или FontAwesome, обычно загружаются удаленно с другого сервера, что значительно увеличивает время загрузки страницы.

Это становится еще более проблематичным, если вы посмотрите на дополнительные файлы CSS и JavaScript, добавленные плагинами. Легко получить полдюжины или более HTTP-запросов только из CSS и файлов JavaScript.

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

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

  • Объединените файлы JavaScript в один файл.
  • Объединените файлы CSS в один файл.
  • Уменьшите или исключите плагины, которые загружают свои собственные файлы JavaScript и / или CSS.
  • Используйте шрифт, например FontAwesome или Ionic Icons, вместо файлов изображений, потому что в этом случае нужно загружать только один файл.

Включите трейлинг-слэш

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

Вот как это работает:

Когда вы посещаете URL-адрес без конечной косой черты, веб-сервер будет искать файл с таким именем. Если он не найдет файл с таким именем, он будет обрабатывать его как каталог и искать файл по умолчанию в этом каталоге.

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

Правильное построение ссылок

https://example.com (неправильно)
или
https://example.com/services (это тоже неправильно)
против
https://example.com/ (правильно)
или
https://example.com/services/ (это тоже правильно)

Включить сжатие файлов

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

Включить кеширование браузера.

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

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

Минимизация ресурсов

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

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

  • Общий кэш W3
  • WP Super Cache
  • WP Rocket

Стоит учитывать, что вам могут потребоваться некоторые усилия, чтобы с первого раза получить правильные настройки, потому что минимизация часто может нарушать CSS и JavaScript, поэтому, как только вы минимизировали элементы, обязательно тщательно протестируйте свой сайт.

Оптимизация мультимедиа-файлов

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

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

Выбирайте идеальный формат. JPG идеально подходит для фотографических изображений, тогда как GIF или PNG лучше всего подходят для изображений с большими областями сплошного цвета. 8-битные PNG-файлы предназначены для изображений с прозрачным фоном.
Убедитесь, что изображения имеют нужный размер. Если изображение отображается с разрешением 800 пикселей на вашем веб-сайте, нет никакой пользы для использования изображения шириной 1600 пикселей.

Сжатие файла изображения. Помимо уменьшения разрешения есть множество инструментов для того, чтобы сжать изображение, тем самым снизив его вес.

Оптимизация видео. Выберите идеальный формат. MP4 лучше всего в большинстве случаев, потому что это формат с наименьшим объемом. Обеспечьте оптимальный размер на основе размера экрана посетителей - вы ведь замечали, что разрешение на YouTube меняется в зависимости от вашего устройства. Устраните звуковую дорожку, если видео используется в фоновом режиме в качестве элемента дизайна. Уменьшите длину видео. Рассмотрите возможность загрузки видео на YouTube или Vimeo вместо того, чтобы хранить их у себя.

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

  1. Изображения в HTML вашего сайта могут быть использованы с помощью набора src, который позволяет браузеру выбирать, загружать и отображать соответствующее изображение в зависимости от размера экрана устройства, которое использует посетитель.
  2. Изображения, размещенные через CSS - обычно в качестве фоновых изображений, могут быть использованы с использованием мультимедийных запросов для выбора соответствующего изображения на основе размера экрана устройства, которое использует пользователь.

Используйте кеширование и CDN

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

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

Святослав

Святослав

Управляющий партнер, эксперт в digital-маркетинге

Как скорость загрузки влияет на позиции сайта в поисковиках?