В статье:

1. Самые интересные выводы, кратко

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

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

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

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

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

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

Оптимизатор и автор блога 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, изображения и т. д.).
• Полная загрузка — время, за которое страница полностью загружается в браузере пользователя.

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

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

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

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

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

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

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

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

Почитать по теме:
Как оптимизировать показатель LCP | Ускоряем загрузку контента для пользователей

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

Теоретически 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% всех сайтов используют эти платформы для создания эффективных, безопасных и стандартизированных страниц, так что исследователи решили найти самый быстрый фреймворк.

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

Самым популярным по использованию 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 вышел на первое место:

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

Самое быстрое время 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 по сжатию при сохранении качества, но пока очень немногие сайты внедрили этот новый формат изображений.

Почитать по теме:
Большое руководство по SEO для картинок: как оптимизировать изображения на сайте

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

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

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

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

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

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

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

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

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

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

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

Источник