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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Всем высоких скоростей и довольных пользователей!