Built-In Font Optimization: Improve Angular Performance & Core Web Vitals

[surajchopra1234]

Which @angular/* package(s) are relevant/related to the feature request?

@angular/core and @angular/cli

Problems :

• Using custom fonts from Google Fonts can significantly impact FCP, LCP and initial load performance in Angular applications.

• Downloading fonts from Google servers adds extra HTTP requests and latency, slowing down initial paint times.

• The font swapping has the potential to cause layout shifts and so impact Cumulative Layout Shift (CLS).

Proposed Solution :

• Introduce a built-in mechanism in Angular to automatically downloads fonts specified by their Google Fonts names (or similar identifiers) during the build process and self-host fonts within the application, eliminating the need for external font services like Google Fonts.

• Utilize preconnect, preload, and size-adjust for optimal performance and seamless font rendering.

Benefits :

• Improved Performance: Reduces reliance on external requests, minimizes layout shifts (thanks to the underlying CSS size-adjust) , and enables efficient caching.

• Improved FCP and LCP: Optimized fonts and proactive loading strategies contribute to significantly faster loading times and smoother user experiences.

• Enhanced SEO: Better Core Web Vitals can lead to higher search engine ranking and increased website traffic.

• Enhanced Security: Minimizes exposure to external vulnerabilities and provides more control over font sources.

• Developer Experience: Built-in font optimization in Angular improves developer experience.

Alternatives considered

Anyone interested is welcome to comment on what the proposed syntax and feature set will be.

Inspired by next.js automatic font self-hosting library ( next/font )

[alan-agius4]

Hi @surajchopra1234,

Thanks for this feature requests and there are definitely some interesting points.

Font Subsetting and Optimization
Google Fonts already offers a feature allowing users to specify the characters a font should include. Check it out here: https://developers.google.com/fonts/docs/css2

However, configuring the characters for the application automatically won't be straightforward. Choosing the characters for the app is a non-trivial task, and I anticipate it might significantly extend the build time. While the approach is intriguing, the overall benefit is likely to be minimal. Hence, this is not in scope of the Angular CLI.

Font Preloading and Swapping
Google Fonts offers convenient built-in display settings features that you can easily access. To delve deeper into these features, visit https://developers.google.com/fonts/docs/css2. Regarding the preload tag, although it may expedite font loading in some cases, it does come with potential drawbacks. For more insights, check out https://web.dev/articles/font-best-practices#be_cautious_when_using_preload_to_load_fonts.

Out of curiosity which Angular version are you using and are you using the font-inling feature?

[surajchopra1234]

I updated this feature request.

[CarlosTorrecillas]

Adding my two cents here in case you find of any use, having the pre connect and all the other attributes with the web download of the font didn’t impact much my Web Vitals because to me the key thing was the actual font swap.

There is a website that suggests a fallback font while the actual font is being downloaded. It does the suggestion in a way that makes the other fit perfectly and the swap happens really smooth so that the CLS is unaffected.

Having the font included in the bundle could be a good thing though!

[surajchopra1234]

Hi @CarlosTorrecillas @alan-agius4

The practice of font swapping has the potential to cause layout shifts and so impact Cumulative Layout Shift (CLS). These layout shifts occur when a web font and its fallback font take up different amounts of space on the page.

The @font-face size-adjust CSS feature is an exciting way to customize the text bounding box of your web layouts to improve the font swapping experience thus avoiding layout shift for your users.
https://web.dev/articles/css-size-adjust

Using self-host fonts works great with size-adjust css property in @font-face.

[alan-agius4]

I had a chat with the Google Chrome Aurora team, and they highly recommend implementing a built-in system in the Angular CLI to handle size-adjustment. They've collaborated with the Nuxt team to develop a Vite plugin that automatically calculates CSS adjustments for size, which you can find here: https://github.com/unjs/fontaine. Additionally, this functionality is available through CSS generation: https://github.com/seek-oss/capsize. I opened a feature request for this #27066.

However, they did caution about the potential pitfalls of adding preloading, mentioning concerns about Unicode selection issues and resource contention. They suggested being cautious as it can be a double-edged sword, but they did endorse preconnecting as a beneficial practice which we are already doing.

Regarding self-hosting, I'm still gathering further details and concerns.

[alan-agius4]

Additional conversations with the Google Chrome Aurora team highlighted that self-hosting of fonts can be beneficial. Hosting Google Fonts internally would eliminate the delay linked with third-party connections while maintaining necessary precautions like glyphs have been subsetted.

When it comes to preloading, it's vital to proceed with caution due to its susceptibility to misuse. However, leveraging Angular CLI could offer avenues for implementing advantageous approaches. For instance, error messages could notify users if preloaded font sizes exceed a designated threshold or if preloaded fonts go unused. Additionally, users could be prompted to preload specific character subsets to boost performance. Nevertheless, this would necessitate additional discussions and design considerations as it might significantly impact build times.