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

Bắt đầu bằng cách xem xét các khu vực của @angular/core và @angular/cli liên quan đến việc xử lý font trong thời gian build, đồng thời so sánh hành vi được đề xuất với Next.js next/font. Xác định các định danh font được hỗ trợ, quy trình tải xuống và self-hosting trong thời gian build, cũng như hành vi của preconnect, preload và size-adjust trước khi triển khai. Được xem là hoàn tất khi tính năng hoạt động với Google Fonts và cải thiện các mục tiêu đã nêu về thời gian tải và layout shift.

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 )