Сетевые запросы

Основные концепции сетевых запросов

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

Типы запросов

  1. HTML-запросы – запросы основных HTML-документов, которые определяют структуру страницы.
  2. CSS и JavaScript – запросы стилей и скриптов, влияющие на критический путь рендеринга.
  3. Медиа-файлы – изображения, видео и аудио, которые требуют особого контроля размера и формата.
  4. API и AJAX – асинхронные запросы к серверу, влияющие на динамическое обновление контента.

Lighthouse разделяет запросы на блокирующие и неблокирующие, оценивая их влияние на скорость отображения страницы (FCP, LCP) и интерактивность (TTI).

Метрики сетевых запросов

  • Total Blocking Time (TBT) – суммарное время блокировки основного потока JavaScript и запросов.
  • Time to First Byte (TTFB) – задержка между отправкой запроса и получением первого байта ответа.
  • Largest Contentful Paint (LCP) – время загрузки самого большого визуального элемента, зависящее от сетевых запросов.
  • Resource Sizes – анализ объема передаваемых данных, выявление избыточных запросов.

Оптимизация сетевых запросов

Минимизация количества запросов

  • Объединение скриптов и стилей в один файл.
  • Использование спрайтов и встраивания SVG вместо отдельных файлов.

Сжатие ресурсов

  • Применение GZIP или Brotli для текстовых данных (HTML, CSS, JS).
  • Использование WebP или AVIF для изображений.

Кеширование

  • Настройка заголовков Cache-Control и ETag.
  • Предзагрузка критических ресурсов с помощью <link rel="preload">.

Оптимизация приоритетов

  • Ленивая загрузка изображений (loading="lazy").
  • Асинхронная загрузка скриптов (async, defer).
  • Указание атрибутов importance="low" для необязательных ресурсов.

Анализ Lighthouse

Lighthouse создает детализированные отчеты, включающие:

  • Сетевую диаграмму waterfall, показывающую последовательность запросов и задержки.
  • Категории ресурсов, разделенные по типу (JS, CSS, изображения).
  • Подсказки по оптимизации, включая рекомендации по уменьшению времени TTFB, размера ресурсов и задержек рендеринга.

Каждый запрос снабжен метаданными: URL, размер, время загрузки, код статуса, источник. Эти данные позволяют выявлять узкие места: медленные API, крупные изображения, блокирующие скрипты.

Использование API Lighthouse для сетевых запросов

JavaScript-интерфейс Lighthouse позволяет запускать аудит программно и получать сетевые данные:

import {launch} from 'chrome-launcher';
import lighthouse from 'lighthouse';

async function runLighthouse(url) {
    const chrome = await launch({chromeFlags: ['--headless']});
    const options = {port: chrome.port, onlyCategories: ['performance']};
    const result = await lighthouse(url, options);
    const networkRequests = result.lhr.audits['network-requests'].details.items;
    console.log(networkRequests);
    await chrome.kill();
}

runLighthouse('https://example.com');

В networkRequests содержится список всех сетевых операций с подробной информацией о времени запроса, размере ответа, методе запроса и статусе HTTP.

Практические советы по аудиту

  • Регулярно проверять критические ресурсы, чтобы выявлять деградацию производительности после обновлений.
  • Фокусироваться на первом запросе HTML, так как он определяет TTFB и скорость начала рендеринга.
  • Использовать фильтры по типу ресурса, чтобы локализовать проблемы в JS, CSS или медиа-файлах.
  • Сравнивать метрики до и после оптимизации, чтобы количественно оценить эффект изменений.

Заключение по сетевым запросам

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

Оглавление