Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

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

Ouverte
#27,038 9 commentaires 21 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Évaluation

Difficulté
5/5
Temps estimé
Plus d'une semaine
Accessibilité débutants
25/100
Type d'issue
Fonctionnalité
Clarté
À clarifier
Activité
À l'abandon
Stack technique
angular, typescript
Domaine
cli, frontend, performance

Piste de recherche

Commencez par examiner les zones de @angular/core et @angular/cli impliquées dans la gestion des polices lors du build, et comparez le comportement proposé avec Next.js next/font. Définissez les identifiants de polices pris en charge, le flux de téléchargement et de self-hosting lors du build, ainsi que le comportement de preconnect, preload et size-adjust avant l’implémentation. La tâche est considérée comme terminée lorsque la fonctionnalité fonctionne pour Google Fonts et améliore les objectifs indiqués en matière de chargement et de décalage de mise en page.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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 )

Langage dominant
TypeScript
Étoiles
27k
Forks
11.8k
Merge moyen
17 h 25 min
PR mergées (30 j)
183

Guide de contribution

Ouvrir le guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de angular/angular-cli

Toutes les issues de angular/angular-cli

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.