angular / angular/angular-cli

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

未关闭
#27,038 9 条评论 21 个 reaction 已指派 0 人 在 GitHub 查看
angular/build:application area: @angular/build feature feature: insufficient votes
主要语言
TypeScript
星标
27k
派生
11.8k
平均合并
14 小时 23 分钟
30 天内合并 PR
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
预计耗时
一周以上
活跃度
停滞
描述清晰度
需要澄清
新手友好度
25/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。