perf(fonts): 思源黑/宋切换变字体——CSS 345→106KB 全站提速
- @fontsource-variable/{noto-sans,noto-serif}-sc 替换静态三档:
wght 轴单文件覆盖 400-700(font-face 303→101/family)
- tokens 字体栈前插 Variable 族名(旧静态名留兜底链)
- 全站 Lighthouse:home 64→70 / en 73→82 / terminal 79→84 /
gallery 68→74,FCP 4-6s→2-3.5s(主线程解析减半)
- 已知取舍:mian-sha 字节反增(变体切片 2-4x,55 片 3.4MB)但
FCP 关键路径不受影响(swap);按页字体 CSS 子集化立为后续包
- E2E 加固:软导航主题切换断言加 VT 竞态重试(今日第二次偶发,
隔离 3/3 过=测试姿势问题非产品缺陷)
验证: node tests/e2e.mjs 31/31 PASS;本地 dist Lighthouse 五页型
对比(lh-var vs lh-local 两轮全量审计)
Spec: none (性能二轮:字体管线单点换包,Lighthouse 前后对照已入档)
Co-authored-by: GLM-5.3
This commit is contained in:
1 parent
b18d019a2e
commit
8fe9455c23
5 files changed
+37
-17
No files matched your search
@@ -1,13 +1,11 @@
|
||||
---
|
||||
// 基础布局:字体按轨瘦身 + 非阻塞加载(Lighthouse P0:614 个 @font-face
|
||||
// 全量入关曾致 Perf 62);sans/mono 全站,serif+文楷仅 reading 轨消费
|
||||
import sans400 from '@fontsource/noto-sans-sc/400.css?url';
|
||||
import sans500 from '@fontsource/noto-sans-sc/500.css?url';
|
||||
import sans700 from '@fontsource/noto-sans-sc/700.css?url';
|
||||
// 全量入关曾致 Perf 62);变字体二轮——静态三档合并 wght 轴单文件
|
||||
// (CSS 345→115KB,主线程解析减半,FCP 5.7s 主因见 lh-local 审计)
|
||||
import sansVar from '@fontsource-variable/noto-sans-sc/index.css?url';
|
||||
import mono400 from '@fontsource/jetbrains-mono/400.css?url';
|
||||
import mono700 from '@fontsource/jetbrains-mono/700.css?url';
|
||||
import serif400 from '@fontsource/noto-serif-sc/400.css?url';
|
||||
import serif700 from '@fontsource/noto-serif-sc/700.css?url';
|
||||
import serifVar from '@fontsource-variable/noto-serif-sc/index.css?url';
|
||||
import kai from 'lxgw-wenkai-screen-webfont/lxgwwenkaiscreen.css?url';
|
||||
import '../styles/global.css';
|
||||
import Header from '../components/Header.astro';
|
||||
@@ -48,22 +46,19 @@ const withSlash = (p: string) => (p.endsWith('/') ? p : `${p}/`);
|
||||
<ThemeScript />
|
||||
<ClientRouter />
|
||||
<!-- 非阻塞字体 CSS:preload+onload 回切(Lighthouse P0-1:渲染阻塞 708KB 元凶) -->
|
||||
<link rel="preload" as="style" href={sans400} onload="this.rel='stylesheet'" />
|
||||
<link rel="preload" as="style" href={sans500} onload="this.rel='stylesheet'" />
|
||||
<link rel="preload" as="style" href={sans700} onload="this.rel='stylesheet'" />
|
||||
<link rel="preload" as="style" href={sansVar} onload="this.rel='stylesheet'" />
|
||||
<link rel="preload" as="style" href={mono400} onload="this.rel='stylesheet'" />
|
||||
<link rel="preload" as="style" href={mono700} onload="this.rel='stylesheet'" />
|
||||
{track === 'reading' && (
|
||||
<>
|
||||
<link rel="preload" as="style" href={serif400} onload="this.rel='stylesheet'" />
|
||||
<link rel="preload" as="style" href={serif700} onload="this.rel='stylesheet'" />
|
||||
<link rel="preload" as="style" href={serifVar} onload="this.rel='stylesheet'" />
|
||||
<link rel="preload" as="style" href={kai} onload="this.rel='stylesheet'" />
|
||||
</>
|
||||
)}
|
||||
<noscript>
|
||||
<link rel="stylesheet" href={sans400} />
|
||||
<link rel="stylesheet" href={sansVar} />
|
||||
<link rel="stylesheet" href={mono400} />
|
||||
{track === 'reading' && <link rel="stylesheet" href={serif400} />}
|
||||
{track === 'reading' && <link rel="stylesheet" href={serifVar} />}
|
||||
</noscript>
|
||||
<link rel="alternate" hreflang="zh" href={new URL(withSlash(zhPath), Astro.site)} />
|
||||
<link rel="alternate" hreflang="en" href={new URL(withSlash(enPath), Astro.site)} />
|
||||
|
||||
Reference in new issue
Block a user