angular / angular/angular-cli

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

オープン
#27,038 コメント 9 件 リアクション 21 件 担当者 0 名 GitHub で見る
angular/build:application area: @angular/build feature feature: insufficient votes
主要言語
TypeScript
スター
27k
フォーク
11.8k
平均マージ
14時間 23分
マージ済み PR(30日)
162

説明

### 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](https://nextjs.org/docs/app/api-reference/components/font) )

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

まず、ビルド時のフォント処理に関係する @angular/core と @angular/cli の領域を確認し、提案されている動作を Next.js next/font と比較してください。実装前に、サポートするフォント識別子、ビルド時のダウンロードとセルフホスティングのフロー、および preconnect、preload、size-adjust の動作を定義してください。Google Fonts で機能が動作し、提示された読み込みとレイアウトシフトの目標が改善されれば完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
angular, typescript
領域
cli, frontend, performance
issue の種類
機能追加
難易度
5/5
見積もり時間
1週間以上
活発さ
停滞
明瞭さ
説明が足りない
初心者へのやさしさ
25/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。