Исследование по 5,2 млн десктопных и мобильных страниц: что влияет на PageSpeed

  • Home
  • DEVELOPMENT
  • Исследование по 5,2 млн десктопных и мобильных страниц: что влияет на PageSpeed

Брайан Дин и коллеги проанализировали более 5 млн страниц на мобильных и десктопных версиях сайтов, чтобы определить, какие факторы сильнее прочих влияют на скорость загрузки. «Пиксель Тулс» перевёл результаты исследования.

Метрики использовались общепринятые — TTFB («время до первого байта», то есть скорость ответа сервера), Visual Complete (отрисовка страницы), Fully Loaded (полная загрузка). 

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

В полученных результатах достаточно неожиданных и интересных инсайтов. Ниже краткое саммари и подробные результаты.

Ключевые выводы 

  • Средний показатель TTFB для десктопа 1,286 секунды, для мобильных — 2,549 секунды.
  • Средняя скорость загрузки веб-страниц на мобильных на 87,84%ниже, чем на десктопе.
  • Среди CMS самыми шустрыми для мобильных оказались Squarespace и Weebly, а Wix и WordPress в конце рейтинга.
  • В случае десктопных страниц на TTFB сильно влияет CDN. На мобильных устройствах показатель больше зависит от количества HTTP-запросов.
  • Визуальная отрисовка зависит от общего размера страницы. Страницы большего размера визуально отрисовываются на 318% дольше. Gzip помогает быстрее загружать изображения.
  • Общий вес страницы также влияет на полную загрузку (Fully Loaded). Самые «лёгкие» из них загружаются на 486% быстрее.
  • Wink и Gatsby самые быстрые JavaScript-фреймворки. Meteor и Tweenmax — самые медленные. Разница между ними достигает 213%.
  • Страницы с высокой или низкой степенью сжатия файлов получают скорость загрузки выше средней (метрика — первая отрисовка контента).
  • Сторонние скрипты значительно замедляют скорость. Каждый из добавленных в среднем замедляет скорость загрузки на 34,1 миллисекунды.
  • Использование адаптивных изображений (различные версии картинок в зависимости от размера экрана или браузера) в целом увеличивает общую скорость загрузки картинок. Использование WebP (формат сжатия) менее эффективен.
  • Веб-хосты GitHub и Weebly показали наибольшую общую производительность TTFB. Siteground и Wix — самые медленные среди провайдеров, которые были проанализированы.
  • Минимальный TTFB в Китае, Японии и Германии. Самый долгий TTFB — в Австралии, Индии и Бразилии.
  • Использование CDN коррелирует с показателями низкой скорости загрузки страниц. Вероятно, одни CDN работают значительно лучше, чем другие.

Критерии для оценки скорости загрузки страниц 

Скорость загрузки можно разделить на несколько этапов:

Исследование по 5,2 млн десктопных и мобильных страниц: что влияет на PageSpeed 1

Часть стадий происходит на стороне сервера, а часть в браузере пользователя. Для исследования определялась средняя скорость следующих параметров:

  • TTFB: время до получения первого байта HTML-документа.
  • Start Render: время начала рендеринга.
  • Visual Complete: визуальная отрисовка.
  • Speed Index: индекс восприятия скорости страницы пользователем (чем меньше, тем лучше).
  • OnLoad: время, к которому все элементы страницы (CSS, картинки и так далее) загружены.
  • Fully Loaded: 100% загрузка страницы в браузере пользователя.

Средний TTFB для десктопных устройств составила 1,286 секунды, на мобильных — 2,594 секунды.

Исследование по 5,2 млн десктопных и мобильных страниц: что влияет на PageSpeed 2

Среднее значение для скорости начала рендеринга на десктопе и мобильных — 2,834 и 6,079 соответственно.

Исследование по 5,2 млн десктопных и мобильных страниц: что влияет на PageSpeed 3

Визуальная отрисовка занимает в среднем 8,225 и 21,608 секунды в пользу десктопных устройств.

Исследование по 5,2 млн десктопных и мобильных страниц: что влияет на PageSpeed 4

Индекс восприятия скорости загрузки 4,782 секунды и 11,455 секунды.

Исследование по 5,2 млн десктопных и мобильных страниц: что влияет на PageSpeed 5

Средняя скорость загрузки страницы (onLoad) со всеми CSS, изображениями и прочими элементами.

Исследование по 5,2 млн десктопных и мобильных страниц: что влияет на PageSpeed 6

Наконец, скорость полной загрузки страницы в среднем составила 10,3 секунды на десктопе и 27,3 секунды на мобильных устройствах.

Исследование по 5,2 млн десктопных и мобильных страниц: что влияет на PageSpeed 7

Ключевой вывод: в среднем страницы на мобильных устройствах загружаются на 87,84% дольше.

Какие CMS оказались самыми быстрыми 

В рамках исследования для каждого анализируемого сайта определили CMS и сравнили показатели TTFB. Первые позиции заняли Weebly и Squarespace, остальные результаты на диаграмме ниже. Нужно учитывать, что на TTFB также влияет время отклика сервера.

Исследование по 5,2 млн десктопных и мобильных страниц: что влияет на PageSpeed 8

Для мобильных устройств результаты несколько отличаются:

Исследование по 5,2 млн десктопных и мобильных страниц: что влияет на PageSpeed 9

Интересно, что WordPress, как один из самых популярных движков (30% всех анализируемых сайтов), занимает лишь 15-е место в рейтинге TTFB на десктопных устройствах.

Использование CDN и количество HTTP-запросов 

Анализ различных характеристик страниц показал различное влияние на скорость для мобильных и десктопных страниц.

Исследование по 5,2 млн десктопных и мобильных страниц: что влияет на PageSpeed 10

Как видно на диаграмме выше, CDN влияет на TTFB как для десктопа, так и для мобильных. Но в случае последних большее значение имеет количество HTTP-запросов, число которых стоит стремиться сокращать.

Тяжёлые страницы отрисовываются на 381% дольше 

Тяжёлыми следует считать документы с размером более 3,49 МБ, лёгкие — менее 0,83 МБ. Проверить размер документа, время отклика сервера и скорость загрузки кода для списка URL можно с помощью специального инструмента «Пиксель Тулс». 

Визуальная отрисовка (Visually Complete) — состояние страницы, при котором все видимые элементы загружены и доступны для просмотра на стороне браузера пользователя.

Исследование по 5,2 млн десктопных и мобильных страниц: что влияет на PageSpeed 11

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

В любом случае отрисовка важна для субъективного восприятия скорости пользователями и зависит она в том числе от общего размера страницы (bytesTotal).

Исследование по 5,2 млн десктопных и мобильных страниц: что влияет на PageSpeed 12

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

Это касается и полной загрузки страницы (Fully Loaded). Причём как для настольных компьютеров, так и для мобильных устройств.

Исследование по 5,2 млн десктопных и мобильных страниц: что влияет на PageSpeed 13

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

Самые быстрые JavaScript-фреймворки 

74% процента исследуемых сайтов используют различные JavaScript-фреймворки. Вот самые популярные из них.

Исследование по 5,2 млн десктопных и мобильных страниц: что влияет на PageSpeed 14

Самые популярные — React, TweenMax и RequireJS. 

Далее эффективность фреймворков определялась для трёх типов страниц: маленькие (до 1,3 МБ), средние (от 1,3 до 4 МБ) и большие (более 4 МБ).

Результаты влияния на первую отрисовку контента (FCP) для небольших по размеру страниц:

Исследование по 5,2 млн десктопных и мобильных страниц: что влияет на PageSpeed 15

Рейтинг фреймворков для средних страниц размером от 1,3 до 4 МБ.

Исследование по 5,2 млн десктопных и мобильных страниц: что влияет на PageSpeed 16

Для больших страниц весом более 4 МБ.

Исследование по 5,2 млн десктопных и мобильных страниц: что влияет на PageSpeed 17

В целом выбор платформ для разработки существенно влияет на скорость отрисовки контента. Самым быстрым среди страниц среднего размера оказался фреймворк Wink, самым медленным — Meteor. Разница между ними более чем в два раза.

Разумеется, это не говорит о превосходстве одних архитектурных решений над другими — для разных страниц с точки зрения размера результаты неоднородны. Тем не менее можно выделить RightJS как эффективный для сайтов с большим количество «лёгких» страниц и Gatsby для страниц размером более 4 МБ.

Сжатие файлов и скорость отрисовки контента 

Gzip работает так — браузер получает файлы .css, .html, .js, .xml в сжатом виде и распаковывает их на стороне пользователя. Такие технологии компрессии предлагают популярные CMS и хостинг-провайдеры.

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

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

  • Быстрые — 0–1000 мс.
  • Средние — 1000–2500 мс.
  • Медленные — более 2500 мс.
Исследование по 5,2 млн десктопных и мобильных страниц: что влияет на PageSpeed 18

Худшие показатели скорости FCP показали страницы со степенью сжатия файлов 60–80%. 

Сторонние скрипты замедляют загрузку страниц 

Речь идёт о скриптах вроде Google Analytics, «Яндекс.Метрики», кнопок для шеринга в социальных сетях, подгружающихся видео со сторонних сайтов и так далее. Такие фрагменты кода действительно замедляют наши страницы.

Исследование по 5,2 млн десктопных и мобильных страниц: что влияет на PageSpeed 19

Фактически время загрузки подобных страниц в среднем увеличивается на 34,1 миллисекунды. 

Адаптивные изображения и формат сжатия WebP 

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

В рамках исследования сравнивались четыре подхода к оптимизации картинок:

  • WebP, предложенный Google формат сжатия изображений с потерями и без потерь качества.
  • Оптимизированные изображения, то есть разные типы иллюстраций в зависимости от устройства пользователя, его местоположения и так далее. В эту же категорию включили CDN и Image Compress.
  • Lazy Loading — отложенная загрузка, то есть иллюстрация начинает загружаться, только когда пользователь доскроллит до неё.
  • Адаптивные изображения — картинки, которые адаптируются под размер окна браузера пользователя.

Сравнение проводилось с помощью инструмента Lighthouse от Google. Лучше всех себя показали страницы с адаптивными изображениями. 

Исследование по 5,2 млн десктопных и мобильных страниц: что влияет на PageSpeed 20

Производительность популярных провайдеров 

Время отклика сервера — одно из основных условий, определяющих TTFB. В рамках исследования были отобраны 18 популярных хостинг-провайдеров, и вот какова доля десктопных страниц разной степени быстродействия для каждого из них.

Исследование по 5,2 млн десктопных и мобильных страниц: что влияет на PageSpeed 21

Для мобильных устройств результаты несколько отличаются:

Исследование по 5,2 млн десктопных и мобильных страниц: что влияет на PageSpeed 22

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

Исключив GitHub, получаем топ-3 (в рамках участвующих в исследовании страниц): Seravo, Netify и Weebly.

Скорость сайтов по всему миру 

Были выбраны 11 стран, и в качестве основной метрики снова учитывалось значение TTFB. Разбивка для десктопа получилась следующая:

Исследование по 5,2 млн десктопных и мобильных страниц: что влияет на PageSpeed 23

Для мобильных устройств:

Исследование по 5,2 млн десктопных и мобильных страниц: что влияет на PageSpeed 24

Самая большая доля быстрых страниц в Китае, Японии и Германии. Большинство страниц со средними показателями расположились в России, США и Великобритании. Медленных страниц больше всего в Индии, Бразилии и Австралии.

Корреляция использования CDN и скорости загрузки страниц 

Ранее было рассмотрено влияние CDN на отрисовку страниц, но сюрпризом оказалась корреляция использования сетей доставки контента и низкой скорости общей загрузки страниц. Как на десктопных устройствах:

Исследование по 5,2 млн десктопных и мобильных страниц: что влияет на PageSpeed 25

Так и на мобильных:

Исследование по 5,2 млн десктопных и мобильных страниц: что влияет на PageSpeed 26

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

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

Исследование по 5,2 млн десктопных и мобильных страниц: что влияет на PageSpeed 27

При правильной настройке такие сети только ускоряют загрузку всех файлов, отвечающих за контент (статические элементы, видео, картинки, .js- и .css-файлы, не требующие выполнения кода на сервере).

К сожалению, видимо, не все CDN одинаково хороши. Ниже представлено распределение страниц разной скорости в каждой из 18 популярных сетей.

Исследование по 5,2 млн десктопных и мобильных страниц: что влияет на PageSpeed 28

Несмотря на большой набор данных (5,2 млн страниц), исследование носит корреляционный характер и не говорит о причинно-следственных связях. При выборе хостинг-провайдеров, CMS, CDN можете учитывать, но не руководствоваться результатами.

Leave a Comment