Skip to content

perf: drop the render-blocking Font Awesome stylesheet - #124

Merged
mmcky merged 2 commits into
mainfrom
perf/drop-font-awesome
Aug 20, 2026
Merged

perf: drop the render-blocking Font Awesome stylesheet#124
mmcky merged 2 commits into
mainfrom
perf/drop-font-awesome

Conversation

@DrDrij

@DrDrij DrDrij commented Aug 18, 2026

Copy link
Copy Markdown
Member

Font Awesome 4.7 was loaded from cdnjs on every page. It is render-blocking, and because it sits on a third origin the browser must complete a DNS lookup and TLS handshake before it can paint — measured at roughly 480ms to first byte on a cold connection.

Nothing uses it:

  • no fa-* classes anywhere in this theme's components
  • zero occurrences in the rendered HTML across all 27 pages of the lecture-python-programming preview build

The library has also been end-of-life since 2016.

The toolbar already uses lucide-react, which is bundled, so an icon set is available if one is ever needed again. A comment at the removal site records this.

Context

Found while tracing the load-time flash in the contents sidebar (#123). The critical path on that preview build carried six render-blocking stylesheets across three origins; this removes one origin entirely.

Note for merge order

This and the KaTeX self-hosting branch (#125) both delete adjacent entries from the same links() array, so whichever merges second will show a trivial conflict. The resolution is to keep both explanatory comments and drop both <link> entries.

Font Awesome 4.7 was loaded from cdnjs on every page. It is
render-blocking, and because it lives on a third origin the browser must
do a DNS lookup and TLS handshake before it can paint — measured at
~480ms to first byte on a cold connection.

Nothing uses it. There are no `fa-*` classes in this theme's components,
and a sweep of all 27 pages of the lecture-python-programming preview
build found zero occurrences in the rendered HTML. The library has also
been end-of-life since 2016.

The toolbar already uses lucide-react for its icons, which is bundled.
@github-actions

github-actions Bot commented Aug 18, 2026

Copy link
Copy Markdown
Contributor
PR Preview Action v1.8.1
Preview removed because the pull request was closed.
2026-08-20 03:00 UTC

@github-actions

github-actions Bot commented Aug 18, 2026

Copy link
Copy Markdown
Contributor

🎭 Visual regression results

passed  17 passed
skipped  3 skipped

Details

stats  20 tests across 1 suite
duration  38.1 seconds
commit  a19f057

Skipped tests

mobile-chrome › theme.spec.ts › QuantEcon theme — visual regression › launch-colab
mobile-chrome › theme.spec.ts › QuantEcon theme — visual regression › live-compute-toggle
mobile-chrome › theme.spec.ts › QuantEcon theme — visual regression › live-compute-toggle-absent-without-thebe

The point-in-time evidence (page counts, origin timing) lives in the PR
description; the comment keeps only what the next reader needs.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@mmcky

mmcky commented Aug 20, 2026

Copy link
Copy Markdown
Contributor

Verified locally before merge: zero fa-* references in the theme's source and styles, thebe-core.css has no Font Awesome dependency, and the deleted link dates from the initial commit — inherited myst-theme book-theme boilerplate rather than a deliberate addition. I trimmed the code comment at the removal site to the durable constraint; the measurement evidence stays here in the PR description.

One caveat for the record, since a static-HTML grep can't cover it: client-side-rendered ipywidgets emit fa fa-* icon elements at runtime — Button(icon=…), the Play widget, and the ipympl figure toolbar — which is almost certainly why this stylesheet sat next to mpl_widget.css upstream. Nothing in this repo or the lectures uses those today, and the failure mode would be cosmetic (blank glyphs). If live compute ever adopts icon-bearing widgets, the right move is to load Font Awesome lazily on thebe activation, not to restore it to the render-blocking critical path.

@mmcky
mmcky merged commit 7b0c25b into main Aug 20, 2026
4 checks passed
@mmcky
mmcky deleted the perf/drop-font-awesome branch August 20, 2026 03:00
mmcky added a commit that referenced this pull request Aug 20, 2026
Resolves the predicted adjacent-lines conflict with the Font Awesome
removal (#124) in the links() array: both explanatory comments are kept,
both third-party CDN <link> entries are dropped.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
mmcky added a commit that referenced this pull request Aug 20, 2026
…#132)

release.yml builds a release's notes from that version's changelog
section, so entries in the wrong place are silently dropped from the
next release:

- The git-history entry (#83, merged 2026-08-19) sat inside the
  already-tagged [2.2.0] (2026-07-16) section. Moved to [Unreleased]
  and given its missing PR link.
- The two CDN-removal changes had no entries at all. Added under
  Changed (#125, self-hosted KaTeX + vendored jupyter-matplotlib) and
  Removed (#124, Font Awesome).

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants