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

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

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

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

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

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

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

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

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

1. Активируйте сжатие

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

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

2. Сократите CSS, JavaScript и HTML

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

3. Уменьшите количество редиректов

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

example.com -> www.example.com -> m.example.com -> m.example.com/home

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

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

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

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

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

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

6. Сведите к минимуму запросы к файлам

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

Когда вы (или ваша команда) приступите к созданию (редактированию) веб-сайта, подумайте, где вы можете избежать использования изображений для эффектов и вместо этого использовать CSS. Вот лишь несколько примеров: градиенты, кнопки, закругленные углы и многое другое. Всего этого можно добиться с помощью CSS.

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

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

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

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

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

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

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

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

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

Компания Mainton - разработка программного обеспечения под заказ, SEO и реклама в интернете с 2004 года.