d-element 22 мая в 09:25

Как ускорить скорость загрузки сайта? Гайд по оптимизации

10 мин

IT-инфраструктура*Клиентская оптимизация*Веб-разработка*

Обзор

Скорость загрузки страниц — один из ключевых факторов, влияющих на успех сайта в интернете. Она влияет на пользовательский опыт, конверсию и SEO. Google учло это уже в 2010 году, сделав скорость загрузки фактором ранжирования. В 2018 году метрики были расширены, а в 2020 — дополнены новыми обновлениями.

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

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

Основные метрики скорости загрузки страницы

Скорость загрузки страницы — это не просто время, за которое пользователь видит первый пиксель или взаимодействует с элементом интерфейса. Она включает в себя множество параметров, которые Google объединил в метрики Core Web Vitals («Основные интернет-показатели»). Эти метрики измеряют не только технические аспекты, но и восприятие скорости пользователем.

Основные метрики Core Web Vitals:

LCP (Largest Contentful Paint) — время загрузки самого большого элемента в видимой области.
FID (First Input Delay) — время, необходимое для отклика страницы на первое взаимодействие пользователя.
CLS (Cumulative Layout Shift) — стабильность макета во время загрузки.

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

Скорость загрузки основного контента (LCP)

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

Рекомендованные значения для LCP:

Хорошо: до 2,5 секунд;
Нужно улучшить: 2,5–4 секунды;
Плохо: более 4 секунд.

Что влияет на LCP:

Изображения: оптимизация изображений (формат WebP или AVIF, адаптивные размеры, сжатие) — важнейший шаг.
AVIF обеспечивает лучшее сжатие, чем WebP (до 50% экономии), и поддерживается современными браузерами.
```
<picture>>
 <source srcset="image.avif" type="image/avif">>
 <source srcset="image.webp" type="image/webp">>
 <img src="image.jpg" alt="..." width="800" height="600">>
</picture>>
```
Время отклика сервера: использование CDN, уменьшение размера ответа сервера и оптимизация базы данных.
Код, блокирующий рендеринг: минимизация и асинхронная загрузка CSS и JavaScript.
Клиентский рендеринг: оптимизация шрифтов и уменьшение использования тяжелых библиотек.

Совет: Используйте инструменты, такие как Google PageSpeed Insights, чтобы определить, что именно замедляет загрузку главного контента.

Время ожидания до первого взаимодействия с контентом (FID)

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

Рекомендованные значения для FID:

Хорошо: до 100 миллисекунд;
Нужно улучшить: 100–300 миллисекунд;
Плохо: более 300 миллисекунд.

Что влияет на FID:

Объём JavaScript: избыточный или плохо оптимизированный код замедляет обработку взаимодействий.
Асинхронная загрузка: использование технологии async и defer для скриптов.
Разделение кода: модульный подход помогает снизить время обработки кода.
Использование Intersection Observer: для ленивой загрузки.
Intersection Observer – это более гибкий способ, чем loading="lazy", особенно для динамического контента. Однако следует помнить, что в случае с изображениями, хорошей практикой для поисковой оптимизации считается оставлять актуальный src либо его сжатую легковесную копию.
Пример кода:
```
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});

document.querySelectorAll('img[data-src]').forEach(img => {
  observer.observe(img);
});
```

Совет: Инструмент Lighthouse в Google Chrome поможет выявить проблемные места и оптимизировать их.

Совокупное смещение макета (CLS)

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

Рекомендованные значения для CLS:

Хорошо: менее 0,1;
Нужно улучшить: 0,1–0,25;
Плохо: более 0,25.

Что влияет на CLS:

Отсутствие размеров у медиафайлов: не указанные размеры изображений и видео приводят к скачкам.
Загрузка рекламы: баннеры и сторонние виджеты часто появляются с задержкой, вызывая смещение контента.
Порядок загрузки: контент должен загружаться сверху вниз.
Резервирование места для рекламных блоков.
Если реклама загружается позже, задайте фиксированные размеры для контейнера. При этом старайтесь избегать использования ad, adv и иных производных словоформ в названии HTML-классов и ID, так как они могут блокироваться косметическим фильтром блокировщика рекламы со стороны пользователя.
Пример CSS:
```
.special-container {
  width: 300px;
  height: 250px;
  background: #f0f0f0;
}
```

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

Инструменты для проверки скорости сайта

Google предоставляет несколько инструментов для анализа скорости загрузки и оценки Core Web Vitals:

Google PageSpeed Insights: даёт подробный отчёт по каждой метрике и рекомендации по их улучшению.
Google Search Console: позволяет просматривать отчёты по всем страницам сайта, выделяя те, которые нуждаются в оптимизации.
Web Vitals Extension: удобное расширение для браузера, которое показывает основные показатели в реальном времени.
WebPageTest — позволяет тестировать скорость из разных локаций и на разных устройствах.
Lighthouse CLI — интеграция в CI/CD для автоматической проверки производительности.
Пример использования Lighthouse CLI:
```
lighthouse https://example.com --output=html --output-path=./report.html
```

Особенности использования инструментов:

Лабораторные и полевые данные: лабораторные данные (например, TBT — Total Blocking Time) полезны для отладки, но Google учитывает только полевые данные.
Анализ множества страниц: большинство инструментов работают с отдельными страницами, что может затруднять анализ больших сайтов.

Совет: Для комплексного анализа используйте WebSite Auditor. Этот инструмент позволяет проверять все страницы сайта на соответствие Core Web Vitals, формировать отчёты и давать рекомендации по оптимизации.

Как работать с WebSite Auditor:

Введите ключ API и выполните SEO-анализ структуры сайта.
Найдите раздел Page Speed и изучите общие отчёты по скорости.
В режиме «Страницы» просмотрите список проблем и рекомендации для каждой страницы.
Нажав на конкретную страницу, получите список элементов, требующих оптимизации.

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

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

1. Установите размеры изображений

Указание размеров изображений в коде помогает браузеру заранее зарезервировать место, исключая смещение контента и улучшая показатель CLS. Пример корректного кода:

<img src="pillow.jpg" width="640" height="360" alt="purple pillow with flower pattern" />

2. Используйте современные форматы изображений

Отдавайте предпочтение формату WebP, который обеспечивает более эффективное сжатие без потери качества, снижая вес файлов на 25–35 % по сравнению с JPEG и PNG. Создать WebP-версии можно с помощью плагинов (например, Imagify для WordPress) или конвертеров. Проверить поддержку браузером webp можно посредством тега picture и, в случае ее отсутствия вывести альтернативный формат:

<picture>
 <source srcset="img.webp" type="image/webp">
 <source srcset="img.jpg" type="image/jpeg"> 
 <img alt=”” width=”640” height=”480” loading=”lazy” src="img.jpg">
</picture>

3. Сжимайте изображения

Даже если вы используете современные форматы, сжатие позволяет уменьшить общий размер файлgов. Инструменты вроде TinyPNG помогают сократить вес изображений до 70 %. Пользователям WordPress подойдут плагины WP Smush или аналогичные.

4. Загружайте отдельные версии изображений для разных устройств

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

<picture>
 <source media="(min-width: 768px)" srcset="tablet_image.png">
 <source media="(min-width: 1024px)" srcset="desktop_image.png">
 <img src="mobile_image.png" alt="">
</picture>

5. Откладывание закадровых изображений

Закадровые изображения (те, что вне видимой области) нужно загружать позже. Это позволяет сосредоточить ресурсы на элементах, видимых сразу после загрузки. Для отложенной загрузки изображений существует специальный атрибут loading, который сообщает браузеру о том, что исходный файл изображения следует загружать только по мере попадания в область видимости:

<img src="pillow.jpg" width="640" height="360" alt="purple pillow with flower pattern" loading=”lazy” />

Изображения, которые будут востребованы пользователем позднее, могут быть также предварительно загружены с помощью специального тега link, размещаемого в секции head. При этом можно дополнительно указать, на каком именно расширении необходима данная картинка:

<link rel=”preload” as=”image” href=”mobileBanner.png” media=”(max-width: 768px)” />
<link rel=”preload” as=”image” href=”desktopBanner.png” media=”(min-width: 1600px)” />

6. Конвертируйте GIF в видео

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

<video autoplay loop muted playsinline>
 <source src="animation.webm" type="video/webm">
 <source src="animation.mp4" type="video/mp4">
</video>

7. Удалите неиспользуемый CSS

Неиспользуемые фрагменты CSS замедляют построение страницы. Используйте инструменты, такие как DevTools, для определения ненужных стилей. Удалите их или перенесите в некритичные загрузки.

div {
  display: flex;
  display: -ms-flex; // для современных браузеров вендорные префиксы уже не нужны
}

8. Минимизируйте JS и CSS

Удалите пробелы, комментарии и ненужные символы из JS и CSS файлов. Для небольших сайтов подойдут онлайн-инструменты вроде CSS Minifier, для WordPress — соответствующие плагины.

9. Извлечение критического CSS

Переместите стили, необходимые для отображения верхней части страницы, в <head> HTML-документа, а остальные загрузите асинхронно.

<head>
 <style id=”critical”>
 /* критические стили */
 </style>
</head>
<body>
 <script>
 function onStyleLoad() {
 // блок критических стилей удаляется после загрузки файла стилей
 document.getElementById(“critical”).remove();
 }
 </script>
 <!-- ссылка на файл стилей ближе к концу body —>
 <link rel=”stylesheet” href=”bundle.css” onload=”onStyleLoad();” />
</body>

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

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

11. Асинхронный JS

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

async загружает скрипт параллельно с HTML.
defer выполняет скрипт после завершения загрузки HTML.

12. Предварительное подключение к сторонним ресурсам

Используйте тег <link rel="preconnect">, чтобы заранее устанавливать соединения с необходимыми ресурсами, что ускоряет их загрузку:

<link rel="preconnect" href="https://example.com">

13. Разделите длинные задачи

Длинные фрагменты JS, выполняемые более 50 мс, могут снижать отзывчивость. Используйте DevTools для их выявления и разбивайте на более короткие сегменты.

14. Разделение кода на отдельные bundle

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

js
const moduleA = import(“moduleA.js”); // при правильной настройке сборщика для данного модуля будет создан отдельный JavaScript-файл

15. Предварительная загрузка ключевых ресурсов

Используйте тег <link rel="preload">, чтобы указать браузеру приоритет загрузки определенных ресурсов, например:

<link rel="preload" as="script" href="script.js">
<link rel="preload" as="style" href="style.css">

16. Включите кэширование

Кэширование ресурсов сокращает время загрузки при повторных посещениях сайта. Настройте HTTP-заголовки для управления кэшированием.

17. Уменьшите размер DOM

Сложные структуры DOM замедляют загрузку. Поддерживайте дерево DOM с глубиной не более 32 узлов и 60 дочерними узлами для каждого родителя.

18. Минимизируйте редиректы

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

19. Оптимизация шрифтов с помощью font-display: swap;

Это предотвращает блокировку рендеринга текста.

ПримерCSS:

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap;
}

20. Внедрение HTTP/3 для ускорения передачи данных.

HTTP/3 использует QUIC-протокол, уменьшающий задержки. Пример настройки для Nginx:

server {
  listen 443 quic reuseport;
  listen 443 ssl;
  ssl_protocols TLSv1.3;
  add_header Alt-Svc 'h3=":443"; ma=86400';
}

21. Использование Service Workers для кэширования.

Пример кода (JavaScript):

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('v1').then((cache) => {
      return cache.addAll(['/critical.css', '/main.js']);
    })
  );
});

22. Tree Shaking для удаления неиспользуемого JS-кода.

Пример настройки в Webpack:

// webpack.config.js
module.exports = {
  mode: 'production',
  optimization: {
    usedExports: true,
  },
};

23. Настройка Brotli-сжатия на сервере.

Пример для Nginx:

gzip on;
gzip_types text/plain text/css application/json application/javascript;
brotli on;
brotli_types text/plain text/css application/json application/javascript;

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

Вывод

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

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

Хабы: