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

Aperta
#27,038 9 commenti 21 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
5/5
Tempo stimato
Più di una settimana
Idoneità per principianti
25/100
Tipo di issue
Funzionalità
Chiarezza
Da chiarire
Stato di attività
Ferma
Stack tecnologico
angular, typescript
Ambito
cli, frontend, performance

Direzione di ricerca

Inizia esaminando le aree di @angular/core e @angular/cli coinvolte nella gestione dei font durante la build e confronta il comportamento proposto con Next.js next/font. Definisci gli identificatori dei font supportati, il flusso di download e self-hosting durante la build e il comportamento di preconnect, preload e size-adjust prima dell’implementazione. Il lavoro è considerato completato quando la funzionalità funziona per Google Fonts e migliora gli obiettivi dichiarati relativi al caricamento e al layout shift.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

angular/build:application area: @angular/build feature feature: insufficient votes
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 )

Lingua principale
TypeScript
Stelle
27k
Fork
11.8k
Merge medio
16h 35m
PR unite (30g)
176

Guida per i contributori

Apri la guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di angular/angular-cli

Tutte le issue di angular/angular-cli

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.