2738 Аналитика

Исследование 5,2 млн страниц: новые знания о скорости загрузки сайта

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



Оптимизатор и автор блога Backlinko Брайан Дин с командой часто проводят исследования на больших объемах выборки. К примеру, в блоге PR-CY есть перевод исследования 912 миллионов статей с важными выводами о контент-маркетинге.

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

Все суждения в исследовании основаны на корреляциях, поэтому выводы — это не факты, а предположения о связи быстрой скорости загрузки с каким-либо фактором. Специалисты анализировали страницы из англоязычной выдачи Google, но выводы можно перенести и на русскоязычные сайты.

Как проводили исследование

Метрики, которые входят в измерение скорости загрузки сайта, мы разбирали в подборке плагинов для Wordpress. У сайтов на любых движках измеряют время загрузки первого байта (TTFB), начало рендеринга страницы, загрузку основных элементов и полную загрузку контента страницы.

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

Кратко о самых интересных выводах

  1. Скорость загрузки
    Средняя скорость загрузки первого байта (TTFB) — 1,286 секунды на десктопе и 2,594 секунды на мобильном. Среднее время полной загрузки страницы — 10,3 секунды на десктопе и 27,3 секунды на смартфоне.
  2. TTFB
    Использование CDN коррелировало с улучшением показателей скорости загрузки TTFB. Для десктопных результатов на показатель TTFB сильнее влияют CDN, а для мобильных — количество запросов HTML.
  3. Фреймворки
    Самыми быстрыми JavaScript-фреймворками для средних по размеру страниц оказались Wink и Gatsby.
  4. Сжатие файлов
    Более высокая производительность у страниц с наибольшим и наименьшим уровнем сжатия файлов перед отправкой с сервера.
  5. Сжатие изображений
    Лучший результат по ускорению загрузки дали адаптивные изображения. Еще очень эффективным оказалось сжатие gzip — и для десктопа,и для мобильной выдачи. Использование формата WebP для ускорения загрузки картинок работает хуже.
  6. CMS
    При сравнении мобильных страниц на разных CMS лучшие показатели у сайтов на движках Squarespace и Weebly, худшие у Wix и WordPress.

Разберем выводы подробнее с таблицами.

Общая скорость загрузки

Загрузка страницы состоит из отдельных этапов, некоторые из них происходят на уровне сервера, другие в браузере пользователя:

Стадии загрузки сайта

Исследователи определили среднюю скорость для этих показателей:

  • TTFB — время до загрузки первого байта HTML-документа.
  • StartRender — начало рендеринга страницы.
  • Visual Complete — время, за которое пользователь начинает видеть весь контент страницы.
  • Индекс скорости — как быстро пользователь видит загрузку страницы.
  • onLoad — время, за которое загружаются все ресурсы страницы (CSS, изображения и т. д.).
  • Полная загрузка — время, за которое страница полностью загружается в браузере пользователя.

Показатель/Средняя скорость
Десктоп, секунды
Мобильный, секунды
TTFB
1,286
2,594
StartRender
2,834
6,709
Visual Complete
8,225
21,608
Индекс скорости
4,782
11,455
onLoad
8,875
23,608
Полная загрузка
10,3
27,3



В итоге средняя скорость загрузки страницы составляет около 10,3 секунд на десктопе и 27,3 секунды на смартфоне. В среднем мобильные страницы загружаются на 87,84% дольше, чем десктопные.

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

Исследователи проанализировали влияние разных характеристик страницы на TTFB (время до первого байта):

Факторы влияния на TTFB

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

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

Другим выводом о CDN стало то, что страницы, которые использовали CDN, оказались хуже страниц, которые их не использовали.

В десктопной выдаче:


И в мобильной:

Как это могло произойти?

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

Исследователи проанализировали производительность 18 лучших поставщиков CDN и нашли большую разницу в производительности — лучший из найденных CDN работал в 3,6 раза эффективнее, чем худший вариант.

Сводка производительности для каждого провайдера:

Результаты по десктопу

Хорошо: Airee, Amazon Cloudfront, Azure CDN, CacheFly, EdgeCast, Fastly, GitHub Pages, Google Cloud, KeyCDN, MaxCDN, Netlify.

Средне: CDN77.

Плохо: Akamai, ArvanCloud, Cloudflare, Fireblade, Incapsula, Sucuri.

Результаты по мобильной выдаче

Хорошо: Airee, Amazon Cloudfront, Azure CDN, CDN77, EdgeCast, Fastly, GitHub Pages, Google Cloud, KeyCDN, MaxCDN, Netlify.

Средне: Fireblade, Incapsula, Sucuri.

Плохо: Akamai, ArvanCloud, Cloudflare.

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


Использование CDN и минимизация запросов HTML могут ускорить TTFB для десктопа и мобильных устройств. С другой стороны, во многих случаях использование неудачной CDN может замедлить работу.

Какие фреймворки самые быстрые

JavaScript Framework помогает в расстановке приоритетов — что и когда загружать на странице. Почти 76% всех сайтов используют эти платформы для создания эффективных, безопасных и стандартизированных страниц, так что исследователи решили найти самый быстрый фреймворк.

Сначала они изучили, как часто программисты использовали платформы из выборки:

Как JavaScript фреймворки влияют на скорость сайта

Самым популярным по использованию JS-фреймворком оказался React — его используют 25,3% сайтов. Еще популярны TweenMax (10,3%) и RequireJS (9,5%).

Затем исследователи хотели выяснить, какие фреймворки JavaScript связаны с показателем FCP (First Contentful Paint) — временем, когда пользователь начинает видеть отрисованный полезный контент на странице. Результаты разделили по размеру страниц: маленькие (<1,264,374 байт), средние (1,264,374 и 4,019,332 байт) и большие (> 4,019,332 байт).

Для небольших страниц RightJS вышел на первое место:

Как фреймворки JavaScript влияют на загрузку страниц

Для средних по размеру страниц лучшие результаты показали Wink и Gatsby:

Как фреймворки JavaScript влияют на сайт



Самое быстрое время FCP на больших страницах было у страниц с Gatsby и Riot:

Влияние фреймворков на скорость

Выбор фреймворка JavaScript может значительно повлиять на время загрузки FCP. Для страниц среднего размера JS-фреймворк Wink, который оказался лучшим, загружается на 213% быстрее, чем самый медленный фреймворк Meteor.

Возможно, некоторые JS-фреймворки больше подходят страницам определенного размера и лучше на них работают. Например, Riot попал на второе место для больших страниц, но на 15 место для маленьких.


Скорее всего не существует «лучшего» JavaScript-фреймворка для любой страницы. Для сайтов с небольшими страницами RightJS показал себя лучшим, для сайтов с большими страницами подойдет Gatsby.

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

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

Исследователи решили выяснить, действительно ли сжатие файлов улучшает скорость страницы. Для этого они разделили показатели FCP (время, когда пользователь начинает видеть отрисованный контент) на три категории по времени загрузки:

  • быстро: 0-1000 мс;
  • средне: 1000 мс - 2500 мс;
  • медленно: <2500 мс.

Затем они сравнили скорость FCP и уровни сжатия для маленьких, средних и больших по размеру страниц.

Среди небольших страниц самую быструю скорость загрузки FCP показывали страницы с минимальным уровнем сжатия. Дальше по мере увеличения сжатия процент быстрых страниц уменьшался. При максимальном сжатии показатель снова увеличивался.

Как сжатие влияет на скорость сайта

Страницы среднего размера имели похожие результаты:

Влияние сжатия на скорость загрузки

Большие страницы тоже показали такой результат:

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

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

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

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


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

Какое сжатие изображений эффективнее ускоряет загрузку

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

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

  • WebP
    Некоторые сайты уже используют новый формат WebP, который разработал Google. Изображения в таком формате при сохранении качества могут весить значительно меньше картинок в другом формате.
    Как использовать WebP для оптимизации картинок на сайте

  • Оптимизированные изображения
    Под такими изображениями исследователи подразумевают разные версии картинок, которые появляются в зависимости от устройства пользователя. В эту категорию они включили использование CDN, сжатие и другие службы оптимизации изображений.

  • Отложенная загрузка изображений
    Lazy loading или «ленивая загрузка»
    — изображения на следующем скролле страницы загружаются по мере надобности, когда пользователь прокручивает до этого скролла.

  • Адаптивные изображения
    Картинки, которые динамически адаптируются под размер окна браузера.

При сравнении разных подходов для оценки скорости адаптивные изображения вышли на первое место.

Как сжать картинки на сайте


Также исследователи оценили, какой подход к оптимизации картинок приведет к лучшей оценке инструментом Lighthouse, результаты оказались почти такими же:

Способ сжатия изображений на сайте

Формат WebP перспективнее PNG и JPEG по сжатию при сохранении качества, но пока очень немногие сайты внедрили этот новый формат изображений.

Сайты на каких CMS грузятся быстрее

Исследователи определили движки, которые использовали сайты в выборке, затем сравнили производительность TTFB для каждой обнаруженной CMS.

Weebly и Squarespace выходят на первое место для десктопов.

Статистика CMS 2019 год

Что касается скорости загрузки страниц на мобильных устройствах, Squarespace занимает первое место, Adobe Experience Manager и Weebly завершают топ-3. Выходит, топ-3 из анализа десктопа и мобильной выдачи одинаков, разные только лидеры.

Статистика по CMS 2019

По статистике 30% всех сайтов созданы на WordPress. Интересно, что в этом исследовании скорости загрузки WordPress занимает только 14 место по мобильной выдаче. Wix — тоже одна из самых популярных CMS и тоже занимает далеко не первые места в таблице по скорости загрузки на мобильном и десктопе.

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

Почитать по теме:
Какую CMS выбрать? Чек-лист для начинающих
Как выбрать CMS для интернет-магазина

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


По данным исследования, самые быстрые страницы из десктопной и мобильной выдачи были на Weebly, Squarespace и Adobe Experience Manager.



Итак, с высокой скоростью загрузки TTFB коррелировало использование CDN на десктопе и количество запросов HTML на мобильных устройствах. Высокую скорость загрузки показывали страницы с наибольшим и наименьшим уровнем сжатия файлов перед отправкой с сервера. Сжатие gzip — самое эффективное для обоих видов выдачи. В оптимизации картинок лучший результат дали адаптивные изображения. Использование формата WebP для ускорения загрузки картинок работает хуже.


Эти и другие выводы в оригинале исследования Backlinko

Google о скорости загрузки как факторе ранжирования сайта
Google представил новый отчет анализа скорости страниц
Новогодние скидки в PR-CY!
Комментарии (11)
Natalia88   15.10.2019 10:37
Полезная инфа, теперь можно применить и проверить на практике, посмотрим что выйдет!
О, я тоже не применял формат WebP, даже и не в курсе был, интересно, а в Яндексе он также будет себя вести как и в Гугл?!
zraziu   15.10.2019 16:38
Интересное исследование, но где сравнение с дефолтовыми значениями? Например скорость загрузки без использования фреймворков, без сжатия файлов. А то напрашивается вывод, что лучше вообще не сжимать. Про CMS считаю не корректное сравнение. WordPress самый популярный движок и большой их % клепают новички.
ig0r   15.10.2019 20:45
С WebP есть проблема, не отображается в Safari, на айфонах.
maxklim   16.10.2019 09:32
Тогда вообще печально, так как у нас большинство народа пользуется айфонами! Но как-то странно, гугл каждый раз свои обновления в первую очередь тестирует на айос, не логично то-то!
russpuss   19.10.2019 19:20
Что это за новости? У меня всё отображается.
Xenial   17.10.2019 09:16
Меня полностью устраивает Squarespace, с ним работать просто, не сжимаю ничего, главное на мобильной версии все работает отлично!
Kattyha   17.10.2019 17:38
Я думаю по мобильной версии можно было сделать более подробнее результаты, думаю это актуальнее, чем десктоп!
NatTi   18.10.2019 11:45
Я все картинки общей кучей сжимаю и сразу заметно как быстро происходит загрузка, причем качество нормальное!
Kirill_Chekin   18.10.2019 12:53
Давно уже не сталкивался с этими проблемами, W.Tools для меня самый лучший помощник, все летает, открывается без проблем
Kostya_Tokin   19.10.2019 14:25
Ну вот,про лучший фреймворк я бы отметил, что очень сейчас крут Express, он прям быстрый и гибкий, для меня просто находка!

Чтобы оставлять комментарии, вам нужно войти в систему

Авторизоваться