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

Open
#27,038 9 comments 21 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
5/5
Estimated time
Over a week
Newbie friendliness
25/100
Issue type
Feature
Clarity
Needs clarification
Activity status
Stale
Tech stack
angular, typescript
Domain
cli, frontend, performance

Research direction

Start by reviewing the @angular/core and @angular/cli areas involved in build-time font handling, and compare the proposed behavior with Next.js next/font. Define the supported font identifiers, build-time download and self-hosting flow, and the preconnect, preload, and size-adjust behavior before implementation. Done means the feature works for Google Fonts and improves the stated loading and layout-shift goals.

Written by the indexing model from the issue text.

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 )

Dominant language
TypeScript
Stars
27k
Forks
11.8k
Avg merge
16h 35m
Merged PRs (30d)
176

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from angular/angular-cli

All issues in angular/angular-cli

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.