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

Abierto
#27,038 9 comentarios 21 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
5/5
Tiempo estimado
Más de una semana
Aptitud para principiantes
25/100
Tipo de issue
Nueva funcionalidad
Claridad
Necesita aclaración
Estado de actividad
Estancado
Stack tecnológico
angular, typescript
Área
cli, frontend, performance

Línea de trabajo

Empieza revisando las áreas de @angular/core y @angular/cli relacionadas con el manejo de fuentes durante la compilación, y compara el comportamiento propuesto con Next.js next/font. Define los identificadores de fuentes compatibles, el flujo de descarga y self-hosting durante la compilación, y el comportamiento de preconnect, preload y size-adjust antes de la implementación. Se considera terminado cuando la funcionalidad funciona para Google Fonts y mejora los objetivos indicados de carga y desplazamiento del diseño.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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 )

Lenguaje dominante
TypeScript
Estrellas
27k
Forks
11.8k
Merge medio
16 h 35 min
PR fusionados (30 d)
176

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de angular/angular-cli

Todos los issues de angular/angular-cli

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.