Исследование: победители awwwards и их performance в Lighthouse
Введение
Все дизайнеры обожают сайт 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 и классным дизайном!
