search

angular / angular-cli

CLI tool for Angular
https://cli.angular.dev
MIT License
26.78k stars 11.98k forks source link

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

Open surajchopra1234 opened 9 months ago

surajchopra1234 commented 9 months ago

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

@angular/core and @angular/cli

Problems :

Proposed Solution :

Benefits :

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 commented 9 months ago

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 commented 9 months ago

I updated this feature request.

CarlosTorrecillas commented 9 months ago

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 commented 9 months ago

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 commented 9 months ago

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 https://github.com/angular/angular-cli/issues/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 commented 9 months ago

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.

angular-robot[bot] commented 9 months ago

This feature request is now candidate for our backlog! In the next phase, the community has 60 days to upvote. If the request receives more than 20 upvotes, we'll move it to our consideration list.

You can find more details about the feature request process in our documentation.

angular-robot[bot] commented 7 months ago

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

angular-robot[bot] commented 7 months ago

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.