SEO
Пиксель Тулс
3961

Исследование по 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 работают значительно лучше, чем другие.

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

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

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

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

Средний 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 оказались самыми быстрыми

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 и хостинг-провайдеры.

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

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

  • Быстрые — 0–1000 мс.
  • Средние — 1000–2500 мс.
  • Медленные — более 2500 мс.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Полезные материалы и инструменты:

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

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Пиксель Тулс", "author_type": "self", "tags": [], "comments": 15, "likes": 27, "favorites": 112, "is_advertisement": false, "subsite_label": "seo", "id": 87904, "is_wide": false, "is_ugc": true, "date": "Tue, 15 Oct 2019 10:09:24 +0300", "is_special": false }
0
{ "id": 87904, "author_id": 313674, "diff_limit": 1000, "urls": {"diff":"\/comments\/87904\/get","add":"\/comments\/87904\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/87904"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199127, "last_count_and_date": null }
15 комментариев
Популярные
По порядку
Написать комментарий...
2

Рейтинг по CMS и фреймворкам интересный -)

Ответить
7

Но выводы не совсем корректные. Единственное, что они узнали — медианный сайт на Wordpress медленнее медианного сайта на Weebly. И всё. Это не говорит о том, что какая-то CMS более медленная или более быстрая. Их можно настроить тысячами разных способов и применить сотни разных фишек для ускорения. Или наоборот, обвешать некачественными плагинами и всё убить.

Ответить
4

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

Например, на WordPress сделать сайт очень легко. Поэтому, большинство сайтов на этой CMS делают неопытные разработчики. В итоге: в среднем, медленно и с уязвимостями.

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

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

Субьективно: скорость работы была бы очень похожей (php7 работает быстро, хороший хостинг стоит копейки), скорость разработки и ее цена для типового сайта была бы ниже у WordPress. 

Для примера приведу сайт своих конкурентов (чтобы не назвали рекламой): https://montenegro-travel.info/

Он работает на WordPress. И страницы без сторонних скриптов (вроде Google Maps) загружаются быстро (3,8 секунды / 0,723 секунды | 0,237 МБ согласно gtmetrix.com и pingdom.com).

А вот сайт другого конкурента: https://in-trips.ru/

Он на Drupal. Страницы без сторонних скриптов грузятся немного дольше (12,2 секунды /  2,69 секунды | 2,37 МБ согласно gtmetrix.com и pingdom.com).

Справедливости ради отмечу, что первый конкурент использует Lazy Load, а второй - нет. Я старался сравнивать похожие по размеру и контенту страницы.

Вывод: дело не в технологии, а в том, кто и как ее будет применять. 

Ответить
0

А что за хостинг у этих сайтов?

Ответить
1

Здравствуйте.

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

https://montenegro-travel.info/ - работает на Бегете. Думаю, что там какой-то из самых дешевых тарифов. Банально смысла нет переплачивать.

https://in-trips.ru/ - тоже на Бегете. Этот сайт побольше, так что даже предположить не могу какой там тариф.

Ответить
0

Здравствуйте!

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

Ответить
1

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

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

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

Ответить
3

WP надо уметь правильно готовить

Ответить
0

Именно. Я чуть раньше даже пример привел об этом. 

Ответить
2

Исследование в целом по задумке интересное, но уж слишком неаккуратные выводы и формулировки. 

 Общий вес страницы также влияет на полную загрузку

Большие объёмы данных передаются медленнее меньших? Вот это да.

 В случае десктопных страниц на TTFB сильно влияет CDN. На мобильных устройствах показатель больше зависит от количества HTML-запросов.

Как количество запросов влияет на TTFB? Это время до получения первого байта в первом запросе. И HTTP-запросы, а не HTML.

 Средняя скорость TTFB 

Скорость времени до первого байта? Скорость времени?

 Самые быстрая загрузка TTFB в Китае, Японии и Германии. Самые низкая скорость TTFB — в Австралии, Индии и Бразилии.

Если делать запрос из Китая на сервер, находящийся в Китае, то TTFB будет меньше. Если из Бразилии в Китай — больше. Они проверяли из всех точек во все? Очень странные выводы. И, опять же, «быстрая загрузка TTFB» — «быстрая загрузка времени на отрисовку первого байта». Быстрая. Загрузка. Времени.

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

Ответить
0

Про TTFB (быстрая загрузка времени) и HTTP-запросы справедливо!
Спасибо, исправили.

Ответить
0

Ровно теже мысли возникали при чтении статьи. От себя добавил бы вопрос: а где выводы? Статья ради статьи получилась.

Ответить
0

Akamai CDN действительно настолько плох? Есть ли вообще смысл его подключать для сайта или он только вредит?
Кто-нибудь работал с Akamai или другим CDN для раздачи средних (~5-50mb) файлов, становится ли лучше скорость скачивания или клауд сторейджа более чем достаточно?

Ответить
5

Он не плох, это обычный CDN. Намного важнее расположение нод. Если у Akamai нет точки присутствия там, где в основном находятся ваши посетители, то вы ничего не выиграете, а может и проиграете. Посмотрите карту нод CDN для выбора той, что вам подходит.

Ответить
0

Это Akamai - обычный CDN? )))
Да это монстр среди CDN. Но там и цены - не для всех.

Ответить
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Баннер в ленте на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } }, { "id": 20, "label": "Кнопка в сайдбаре", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cgxmr", "p2": "gnwc" } } } ] { "page_type": "default" }