W maju 2022 r. zespoły Aurora i Angular ogłosiły, że będą współpracować nad dyrektywą dotyczącą obrazów w Angular. Ta dyrektywa została niedawno udostępniona w ramach wersji w poziomie podglądu dla deweloperów w ramach Angulara w wersji 14.2. W tym poście opisujemy, jak nowa dyrektywa image, NgOptimizedImage, obsługuje optymalizację obrazów w Angular.
Tło
Zdjęcia są częstym i kluczowym elementem wygody użytkowników internetu.99, 9% stron internetowych generuje żądania dotyczące co najmniej jednego zdjęcia. Obrazy są też największym czynnikiem wpływającym na wagę strony, stanowiąc średnio 982 kilobajty na stronę.
Ze względu na rosnącą liczbę i rozmiar obrazów mogą one pogarszać wydajność stron internetowych i wpływać na dane podstawowych wskaźników internetowych. W 2021 r.79,4% stron na komputery stanowiły strony, których elementem o największym czasie wyrenderowania (LCP) był obraz. Dążenie do optymalizacji obrazów stało się więc dla wielu z nas stałym zajęciem.
Zespół Aurora wierzy w potencjał frameworków, które umożliwiają tworzenie wbudowanych rozwiązań dla typowych problemów programistów. Pierwszym krokiem w zakresie optymalizacji obrazów było użycie komponentu obrazu Next.js. Uznali, że ten komponent może posłużyć jako pole do testów, które pozwoli sprawdzić, czy ulepszenie optymalizacji obrazów z perspektywy dewelopera może przynieść lepsze wyniki w przypadku większej liczby aplikacji korzystających z ram.
Pierwszy zestaw wyników uzyskany przez użytkownika Next.js Leboncoin był zachęcający. Po włączeniu next/image firma Leboncoin odnotowała znaczną poprawę LCP (z 2,4 s na 1,7 s). Kolejne przyjęcie next/image w społeczności przyczyniło się do zwiększenia liczby źródeł Next.js, które spełniają wartości progowe LCP. Wkrótce pojawiły się prośby o dodanie podobnych funkcji w innych ramach, m.in. w Angular.
W związku z tym Aurora skonsultowała się z zespołem Angular i Nuxt, aby stworzyć prototypy komponentów obrazów dla tych frameworków. W zeszłym roku został wydany komponent obrazu Nuxt. Wprowadziliśmy dyrektywę obrazów w Angular (NgOptimizedImage), aby domyślnie optymalizować obrazy w ramach Angular.
Możliwość
Angular to jedna z najpopularniejszych platform JavaScriptu używana obecnie przez programistów. Jest on używany przez ponad 50 tys. źródeł zindeksowanych przez HTTPArchive na urządzeniach mobilnych i ma prawie 3 miliony pobrań tygodniowo w NPM.