Skip to content

Commit 230109c

Browse files
calderbuildclaude
calderbuild
and
claude
committed
perf: fix Google Fonts blocking render (1.1MB -> async)
- Remove blocking @import of Google Fonts from CSS (was 1.1MB) - Switch to system font stacks as primary fonts for instant render - Add async loading for optional Playfair Display after page load - Add preconnect for fonts.gstatic.com in head.html - Keep system fonts as fallback for fast initial paint Expected PageSpeed improvement: - FCP: 4.8s -> ~1.5s (eliminate render-blocking fonts) - LCP: 5.8s -> ~2.5s (faster initial content paint) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
1 parent ee4af96 commit 230109c

File tree

5 files changed

+23
-130
lines changed

5 files changed

+23
-130
lines changed

‎_includes/footer.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,12 @@
6969
loadScript('{{ "/js/bootstrap.min.js" | prepend: site.baseurl }}');
7070
loadScript('{{ "/js/jason-blog.min.js" | prepend: site.baseurl }}');
7171

72+
// Optional: Load Playfair Display for editorial headings (async, non-blocking)
73+
var fontLink = document.createElement('link');
74+
fontLink.rel = 'stylesheet';
75+
fontLink.href = 'https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&display=swap';
76+
document.head.appendChild(fontLink);
77+
7278
// Optional AdSense (disabled by default via site.ads_enabled)
7379
{% if site.ads_enabled and jekyll.environment == 'production' %}
7480
setTimeout(function() {

‎_includes/head.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323

2424
<!-- Performance Optimization - Preconnect to critical third-party origins -->
2525
<link rel="preconnect" href="https://fonts.googleapis.com">
26+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
2627
<link rel="preconnect" href="https://www.googletagmanager.com">
2728
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
2829
<link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>

‎css/jason-blog.css‎

Lines changed: 11 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -2313,7 +2313,7 @@ pre.highlight {
23132313
}
23142314
.post-list__item .post-subtitle,
23152315
.post-list__item .post-entry {
2316-
font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
2316+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
23172317
font-size: 1.125rem;
23182318
color: var(--ed-slate);
23192319
line-height: 1.7;
@@ -2330,7 +2330,7 @@ pre.highlight {
23302330
flex-wrap: wrap;
23312331
align-items: center;
23322332
gap: 16px;
2333-
font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
2333+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
23342334
font-size: 0.8rem;
23352335
color: var(--ed-stone);
23362336
}
@@ -5337,118 +5337,6 @@ footer {
53375337
display: none !important;
53385338
}
53395339
}
5340-
@font-face {
5341-
font-family: 'JetBrains Mono';
5342-
font-style: normal;
5343-
font-weight: 400;
5344-
font-display: swap;
5345-
src: url(https://fonts.gstatic.com/s/jetbrainsmono/v24/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxjPQ.ttf) format('truetype');
5346-
}
5347-
@font-face {
5348-
font-family: 'JetBrains Mono';
5349-
font-style: normal;
5350-
font-weight: 500;
5351-
font-display: swap;
5352-
src: url(https://fonts.gstatic.com/s/jetbrainsmono/v24/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8-qxjPQ.ttf) format('truetype');
5353-
}
5354-
@font-face {
5355-
font-family: 'JetBrains Mono';
5356-
font-style: normal;
5357-
font-weight: 600;
5358-
font-display: swap;
5359-
src: url(https://fonts.gstatic.com/s/jetbrainsmono/v24/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8FqtjPQ.ttf) format('truetype');
5360-
}
5361-
@font-face {
5362-
font-family: 'Playfair Display';
5363-
font-style: italic;
5364-
font-weight: 400;
5365-
font-display: swap;
5366-
src: url(https://fonts.gstatic.com/s/playfairdisplay/v40/nuFRD-vYSZviVYUb_rj3ij__anPXDTnCjmHKM4nYO7KN_qiTbtY.ttf) format('truetype');
5367-
}
5368-
@font-face {
5369-
font-family: 'Playfair Display';
5370-
font-style: italic;
5371-
font-weight: 500;
5372-
font-display: swap;
5373-
src: url(https://fonts.gstatic.com/s/playfairdisplay/v40/nuFRD-vYSZviVYUb_rj3ij__anPXDTnCjmHKM4nYO7KN_pqTbtY.ttf) format('truetype');
5374-
}
5375-
@font-face {
5376-
font-family: 'Playfair Display';
5377-
font-style: normal;
5378-
font-weight: 400;
5379-
font-display: swap;
5380-
src: url(https://fonts.gstatic.com/s/playfairdisplay/v40/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKdFvUDQ.ttf) format('truetype');
5381-
}
5382-
@font-face {
5383-
font-family: 'Playfair Display';
5384-
font-style: normal;
5385-
font-weight: 500;
5386-
font-display: swap;
5387-
src: url(https://fonts.gstatic.com/s/playfairdisplay/v40/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKd3vUDQ.ttf) format('truetype');
5388-
}
5389-
@font-face {
5390-
font-family: 'Playfair Display';
5391-
font-style: normal;
5392-
font-weight: 600;
5393-
font-display: swap;
5394-
src: url(https://fonts.gstatic.com/s/playfairdisplay/v40/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKebukDQ.ttf) format('truetype');
5395-
}
5396-
@font-face {
5397-
font-family: 'Playfair Display';
5398-
font-style: normal;
5399-
font-weight: 700;
5400-
font-display: swap;
5401-
src: url(https://fonts.gstatic.com/s/playfairdisplay/v40/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKeiukDQ.ttf) format('truetype');
5402-
}
5403-
@font-face {
5404-
font-family: 'Playfair Display';
5405-
font-style: normal;
5406-
font-weight: 800;
5407-
font-display: swap;
5408-
src: url(https://fonts.gstatic.com/s/playfairdisplay/v40/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKfFukDQ.ttf) format('truetype');
5409-
}
5410-
@font-face {
5411-
font-family: 'Source Sans 3';
5412-
font-style: italic;
5413-
font-weight: 400;
5414-
font-display: swap;
5415-
src: url(https://fonts.gstatic.com/s/sourcesans3/v19/nwpDtKy2OAdR1K-IwhWudF-R3woAa8opPOrG97lwqLlO9C4.ttf) format('truetype');
5416-
}
5417-
@font-face {
5418-
font-family: 'Source Sans 3';
5419-
font-style: normal;
5420-
font-weight: 300;
5421-
font-display: swap;
5422-
src: url(https://fonts.gstatic.com/s/sourcesans3/v19/nwpBtKy2OAdR1K-IwhWudF-R9QMylBJAV3Bo8Kzm61EN.ttf) format('truetype');
5423-
}
5424-
@font-face {
5425-
font-family: 'Source Sans 3';
5426-
font-style: normal;
5427-
font-weight: 400;
5428-
font-display: swap;
5429-
src: url(https://fonts.gstatic.com/s/sourcesans3/v19/nwpBtKy2OAdR1K-IwhWudF-R9QMylBJAV3Bo8Ky461EN.ttf) format('truetype');
5430-
}
5431-
@font-face {
5432-
font-family: 'Source Sans 3';
5433-
font-style: normal;
5434-
font-weight: 500;
5435-
font-display: swap;
5436-
src: url(https://fonts.gstatic.com/s/sourcesans3/v19/nwpBtKy2OAdR1K-IwhWudF-R9QMylBJAV3Bo8KyK61EN.ttf) format('truetype');
5437-
}
5438-
@font-face {
5439-
font-family: 'Source Sans 3';
5440-
font-style: normal;
5441-
font-weight: 600;
5442-
font-display: swap;
5443-
src: url(https://fonts.gstatic.com/s/sourcesans3/v19/nwpBtKy2OAdR1K-IwhWudF-R9QMylBJAV3Bo8Kxm7FEN.ttf) format('truetype');
5444-
}
5445-
@font-face {
5446-
font-family: 'Source Sans 3';
5447-
font-style: normal;
5448-
font-weight: 700;
5449-
font-display: swap;
5450-
src: url(https://fonts.gstatic.com/s/sourcesans3/v19/nwpBtKy2OAdR1K-IwhWudF-R9QMylBJAV3Bo8Kxf7FEN.ttf) format('truetype');
5451-
}
54525340
:root {
54535341
--ed-ink: #1a1a2e;
54545342
--ed-charcoal: #2d2d44;
@@ -5476,7 +5364,7 @@ footer {
54765364
--ed-shadow-glow: 0 0 40px rgba(37, 99, 235, 0.15);
54775365
}
54785366
body {
5479-
font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
5367+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
54805368
font-size: 16px;
54815369
line-height: 1.7;
54825370
color: var(--ed-ink);
@@ -5582,7 +5470,7 @@ h6,
55825470
.intro-header .site-heading h2,
55835471
.intro-header .post-heading h2,
55845472
.intro-header .page-heading h2 {
5585-
font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
5473+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
55865474
font-size: 1.25rem;
55875475
font-weight: 400;
55885476
color: rgba(255, 255, 255, 0.8);
@@ -5681,7 +5569,7 @@ h6,
56815569
}
56825570
.post-preview .post-subtitle,
56835571
.post-preview .post-entry {
5684-
font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
5572+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
56855573
font-size: 1.125rem;
56865574
color: var(--ed-slate);
56875575
line-height: 1.7;
@@ -5698,7 +5586,7 @@ h6,
56985586
flex-wrap: wrap;
56995587
align-items: center;
57005588
gap: 16px;
5701-
font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
5589+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
57025590
font-size: 0.8rem;
57035591
color: var(--ed-stone);
57045592
}
@@ -5879,7 +5767,7 @@ h6,
58795767
padding: 10px 20px;
58805768
background: var(--ed-ivory);
58815769
color: var(--ed-slate);
5882-
font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
5770+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
58835771
font-size: 0.8rem;
58845772
font-weight: 500;
58855773
border-radius: 100px;
@@ -6062,7 +5950,7 @@ h6,
60625950
font-weight: 700;
60635951
}
60645952
.post-container p {
6065-
font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
5953+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
60665954
font-size: 18px;
60675955
line-height: 1.8;
60685956
color: var(--ed-ink);
@@ -6135,15 +6023,15 @@ h6,
61356023
box-shadow: var(--ed-shadow-lg);
61366024
}
61376025
.post-container pre code {
6138-
font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', Consolas, monospace;
6026+
font-family: 'SFMono-Regular', 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
61396027
font-size: 14px;
61406028
line-height: 1.6;
61416029
color: #e0e0e0;
61426030
background: transparent;
61436031
padding: 0;
61446032
}
61456033
.post-container code {
6146-
font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', Consolas, monospace;
6034+
font-family: 'SFMono-Regular', 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
61476035
font-size: 0.9em;
61486036
padding: 2px 8px;
61496037
background: rgba(37, 99, 235, 0.1);
@@ -6261,7 +6149,7 @@ h6,
62616149
color: var(--ed-sapphire);
62626150
}
62636151
.navbar-custom .nav > li > a {
6264-
font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
6152+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
62656153
font-size: 0.8rem;
62666154
font-weight: 500;
62676155
color: var(--ed-slate);

‎css/jason-blog.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎less/editorial-design.less‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,11 @@
99
// Distinctive font pairing for editorial feel
1010
// ============================================
1111

12-
// Import distinctive fonts
13-
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=Source+Sans+3:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500;600&display=swap');
14-
15-
// Font stacks
12+
// Font stacks - using system fonts for performance (no Google Fonts import)
13+
// Playfair Display loaded async via footer.html for optional enhancement
1614
@font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
17-
@font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
18-
@font-mono: 'JetBrains Mono', 'Fira Code', 'Monaco', Consolas, monospace;
15+
@font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
16+
@font-mono: 'SFMono-Regular', 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
1917

2018
// Typography scale (modular - 1.25 ratio)
2119
@type-scale-xs: 0.64rem; // 10.24px

0 commit comments

Comments
 (0)