squid/blog
squid/blog
1
2
Fork 0
Code Issues 10 Pull Requests Actions Projects 1 Releases 7 Wiki Activity

BLOG-92 Fix improve google font loading efficiency (#111)
All checks were successful
Frontend CI / build (push) Successful in 1m10s
Details

Browse Source 
### Description

Reference: https://web.dev/learn/performance/understanding-the-critical-path?utm_source=lighthouse&utm_medium=lr&hl=zh-tw#render-blocking_resources/

### Package Changes

_No response_

### Screenshots

_No response_

### Reference

Resolves #92

### Checklist

- [x] A milestone is set
- [x] The related issuse has been linked to this branch

Reviewed-on: #111
Co-authored-by: SquidSpirit <squid@squidspirit.com>
Co-committed-by: SquidSpirit <squid@squidspirit.com>
This commit is contained in:
SquidSpirit 2025-08-02 15:26:49 +08:00 committed by squid
parent b953d0bf0d
commit 18f29655bf
2 changed files with 16 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/app.html
View File

@ -17,10 +17,19 @@
<meta name="description" content="程式、科技、教學、分享" /> <meta name="description" content="程式、科技、教學、分享" />
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
id="google-fonts"
href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono&family=Noto+Sans+TC:wght@100..900&display=swap"
rel="stylesheet"
media="print"
/>
<noscript>
<link <link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono&family=Noto+Sans+TC:wght@100..900&display=swap" href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono&family=Noto+Sans+TC:wght@100..900&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
</noscript>
<script src="%sveltekit.assets%/js/font-loader.js" defer></script>
%sveltekit.head% %sveltekit.head%
</head> </head>
<body data-sveltekit-preload-data="hover" class="antialiased"> <body data-sveltekit-preload-data="hover" class="antialiased">

7
frontend/static/js/font-loader.js Normal file
View File

@ -0,0 +1,7 @@
// Defer loading of fonts to improve performance
window.addEventListener('load', function() {
const fontLink = document.getElementById('google-fonts');
if (fontLink) {
fontLink.media = 'all';
}
});