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

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

Рамки

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

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

Что ж, доминирование WordPress привело нас и сюда.

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

Естественно, нам захотелось посмотреть отзывы на сайте Lighthouse. Во-первых, показатели производительности. Помните, что эти параметры измеряются в миллисекундах; чем выше число, тем хуже.

Индекс скорости – Это время, когда страница становится визуально наполненной.

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

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

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

Первый насыщенный контентом цвет – Это время, необходимое для отрисовки на странице хотя бы некоторого контента.

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

Самый большой контент, насыщенный цвет – Это время, необходимое для отрисовки самого большого элемента на странице.

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

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

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

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

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

Что это за отчеты?

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

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

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

Ошибка

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

В таблице показан процент веб-сайтов, обнаруживших эту ошибку.

Результаты WordPress и Webflow оказались ожидаемыми.

awwwards обзоры

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

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

Хотим напомнить, что в нашей подборке есть работы последних лет с хорошими отзывами – это именно то, что нужно. Почетное упоминание И Сайт дня.

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

Давайте посмотрим поближе:
В первой строке показаны доли между сайтами с хорошим рейтингом.

Вторая строка показывает доли между сайтами за день.

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

Доли Next и Nuxt в «Сайтах дня» существенно выросли по сравнению с первоначальным значением. Доля Gatsby осталась небольшой, а вот WordPress и Webflow упали в полтора раза.

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

дизайн: 40%
Простота использования: 30%
креативность: 20%
Содержание: 10%

Обзоры показаны только для сайтов дня, но давайте взглянем и на них. Сначала небольшое резюме:

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

Разумеется, эти параметры не имеют почти никакого отношения к производительности. Хотя мы ожидали, что более современные инструменты также выиграют от такого дизайна. Но интересно, что Gatsby выигрывает по удобству использования — он славится высокой производительностью.
Но по всем вопросам дизайна фаворитом жюри стал Nuxt. Как вы думаете, почему? Мы этого не понимаем.

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

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

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

Вообще на Awwwards тоже очень интересно посмотреть через призму авторов – а не произведений. Мы углубимся в эту тему в следующих статьях.

Небольшой обзор

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

Мы больше не знаем, что использовали отключенные веб-сайты. Но мы точно знаем, что некоторые авторы обновляют сайты — так что не удивляйтесь присутствию Next на сайтах, опубликованных в 2011 году.

кадр в год

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

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

Диплом

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