Как ускорить сайт: методы оптимизации скорости загрузки

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

Скорость загрузки сайта — это время, за которое происходит полная загрузка веб‑страницы и всех её элементов в браузере пользователя. Чем меньше это время, тем лучше для пользовательского опыта. В среднем основная часть страницы должна загружаться за 2–3 секунды.

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

Что такое юзабилити и как его улучшить 

Что влияет на скорость загрузки сайта

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

❗️ Более подробно схему работы интернета мы объясняем в модуле 1 нашего бесплатного курса по SEO.

На скорость загрузки влияют:

1. Время ответа сервера

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

2. Производительность сервера и базы данных

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

3. Пропускная способность сети

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

4. Размер и количество загружаемых файлов

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

5. Код и структура веб‑страницы

Эффективное использование кода, минификация и кэширование могут значительно ускорить загрузку сайта. О том, как оптимизировать код, рассказываем в разделе «Как повлиять на производительность сайта».

Зачем повышать скорость загрузки сайта 

Высокая скорость загрузки:

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

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

• улучшает SEO, так как скорость влияет на рейтинг в выдаче.

Яндекс о скорости загрузки сайта — Вебмастер Справка

Google: скорость загрузки сайта имеет значение 

❗️ Скорость загрузки сайта в Google тесно связана с Core Web Vitals (CWV). Core Web Vitals — это набор ключевых показателей производительности веб‑страниц, предложенный Google для оценки скорости загрузки и корректного отображения контента с точки зрения пользователя. 

1. LCP (Largest Contentful Paint) — измеряет время отрисовки самого большого текстового блока или блока с изображением на странице. Рекомендуемое значение — до 2,5 секунды.

2. INP (Interaction to Next Paint) — измеряет время отклика на интерактивные элементы. Рекомендуемый показатель — не более 200 миллисекунд для комфортной работы пользователя. 

3. CLS (Cumulative Layout Shift) — измеряет, насколько меняется расположение видимых элементов при загрузке страницы. Рекомендуемое значение — до 0,1.

4. FCP (First Contentful Paint) — время отрисовки первого контента страницы (текст, изображение и т. д.) Рекомендуемое значение — до 1,8 секунды.

5. TTFB (Time to First Byte) — время от запроса пользователя до получения первого байта контента от сервера. Рекомендуемое значение — до 600 мс.

Как узнать скорость загрузки: 2 способа 

1. Инструменты веб‑мастера в браузере

Скорость загрузки позволяет посмотреть Яндекс Метрика. Чтобы открыть этот отчёт, на сайте должен быть счётчик Метрики. 

Откройте «Отчёты» — «Мониторинг» — «Время загрузки страниц». 

Появится вот такой отчёт:

Время загрузки страниц — Метрика Справка 

1. Сервисы тестирования скорости загрузки страниц

Ещё скорость можно посмотреть в Google PageSpeed Insights. Этот инструмент анализирует сайт и дает рекомендации по улучшению скорости загрузки.

❗️ Для удобства сохраните к себе такой букмарклет — ищите его в подборке Андрея Антохина. Он так и называется — Google PageSpeed Insights.

Букмарклет запускает скрипт, который анализирует страницу на скорость загрузки. Его нужно просто сохранить в закладки и открывать, когда хотите измерить скорость загрузки.

Введите ссылку на свой сайт и нажмите «Анализировать»:

Появится вот такой отчёт. Можно выбрать, какую выдачу смотреть — мобильную или десктопную.

Сначала выводятся основные показатели CWV, о которых мы писали выше:

Дальше рекомендации Google по улучшению скорости загрузки и более детальная аналитика.

Документация PageSpeed Insights

❗️ CWV сайта можно узнать и через Анализ сайта в Топвизоре. 

Загрузите URL для анализа, укажите API-ключ PageSpeed Insights перед проверкой и запустите анализ. Когда он закончится, откройте раздел «Страницы» — Core Web Vitals. Справа от проверенных страниц будут их результаты. API-ключ можно получить бесплатно в руководстве для разработчиков от Google.

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

1. Уменьшить число HTTP‑запросов 

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

Чтобы уменьшить количество HTTP‑запросов:

• встройте inline‑изображения в CSS;

• объедините файлы CSS и JS;

• сделайте CSS‑спрайт, то есть объедините несколько SVG‑изображений в один файл;

• разместите разные части страницы на разных серверах.

Как перейти на HTTPS правильно: зачем, когда и как по шагам 

2. Улучшить работу сервера

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

3. Оптимизировать шрифты

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

Например, можно загружать шрифты с Google Fonts. Файлы со шрифтами здесь уже оптимизированы, что снимает нагрузку c сервера.

4. Сжать картинки  

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

• сжать сам файл, уменьшив его вес без потери качества;

• конвертировать в более лёгкий формат (фото — в JPEG, схемы и другие картинки — в PNG, векторы — в SVG);

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

Ещё можно переводить картинки в формат WEBP. Правда, он поддерживается на данный момент только в Google и Opera. По данным Google, такие изображения на 26% легче PNG.

Чтобы настроить конвертацию в WEBP на сайте, нужно добавить в файл .htaccess такой код:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{HTTP_ACCEPT} image/webp
    RewriteCond %{DOCUMENT_ROOT}/$1.webp ‑f
    RewriteRule ^(path/to/your/images.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]
</IfModule>
<IfModule mod_headers.c>
    Header append Vary Accept env=REDIRECT_accept
</IfModule>
AddType image/webp .webp

5. Включить GZIP‑формат

GZIP — это формат сжатия, который уменьшает размер файлов. Включите GZIP на вашем сервере, чтобы ускорить загрузку сайта. Для этого в конец файла .htaccess нужно ввести следующий код:

<IfModule mod_deflate.c> 
  AddOutputFilterByType DEFLATE text/html text/plain text/css application/json 
  AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript 
  AddOutputFilterByType DEFLATE text/xml application/xml text/x-component 
  AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-opentype image/svg+xml 
</IfModule>

6. Удалить лишние плагины и счётчики

Удалите с сайта неиспользуемые плагины, виджеты, счётчики, замедляющие загрузку. Что замедляет загрузку, подскажет сервис мониторинга скорости загрузки сайта.

7. Кэшировать на стороне браузера 

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

Вот такой код нужно добавить в файл .htaccess, чтобы включить кэширование на стороне браузера:

<IfModule mod_expires.c> 
  ExpiresActive On 
  ExpiresDefault "access plus 7 days" 
  ExpiresByType image/gif "access plus 7 days" 
  ExpiresByType image/jpg "access plus 7 days" 
  ExpiresByType image/jpeg "access plus 7 days" 
  ExpiresByType image/png "access plus 7 days" 
  ExpiresByType image/svg+xml "access plus 7 days" 
  ExpiresByType text/css "access plus 7 days" 
</IfModule>

В этом примере написано «7 дней» — значит, файлы будут храниться в кэше 7 дней. Вы можете увеличить или уменьшить это количество.

8. Использовать CDN

CDN (Content Delivery Network, система доставки контента) — это сеть серверов, которые распределены по всему миру. Они кэшируют копии вашего сайта и отправляют их пользователям, находящимся ближе всего к ним. Это ускоряет загрузку сайта для пользователей.

Обычно на CDN передают тяжёлый статический контент и создают поддомен типа static.mysite.ru. CDN подключается у провайдера, создаётся домен типа cdn.mysite.ru. Он подтягивает файлы с static.mysite.ru и таким образом увеличивает скорость загрузки (косвенно).

9. Сократить CSS‑ и JS‑файлы

Сократите количество CSS‑ и JS‑файлов, чтобы уменьшить количество запросов к серверу. Это называется минификацией кода. Удаляется весь синтаксис, имеющий значение только при разработке: переводы строк, комментарии, лишние отступы и пробелы, иногда сокращаются имена переменных.

Это можно делать вручную, а можно с помощью инструментов. Чтобы минифицировать CSS, используют CSSmin, CSSnano, Pretty Diff. Сокращают JS UglifyJS, Microsoft Ajax Minifier.

Ещё есть универсальные сервисы, которые минифицируют код в целом: Google Closure Compiler, Online Javascript Compression Tool, Minify.

У большинства таких сервисов единый принцип работы: они добавляются в код сайта с помощью определённой команды и минифицируют его.

Как посмотреть исходный код страницы 

10. Приоритизировать загрузку CSS‑ и JS‑файлов

Определите, какие CSS‑ и JS‑файлы необходимы для отображения вашего сайта, и загрузите их первыми — в самом начале страницы, в теге <head/>. Остальные файлы загружайте в конце страницы, перед тегом </body>.

11. Подключить турбостраницы 

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

Чтобы настроить внешний вид страниц (например, настроить меню или виджет обратной связи, добавить CSS‑стили), нужно перейти в раздел «Отладка»: 

О турбостраницах Яндекса 

Как пользоваться Вебмастером

❗️ В Wordpress скоростью загрузки можно управлять с помощью PageSpeed Ninja или Autoptimize.

В Joomla — JCH‑Optimize и JBetolo.

Что запомнить 

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

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

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

4. Узнать скорость загрузки сайта можно с помощью Яндекс Метрики, PageSpeed Insights и других сервисов.

5. Чтобы повысить скорость загрузки, нужно: 

   • уменьшить количество HTTP‑запросов к сайту;

   • удалить с сайта лишние плагины и счётчики:

   • сжимать картинки;

   • оптимизировать шрифты и код;

   • использовать GZIP‑формат;

   • кэшировать файлы на стороне браузера;

   • подключить турбостраницы (в Яндексе);

   • приоритизировать и оптимизировать загрузку CSS‑ и JS‑файлов;

   • улучшить работу сервера;

   • использовать CDN. 

6. В CMS для повышения скорости загрузки есть специальные плагины.

🤓 Ещё по теме 

Как оптимизировать сайт под мобильные устройства

Руководство для SEO‑специалистов по техническому SEO 

57 бесплатных инструментов для SEO‑специалиста