Скорость страницы и SEO

Что такое скорость страницы?

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

При этом сказано:

«Скорость страницы» не так проста, как кажется.

Это потому, что есть много разных способов измерения скорости страницы. Вот три самых распространенных:

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

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

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

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

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

Это долгое время … если вы ТОЛЬКО посмотрите, сколько времени требуется для загрузки всей страницы.

С другой стороны, внимание к First Meaningful Paint иногда лучше показывает, как пользователи на самом деле взаимодействуют с вашей страницей во время ее загрузки.

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

Несмотря на то, что для загрузки всей страницы требуется некоторое время, когда пользователь впервые попадает на страницу, он получает «первую значимую раскраску» через 1,5 секунды.

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

Нижняя граница?

Есть много разных способов измерения скорости страницы. И нет «правильного» показателя, который бы превосходил все остальные. У всех есть плюсы и минусы.

Вместо этого сосредоточьтесь на улучшении скорости загрузки вашей страницы по ВСЕМ найденным показателям.

Почему скорость страницы важна для SEO?

Google использует скорость страницы как фактор ранжирования с 2010 года .

А в 2018 году Google повысил важность скорости страницы с обновлением «Скорость» .

Короче:

Медленная загрузка веб-сайта может повредить вашему рейтингу в Google.

Возникает вопрос: как Google определяет скорость загрузки вашего сайта? Они смотрят, сколько времени требуется для загрузки 100% страницы? Или ТТФБ?

Никаких официальных заявлений по этому поводу они не делали. Но учитывая, что они сообщают обо всех этих показателях в своем инструменте PageSpeed ​​Insights, я могу сказать , что они, вероятно, используют комбинацию различных измерений скорости страницы:

Таким образом, вот как улучшить скорость загрузки вашего сайта.

Лучшие практики

Сжать изображения

Я ставлю это на первое место, потому что обычно это самая большая победа.

В конце концов, изображения обычно занимают 50-90% размера страницы.

(И скорость загрузки)

Например, посмотрите этот отчет о скорости страницы со страницы моего сайта:

Как видите, 86,2% размера страницы приходится на изображения:

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

Как?

Если ваш сайт работает на WordPress, я настоятельно рекомендую плагин под названием WP Smush :

Он автоматически сжимает любое изображение, которое вы загружаете в медиатеку WordPress. И, по крайней мере, по мнению создателей плагина, это может уменьшить размер файла изображения на 14,2%.

Не пользуетесь WordPress? Есть еще множество вариантов сжатия изображений, таких как Cesium и Mass Image Compressor .

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

Очистите и сожмите свой код

Другими словами: уменьшите ресурсы, найденные на вашей странице .

Это включает в себя:

  • HTML
  • CSS
  • JavaScript
  • И любой другой код, найденный на вашей странице

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

В любом случае: чем чище ваш код, тем быстрее он загружается.

(Да, это рифмуется 🙂)

Затем сожмите код с помощью такой программы, как GZip .

Обновить хостинг

Это один совет, о котором мало кто говорит.

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

Это потому, что вы разделяете сервер с миллионом других веб-сайтов.

Есть миллион веб-хостов. Так что я не могу порекомендовать один особенно.

Но я могу сказать это как общее правило: когда дело касается хостинга, вы получаете то, за что платите.

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

Активировать кеширование браузера

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

Так что в следующий раз, когда они посетят ваш сайт, он загрузится НАМНОГО быстрее.

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

Вы можете настроить кеширование браузера в файле .htaccess . Или с помощью плагина WordPress.

Реализуйте CDN

Сеть доставки контента ( CDN ) — один из самых простых способов повысить скорость загрузки вашего сайта.

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

Тестирование с помощью нескольких инструментов тестирования скорости страницы

Теперь, когда вы выполнили эти шаги, пора посмотреть, как у вас дела.

И я рекомендую проверить скорость вашей страницы с помощью двух разных инструментов.

Первый — это Google PageSpeed ​​Insights .

Инструмент Google сканирует код вашей страницы на наличие проблем …

… И возможности.

И недавно они добавили функцию, которая сообщает о том, сколько времени требуется для загрузки вашего сайта для реальных пользователей (с использованием данных браузера Google Chrome).

Что СУПЕР полезно.

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

Например, инструмент Google рекомендовал мне «Показывать изображения в форматах следующего поколения».

Однако эти форматы «следующего поколения» не поддерживаются большинством браузеров (включая Safari и Firefox). Так что, если вы переключитесь на эти форматы следующего поколения, пользовательский опыт вашего сайта пойдет насмарку.

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

Далее у нас есть WebPageTest.org .

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