Скорость загрузки сайта

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

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

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

Вы можете оценить скорость своей страницы с помощью Google PageSpeed ​​Insights. PageSpeed ​​Insights Speed ​​Score включает данные из CrUX (отчет об опыте пользователя Chrome) и сообщает о двух важных показателях скорости: First Contentful Paint (FCP) и DOMContentLoaded (DCL).

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

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

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

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

Активировать сжатие

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

Не используйте gzip для файлов изображений. Вместо этого сожмите их в такой программе, как Photoshop, где вы сможете сохранить контроль над качеством изображения. См. «Оптимизация изображений» ниже.

Минимизируйте CSS, JavaScript и HTML

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

Уменьшить перенаправления

Каждый раз, когда страница перенаправляется на другую страницу, ваш посетитель сталкивается с дополнительным временем ожидания завершения цикла HTTP-запрос-ответ. Например, если ваш шаблон мобильного перенаправления выглядит следующим образом:example.com -> www.example.com -> m.example.com -> m.example.com/home

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

Удалить блокирующий рендеринг JavaScript

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

Google предлагает избегать и сводить к минимуму использование блокировки JavaScript.

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

Браузеры кэшируют большой объем информации (таблицы стилей, изображения, файлы JavaScript и т. д.), поэтому, когда посетитель возвращается на ваш сайт, браузеру не нужно перезагружать всю страницу. Используйте такой инструмент, как YSlow, чтобы узнать, установлена ​​ли у вас уже дата истечения срока действия вашего кеша. Затем установите заголовок «expire» на то, как долго вы хотите, чтобы эта информация кэшировалась. Во многих случаях, если дизайн вашего сайта не меняется часто, год является разумным периодом времени. Дополнительную информацию об использовании кэширования Google можно найти здесь.

Улучшите время ответа сервера

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

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

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

Оптимизация изображений

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

Используйте спрайты CSS, чтобы создать шаблон для изображений, которые вы часто используете на своем сайте, например кнопок и значков. Спрайты CSS объединяют ваши изображения в одно большое изображение, которое загружается все одновременно (что означает меньшее количество HTTP-запросов), а затем отображает только те разделы, которые вы хотите отобразить. Это означает, что вы экономите время загрузки, не заставляя пользователей ждать загрузки нескольких изображений.