Все дизайнеры обожают сайт awwwards – площадку с платной публикацией, где собраны самые классные работы в сфере веб-дизайна. А поскольку мы душнилы по части performance, мы собрали почти 5000 сайтов, определили их фреймворк и проверили производительность в Lighthouse. Также собрали статистику по их авторам. И вот что получилось.

Небольшой дисклеймер: работы на awwwards – это в основном креативные сайты. Там редко публикуются тяжеловесные проекты.

Фреймворки

В выборку попали работы последних лет – примерно с середины 2020 –, которые были хорошо оценены жюри.

Мы написали скрипт для определения фреймворка, так как теги на awwwards зачастую некорректны, а иногда просто отсутствуют. AstroJS и Angular оказались непопулярны, а для остальных распределение вышло таким:

Что ж, засилье Wordpress достало нас и тут.

Производительность

Конечно, нам захотелось посмотреть на оценки сайтов в Lighthouse. Сперва – метрики производительности. Напомним, что эти параметры измеряются в миллисекундах; чем больше число, тем хуже.

Speed Index – это время, за которое страница станет визуально наполненной.

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

Во-вторых, сделать плохой сайт можно где угодно, это не вина инструмента.
Нам же интересно посмотреть на общую культуру разработки – её как раз и показывает цветной прямоугольник для каждого фреймворка. Жирная черта внутри прямоугольника – медиана. Края “ящика” – это первый и третий квартили, а “усы” и точки – всё остальное.

Здесь Next и Gatsby оказались одинаково хороши, а вот остальным ещё есть, куда расти.

First Contentful Paint – это время, за которое отрисуется хоть какой-то контент на странице.

Получается, что Next, Gatsby и Nuxt стабильно показывают хорошие результаты. Wordpress имеет широкий разброс, хотя в среднем всё ещё плох. Хуже всех справился Webflow, что было ожидаемо: это конструктор.

Largest Contentful Paint – это время, за которое отрисуется самый крупный элемент на странице.

Естественно, у этой метрики более широкий разброс значений, а выбросы так и вовсе достигают десятков секунд. Но медиана неумолима – первенство в скорости снова у Next!

О тонкостях работы с Lighthouse

В наших тестах мы запускали Lighthouse со своей машины, из России. Но зная, что большинство сайтов с awwwards хостятся далеко за океаном, мы попробовали повторить тесты через PageSpeed Insights. Так и машина располагается поближе, и настройки выставляются так, как считают верным разработчики самого Lighthouse. Результаты в целом не противоречат нашим выводам:

Это были основные метрики производительности, из них складывается performance score – одна из четырех важнейших оценок в Lighthouse. Но есть ещё три. Они не связаны с производительностью. Вот их результаты:

В целом, разброс небольшой. Удивляет только Webflow - откуда такие серьёзные проблемы с использованием лучших практик?

A что это за оценки такие?

accessibility: доступность сайта для визуального восприятия и взаимодействий;

best practises: использование современных протоколов и API, а также другие практики, повышающие безопасность сайта;

seo: оптимизация сайта для индексации поисковыми движками.

Ошибки

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

В таблице указана доля сайтов, у которых нашлась эта ошибка.

Результаты Wordpress и Webflow были ожидаемы.

Оценки awwwards

Производительность напрямую не оценивается: всё-таки это площадка для дизайнеров. Но мы всё равно нашли кое-что интересное.
Жюри оценивают сайты по четырём критериям – о них мы ещё поговорим – и после выставления оценок сайты получают одну из трёх номинаций:

Nominee – сайт так и остался номинантом, ничего не получив.
Honorable Mention – сайт получил достойную оценку.
Site of the Day – из всех достойных сайтов выбран один, самый крутой за день.

Напомним, что в нашей выборке лежат работы последних лет с хорошими оценками – это как раз Honorable Mention и Site of the Day.

Оказалось, что у разных фреймворков разная степень успешности!

Рассмотрим повнимательнее:
В первой строке – доли среди сайтов с достойной оценкой.

Во второй строке – доли среди Сайтов дня.

Если нижняя ячейка зелёная, то фреймворк нарастил свою долю среди крутых сайтов. Если красная – то наоборот.

Доля Next и Nuxt среди Сайтов Дня значительно выросла относительно базового уровня. Доля Gatsby так и осталась небольшой – а вот Wordpress и Webflow просели в полтора раза.

Но на что конкретно смотрят жюри? Им важны четыре критерия, каждому присвоен разный вес:

Design: 40%
Usability: 30%
Creativity: 20%
Content: 10%

Оценки раскрыты только для Сайтов Дня, но давайте глянем и их тоже. Сперва немного саммари:

Стандартное отклонение очень маленькое, как и межквартильный размах, – борьба здесь идет за сотые доли балла. Различие в 0.1 балла вполне можно считать значимым.

Конечно, эти параметры почти не связаны с производительностью. Хотя мы ожидали, что более современные инструменты будут выигрывать и по дизайну. Но занятно, что в usability выигрывает Gatsby – именно он славится высоким performance.
А вот во всех вопросах дизайна любимчиком жюри стал Nuxt. Как думаете, почему? Нам непонятно.

Рождение новых студий

Интересно, а кто вообще присутствует на рынке? Когда эти студии появились? Чтобы это понять, мы посмотрели на косвенный признак: год регистрации домена. Вот что получилось:

Бум 2015 года, затем бум 2019 года – и вот, мы уже четвертый год стоим на плато. Студии, родившиеся в этом году, пока не публиковались так массово – но это скорее нормально.

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

Немного ретроспективы

В нашей выборке были сравнительно свежие сайты – и это полезно для изучения актуального рынка. Но нам было интересно посмотреть ещё и на историю. Awwwards оценивает сайты с 2009 года, и за это время более пяти с половиной тысяч работ стали Сайтами Дня. Но многие сайты перестают существовать со временем. Вот данные по годам:

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

Фреймворки по годам

Вот как менялись доли фреймворков среди победителей Awwwards:

Wordpress медленно сдает позиции, а Next, Nuxt и Webflow теперь делят 85% списка самых топовых работ года. Остальные фреймворки значительно менее популярны, их мы не учитывали в анализе.

Заключение

Мы не то чтобы хотим обидеть какие-то инструменты веб-разработки. На любом фреймворке можно сделать и очень плохой сайт, и очень хороший. Помните же картинки с метриками производительности? Там самые быстрые сайты шли почти наравне в каждом фреймворке.
А мы в evilUnion делаем проекты с высоким performance и классным дизайном!

Исследование: победители awwwards и их performance в Lighthouse