DATEV Nine-Nine | Boost Your Angular Performance with Image Optimization
By: Matthias Alt, Stephan Bierwirth & Gerrit Riesch
Intro
Chrome Aurora — a collaboration between Google Chrome developers, open-source tools and software like Next.js, Nuxt and Angular — has been doing some great work on making the web better. Performance has been a big focus for the team and recently we got the NgOptimizedImage directive from this collaboration and it has some really cool features that we want to show you!
What it does
NgOptimizedImage will do a lot of work for you that might get forgotten, when it has to be done manually.
In particular it can:
- Set the loading-attribute to lazy
- Handle an image as critical for LargestContentfulPaint (LCP)
- Use ContentDeliveryNetworks (CDN) for serving images
- Guide you with additional hints how to further optimize image loading
Warnings — HowTo optimize
When we use NgOptimizedImage directive there are certain console warnings, which helps us to optimize the time for LCP and therefore improve the overall performance of our application.
If we have imported the directive, we simply use an [ngSrc] attribute instead of the common [src] attribute for images. After this change Angular will set the loading-attribute of this img to lazy. This improvement alone is a big game changer when it comes to load times, because all the resources not visible at the start, won’t be loaded. Scrolling down will trigger the download of images, which are about to enter the visible area of the site.
For a few years now you don’t need any JavaScript to load your images the lazy way and most modern browsers support this at least for images. A complete overview of supporting Browsers can be found here
Now, when we start our application, the directive helps us to identify the image critical for the LCP-metric and advises us to prioritize loading this specific image by adding the priority attribute.
The priority property indicates the browser that this resource has top priority and should be scheduled for download as soon as possible. This will further improve the LCP-metric for our site.
But we still can do better than that. 🙂
To squeeze out the last milliseconds, we can again let us help by the directive itself. In the console of the browser, you will find a hint on how to tell Angular to establish the connection to our service, providing the images, during the bootstrap process of our app.
This will reduce the time we have to spend retrieving the actual image, because our app will already have established the connection to the server.
Another clever hint is when the aspect ratio provided does not match the aspect ratio of the image as you can see in following console output:
But we can go even further and load the smallest image size (of a provided set of sizes) that suits the current aspect ratio. Once you change the aspect ratio (e.g., by tilting your phone) to fit a larger image the bigger sized image gets loaded automatically. In our example we start with the 799 image and then load the 999 image after resizing the screen. Bonus: The 799 image download was canceled as soon as the 999 one was requested.
All this combined can boost the performance of an app significantly. And we all know how important performance of an app is nowadays. So don’t hesitate and use the help Angular provides with this directive out of the box with almost zero effort.
One more thing
ngOptimizedImage works very well with CDNs. While offering a few predefined Loaders like:
- provideCloudflareLoader
- provideCloudinaryLoader
- provideImageKitLoader
- provideImgixLoader
it is totally possible to implement your own Loader
We will show you how to do that with LoremPicsum in the following example, most of the stuff you see should be easily transferable to other services.
Final thoughts
Performance matters, therefore, we should use all the tools modern web frameworks and browsers offer us. Since most of the web uses images very intensively, they have a huge impact on overall performance. With the tips shown in this blog post you can leverage all the optimization which is baked into the NgOptimizedImage-directive with minimal effort. So don’t hesitate and just use it.
And if for some reason you cannot use this directive you should at least use the standard html-features also described above.
We hope you enjoyed our blog, and we would love to see you next time!
Your three DATEV Nine-Nine detectives,
