В мае 2022 года команды Aurora и Angular объявили, что будут совместно работать над директивой по изображениям для Angular. Директива была недавно выпущена для предварительной версии для разработчиков как часть Angular v14.2. В этом посте рассказывается о том, как новая директива изображения NgOptimizedImage поддерживает оптимизацию изображений в Angular.
Фон
Изображения являются распространенным и важным компонентом взаимодействия с пользователем в Интернете: 99,9% веб-страниц генерируют запросы на одно или несколько изображений. Изображения также вносят наибольший вклад в вес страницы, составляя в среднем 982 килобайта на страницу.
Из-за растущего количества и размера изображения могут снижать производительность веб-страниц и влиять на показатели Core Web Vitals . Для 79,4% страниц рабочего стола изображение было самым большим элементом Contentful Paint ( LCP ) в 2021 году. Таким образом, стремление к оптимизации изображений стало постоянным стремлением для многих из нас.
Команда Aurora верит в возможность использования возможностей платформ для предоставления встроенных решений распространенных проблем разработчиков. Их первым шагом в области оптимизации изображений стал компонент изображений Next.js. Они считали этот компонент испытательным полигоном для проверки того, может ли улучшение опыта разработчиков (DX) при оптимизации изображений привести к повышению производительности большего количества приложений, использующих фреймворки.
Первый набор результатов от пользователя Next.js Leboncoin был обнадеживающим. Leboncoin продемонстрировал значительное улучшение LCP (с 2,4 до 1,7 с) после того, как они начали использовать next/image . Последующее принятие next/image в сообществе сыграло роль в увеличении количества источников Next.js, соответствующих пороговым значениям LCP. Вскоре появились запросы на аналогичные функции в других фреймворках, одним из которых является Angular .
В результате Aurora проконсультировалась с Angular и Nuxt для создания прототипов компонентов изображений для этих фреймворков. Компонент изображения Nuxt был выпущен в прошлом году. Теперь была выпущена директива изображения Angular ( NgOptimizedImage ), позволяющая перенести настройки оптимизации изображений по умолчанию в Angular.
Возможность
Angular — одна из ведущих платформ JavaScript, используемых сегодня разработчиками. Его используют более 50 тысяч источников, просканированных HTTPArchive на мобильных устройствах, и он может похвастаться почти 3 миллионами загрузок в неделю на NPM.