Избегайте огромной полезной нагрузки в сети

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

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

Lighthouse показывает общий размер в кибибайтах (КиБ) всех ресурсов, запрошенных вашей страницей. Первыми представлены самые крупные запросы:

Скриншот Маяка. Избегайте аудита огромной полезной нагрузки в сети.

Согласно данным HTTP-архива , средний объем полезной нагрузки сети составляет от 1700 до 1900 КиБ. Чтобы выявить максимальную полезную нагрузку, Lighthouse помечает страницы, общий объем сетевых запросов которых превышает 5000 КиБ.

Как уменьшить размер полезной нагрузки

Старайтесь, чтобы общий размер байтов не превышал 1600 КиБ. Эта цель основана на объеме данных, которые теоретически можно загрузить через соединение 3G, сохраняя при этом время взаимодействия 10 секунд или меньше.

Вот несколько способов уменьшить размер полезной нагрузки:

Рекомендации для конкретного стека

Угловой

Примените разделение кода на уровне маршрута , чтобы минимизировать размер пакетов JavaScript. Также рассмотрите возможность предварительного кэширования ресурсов с помощью сервис-воркера Angular .

Друпал

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

Джумла

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

WordPress

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

Ресурсы

Исходный код для аудита «Избегайте огромной полезной нагрузки в сети»