Images that are invisible to the user on page load (for example, below-the-fold images or hidden carousel images) should ideally be lazy-loaded. The highlights of the design are as follows: Throwing errors or warnings to ensure conformance to best practices.Many of the standard image optimization problems have been addressed by either: The MVP of the Angular image directive builds on lessons from the image components Aurora has built to date while adapting the design to Angular’s client-side rendering experience. The Angular image directive was designed to help improve these numbers. Since images are the LCP element for more than 70% of the web pages on mobile and desktop, unoptimized LCP images could be one of the primary causes of poorer LCP on Angular websites. Only 18.74% of Angular sites had good LCP on mobile in June 2022. Looking at the Core Web Vitals scores, the percentage of Angular origins that meet "good" LCP thresholds still needs work. It is used by more than 50k of the origins crawled by HTTPArchive on mobile and boasts nearly 3 million weekly downloads on NPM. # OpportunityĪngular is one of the leading JavaScript frameworks used by developers today. Now the Angular image directive ( NgOptimizedImage) has been released to bring image optimization defaults to Angular. The Nuxt image component was released last year. Soon there were requests for similar features in other frameworks, one of them being Angular.Īs a result, Aurora consulted with Angular and Nuxt to prototype image components for these frameworks. The subsequent adoption of next/image in the community played a role in the increase of Next.js origins meeting LCP thresholds. Leboncoin saw a significant LCP improvement (from 2.4s to 1.7s) after they started using next/image. The first set of results from Next.js user Leboncoin was encouraging. They considered this component to be a testing ground for whether improving the developer experience (DX) of image optimization could lead to performance wins for more apps using frameworks. Their first foray into the image optimization space was the Next.js image component. The Aurora team believes in leveraging the power of frameworks to provide baked-in solutions to common developer challenges. The pursuit of optimized images has thus become a constant endeavor for many of us. For 79.4% of desktop pages, an image was the Largest Contentful Paint ( LCP) element in 2021. Images are also the most significant contributors to page weight, constituting a median of 982 kilobytes per page.ĭue to their growing number and size, images can hinder the performance of web pages and affect Core Web Vitals metrics. Images are a common and crucial component of web user experience, with 99.9% of web pages generating requests for one or more images. This post talks about how the new image directive, NgOptimizedImage, supports image optimization in Angular. The directive was recently released for developer preview as part of Angular v14.2. In May 2022, the Aurora and Angular teams announced that they would collaborate on an image directive for Angular.
0 Comments
Leave a Reply. |