Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

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

Offen
#27,038 9 Kommentare 21 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
5/5
Geschätzter Aufwand
Über eine Woche
Anfängerfreundlichkeit
25/100
Issue-Typ
Feature
Klarheit
Muss geklärt werden
Aktivitätsstatus
Veraltet
Tech-Stack
angular, typescript
Bereich
cli, frontend, performance

Rechercherichtung

Beginne mit der Überprüfung der an der Build-Zeit-Font-Verarbeitung beteiligten Bereiche @angular/core und @angular/cli und vergleiche das vorgeschlagene Verhalten mit Next.js next/font. Definiere die unterstützten Font-Identifier, den Ablauf für den Download zur Build-Zeit und das Self-Hosting sowie das Verhalten von Preconnect, Preload und size-adjust, bevor du mit der Implementierung beginnst. Als erledigt gilt die Aufgabe, wenn das Feature für Google Fonts funktioniert und die genannten Ziele hinsichtlich Ladezeit und Layout-Shift verbessert.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

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 )

Vorherrschende Sprache
TypeScript
Sterne
27k
Forks
11.8k
Ø Merge
17 Std. 25 Min.
Gemergte PRs (30 T.)
183

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus angular/angular-cli

Alle Issues in angular/angular-cli

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.