如何提升Blazor WebAssembly项目的Google Page Insights测评得分

以下优化方案均无需配置复杂的预渲染流程，仅需少量配置和代码调整即可落地：

构建环节优化（仅需修改项目配置，发布流程不变） #

• 启用程序集裁剪：在项目文件(.csproj)的PropertyGroup节点中添加<BlazorWebAssemblyEnableLinking>true</BlazorWebAssemblyEnableLinking>，发布时会自动移除未使用的IL代码，可将.NET运行时和业务程序集的总体积减小30%~50%。如果有依赖库被误裁剪，可额外配置裁剪排除规则即可。
• 开启静态资源预压缩：在项目文件的PropertyGroup节点中添加<BlazorEnableCompression>true</BlazorEnableCompression>，发布时会自动生成gzip和brotli格式的压缩版静态资源，之后在托管服务端配置优先返回压缩格式资源，可进一步将静态资源传输体积降低60%以上。
• 清理冗余资源：删除项目中未使用的CSS、JS、字体、图片等静态资源，若使用了Bootstrap等大型样式库，可仅保留首屏需要的样式，裁剪冗余代码。

加载逻辑优化 #

• 配置程序集延迟加载：将非首屏路由对应的业务程序集设置为延迟加载，仅当用户访问对应路由时才加载相关程序集，可直接降低首屏需要下载的资源体积，仅需在项目文件中配置延迟加载程序集列表，再在App.razor中配合LazyAssemblyLoader实现即可。
• 首屏非核心内容降级处理：首屏的复杂组件、大图片可先使用骨架屏、低分辨率占位图替代，等Wasm运行时初始化完成后再替换为真实内容，可大幅提升首屏内容绘制速度。
• 配置静态资源缓存策略：在托管服务端为dll、wasm、css、js等静态资源设置Cache-Control: public, max-age=2592000的响应头，开启浏览器长期缓存，二次访问时无需重复下载资源。

Page Insights专项评分优化 #

• 非关键JS添加defer属性后置加载：第三方统计、广告等不影响首屏渲染的JS脚本放到body底部，添加defer属性避免阻塞HTML解析，可提升首次内容绘制得分。
• 首屏图片优化：所有首屏图片添加明确的width、height属性避免布局偏移，非首屏图片添加loading="lazy"属性开启懒加载，可有效降低CLS（累积布局偏移）扣分。
• 内联首屏核心CSS：将首屏渲染需要的核心样式直接内联到HTML的head节点中，无需等待外部CSS文件加载完成即可渲染首屏内容，可大幅提升LCP（最大内容绘制）得分。

注：本地加载速度快是因为本地网络低延迟无带宽限制，Google Page Insights是模拟普通用户的网络环境测评，上述优化同时也能提升真实弱网用户的访问体验。

内容的提问来源于stack exchange，提问作者thedutchguy