Разбор веса страницы

У каждого файла два размера

Есть размер файла в сети и размер после распаковки. Допустим, сервер сжимает скрипт в 400 КБ до 110 КБ. Посетитель платит 110 КБ загрузки и мобильного трафика, а его телефону всё равно приходится прочитать все 400 КБ. Этот инструмент оценивает первое число, переданные байты, а второе показывает рядом.

Байты быстро превращаются в ожидание. На медленном профиле 4G, который Lighthouse использует в тестах (1,6 мегабита в секунду), страница в 2 МБ скачивается около десяти секунд, и это ещё до запуска хоть одного скрипта.

Что скачивается

Получив HTML, инструмент запрашивает то, что браузер запросил бы при первой загрузке:

• таблицы стилей и файлы, объявленные через rel="preload" или modulepreload;
• скрипты с src, кроме запасных nomodule и типов скриптов, которые браузер не выполняет;
• изображения: для srcset и <picture> берётся самый большой вариант, который выбрал бы браузер на компьютере, а у изображений с ленивой загрузкой читается data-src;
• обложки видео, favicon и изображения во встроенных атрибутах style;
• шрифты, объявленные в правилах @font-face (файл WOFF2, если он есть, не больше двенадцати шрифтов), и таблицы стилей, подключённые через @import.

Несколько ограничений держат проверку короткой: 80 файлов, 6 МБ на файл, 15 МБ всего. Если на странице больше 80 файлов, число запросов показывается со знаком «≥».

Шкала оценок

Для ориентира: медианная мобильная страница по данным HTTP Archive весит около 2,3 МБ, и здесь она получает D. Так что страница может быть совершенно средней для интернета и всё равно медленной на телефоне.

Что делать с находками

Изображения больше 200 КБ

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

Изображения JPEG или PNG

Если сервер позволяет, инструмент перекодирует восемь самых тяжёлых изображений в WebP (качество 80) и AVIF (качество 55) и показывает размер каждого результата. Так экономия измеряется на ваших собственных картинках. Отдавайте новый формат с запасным вариантом:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" width="1200" height="630" alt="…">
</picture>

Изображения без width и height

Это не про вес. Из-за этого текст прыгает, пока страница загружается. Добавьте оба атрибута.

Текстовые файлы без сжатия

HTML, CSS, JavaScript или SVG больше 1,5 КБ, пришедшие без gzip или Brotli. Настройки сервера есть в проверке сжатия и кэша.

Больше 1 МБ JavaScript или 300 КБ шрифтов

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

Углеродная оценка и то, что не учитывается

Оценка следует версии 4 модели Sustainable Web Design. Она считает 0,300 кВт·ч на каждый переданный гигабайт, что охватывает дата-центры, сети и устройства посетителей вместе с их производством, и умножает это на среднемировые 494 г CO₂-экв. на кВт·ч. Получается около 0,15 г на мегабайт. Для сравнения с бензиновым автомобилем взято 170 г на километр. Воспринимайте это как порядок величины, удобный для сравнения двух версий страницы.