Font Loading and Performance Improvements #614

jason-capsule42 · 2025-11-20T23:59:40Z

jason-capsule42
Nov 20, 2025
Maintainer

Introduction

Problem Statement

Areas for further discussion

Implementing font-display: swap|optional CSS rules
Typography classes for both load blocking and non-load blocking use
<link rel="preload">
Can we reduce the number of DNS hops necessary to load our fonts?
Self-hosting fonts vs. using third-party CDNs
preconnect for font Contentstack / Fastly links?
Using variable fonts to consolidate multiple font files
Font fallback using size-adjust, ascent-override, descent-override to reduce layout shift
Critical CSS: Can we insert WCSS content directly into the header (e.g. not a link to a CSS file) - this would break caching though
consolidate all theme CSS files into a single file
- Potentially less performant:
  - All or nothing
  - Can't take advantage of https2 multi-stream / no parallelization
  - Not great for cache (different themes, etc)
  - One change to CSS, entire file / cache needs to be busted / re-downloaded (not distributed)
  - Bigger file = longer parse times, especially on mobile / lower powered devices

Non font loading blockers?

Quantum Metrics?
appdynamics / adrum-latest
Make more effective use of tree-shaking / code splitting
GZIP JS
Third-party scripts - can any be deferred or async?
Evaluate all CSS being loaded on page (render-blocking)
Implement image lazy-loading
Add safeguards so 13MB image files can not be deployed to Prod

Things we ruled out

Reducing font file size

Tools

https://www.catchpoint.com/webpagetest

chrisfalaska · 2025-11-21T00:54:59Z

chrisfalaska
Nov 21, 2025
Maintainer

Configuration: Desktop
Browser: Chrome v136
Connectivity: WiFi (240/120 Mbps and 2ms RTT)
Columbus, Ohio, USA

https://www.catchpoint.com/webpagetest/results?publicurl=https%3A%2F%2Fpublic.catchpoint.com%2FUI%2FEntry%2FWPTITP%2FARH-D-D-B2AeUBjeKJDqCEAA-N

Profiling the page, I noticed an immediate 301 redirect that takes 256 ms
- Why isn't this done at the DNS / CDN level to serve the canonical www domain directly?
Once on www, the HTML takes over 1 second to load -- very long
- Inspecting it reveals the original size is 4MB uncompressed / 738 kb compressed

2 big blockers before any assets can begin downloading
- Nothing else can begin until this completes
Followed by 2 strange requests to URLs that don't exist, which forces a page-not-found request that takes over 1.3 seconds to load:

That page is 2MB uncompressed / 701 KB compressed

All of which brings us to just over 3 seconds before first contentful paint on 240 Mbps Wifi.

Render-blocking 3rd party JS:

Render-blocking resources flagged with x circles:

Optimizely script
adrum.js (90ms) - AppDynamics
adrum-latest.js (40ms) - AppDynamics

These are blocking because they're loaded synchronously in the <head>

Should defer / async third-party scripts
These files continuously execute (pink bars), even after downloaded:

adrum-latest fetches many files

Fonts

Fonts appear much later in the waterfall, after dom content has already loaded

Not a primary render blocking issue.

Cache

CSS is not being delivered with cache headers (Cache-Control or Expires)
- Browser will probably re-download every visit

Filesize

Fonts: 4 files, for a total of 144 kb
CSS in total is only 55 kb combined, but with 15 requests
JavaScript is over 8.5 MB compressed and over 42 MB uncompressed, with a total of 97 requests

Recommendation:

High Priority

Drastically reduce JavaScript bundle size (tree-shaking, code splitting, remove unused libraries)
Eliminate the redirect
Eliminate the 2 404 requests
Defer third-party scripts (AppDynamics, Optimizely)
Reduce HTML home page size / weight (4MB uncompressed / 738 kb compressed)
Lazy-load images
Add protection to ensure unoptimized images are never published to Prod (13 MB holiday photo)
Enable proper caching headers for CSS, SVG, etc
Revaluate 3rd party scripts and performance impacts

Low/Medium Priority

Add font-display: swap
Potentially preload critical fonts
Consolidate CSS requests strategically without creating a single monolithic / "all or nothing" file

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Alaska Airlines

Font Loading and Performance Improvements #614

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Select a reply

Uh oh!

Alaska Airlines

Font Loading and Performance Improvements #614

Uh oh!

Uh oh!

jason-capsule42 Nov 20, 2025 Maintainer

Introduction

Problem Statement

Areas for further discussion

Non font loading blockers?

Things we ruled out

Tools

Replies: 1 comment

Uh oh!

Uh oh!

chrisfalaska Nov 21, 2025 Maintainer

Render-blocking 3rd party JS:

Fonts

Cache

Filesize

Recommendation:

jason-capsule42
Nov 20, 2025
Maintainer

chrisfalaska
Nov 21, 2025
Maintainer