Что такое раздутость/разбухание (page bloat) страниц и как это...

140

Что такое раздутость/разбухание (page bloat) страниц и как это вредит бизнесу, поисковому ранжированию и пользователям

Под раздутостью страниц понимается увеличение размера и сложности веб-страниц с течением времени.

Это явление наблюдается уже более десяти лет и продолжает расти, влияя на скорость работы сайта, удобство пользования и результаты бизнеса.

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

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

На размер страницы влияют HTML, изображения, видео, JavaScript и CSS.

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

Раздутость страниц может существенно повлиять на Core Web Vitals - набор показателей Google, влияющих на ранжирование в поисковой выдаче.

Избыток ресурсов может привести к ухудшению показателей CLS, замедлению работы LCP и ухудшению показателей интерактивности, таких как INP, FID и TBT.

Раздутость страниц может негативно сказаться на результатах бизнеса.

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

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

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

За год медианный размер страниц вырос на 6%, при этом вес JavaScript увеличился на 14%, а вес видео - на 32%.

На мобильных страницах также наблюдается рост видео и JavaScript.

90-й процентиль размера страницы почти в четыре раза превышает медианный размер страницы и содержит почти в три раза больше запросов.

Это подчеркивает важность понимания эффективности длинного хвоста.

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

В интересах пользователей рекомендуется стремиться к тому, чтобы HTML, CSS, изображения и блокирующие рендеринг шрифтовые ресурсы занимали 150 КБ, а JavaScript - не более 300-350 КБ на страницу.

Выводы:

1. Понимайте критический путь рендеринга для каждой страницы

2. Убедитесь, что все, кто работает со страницей, понимают, какое влияние на производительность оказывают их действия.

3. Используйте бюджеты производительности для борьбы с регрессией

4. Не полагайтесь на то, что аппаратное обеспечение и сети уменьшат раздувание страниц.

https://www.speedcurve.com/blog/page-bloat-web-performance/

@MikeBlazerX