Learn how to use the popular lazysizes JavaScript library to lazy load images to improve a page's Time to Interactive (TTI) and First Contentful Paint (FCP). The library is written in vanilla JS, but we can leverage the power of an Angular directive to wrap up the logic for efficiently unveiling lazy loaded images without page jank.

Resource hints are essential primitives for the efficient and performant rendering of web applications that rely on external resources.

The preconnect resource hint instructs the browser to establish a connection in preparation for fetching resources that will potentially block the rendering of a page. This benefit is even greater for fetching secure resources using HTTPS.