寻求编码专家优化mozartorchestra.org首页加载速度

先定位瓶颈再改代码，不要盲目调整：

前置诊断步骤 #

• 打开Chrome开发者工具的Lighthouse面板，分别跑移动端、桌面端性能检测，会直接输出阻塞渲染资源、未压缩资源、超大体积素材的明细清单，针对性调整即可
• 切到Network面板，勾选禁用缓存，模拟Fast 3G网络看加载瀑布流，先确认瓶颈是服务器响应慢、首屏资源体积过大、还是第三方脚本阻塞
• 如果首字节响应时间（TTFB）超过2s，先排查服务端托管配置，前端优化解决不了服务端响应慢的问题

可直接落地的优化操作 #

资源加载优化 #

• 所有非首屏必须的JS/CSS全部加defer属性，尤其是第三方统计、社交组件、广告类脚本，绝对不要放在head标签里阻塞页面渲染，示例写法：

<!-- 阻塞渲染的写法，替换为下方延迟加载写法 -->
<!-- <script src="third-party-analytics.js"></script> -->
<script defer src="third-party-analytics.js"></script>

• 清理冗余资源：如果是CMS（比如WordPress）搭建的站点，大部分插件会全局加载自身的JS/CSS，用资源管理插件把首页用不到的插件资源全部禁用，通常能砍掉一半以上的无效加载
• 图片全量优化：所有图片转WebP/AVIF格式，首屏横幅图压缩到200KB以内，非首屏的乐团介绍、演出剧照类图片全部加loading="lazy"懒加载属性，不要直接传几MB的原图，图片必须写死width和height属性避免布局偏移：

<!-- 首屏图提前加载 -->
<img src="season-opening-banner.webp" alt="新乐季开幕演出横幅" width="1920" height="680" loading="eager">
<!-- 非首屏图懒加载 -->
<img src="concertmaster-profile.webp" alt="乐团首席介绍" width="400" height="400" loading="lazy">

• 首屏不要直接嵌入音视频资源：如果首页放了演出试听、过往演出录像，先用封面图占位，等用户主动点击的时候再加载播放器，不要页面一打开就拉几十MB的媒体流

传输与缓存优化 #

• 全站开启Brotli/Gzip压缩，所有托管面板、CDN服务都有一键开关，开启后文本类资源（HTML/JS/CSS）体积能降到原大小的25%-30%
• 给静态资源（图片、字体、JS、CSS）配置不少于6个月的浏览器缓存规则，设置Cache-Control: public, max-age=15552000响应头，回访用户不用重复加载未更新的资源
• 静态资源接入CDN，按乐团主要受众的分布选对应区域的CDN节点，缩短资源加载的网络链路
• 自定义字体只加载首页用到的字重，不要上传完整字体包，非品牌标识类文本优先用系统字体栈，避免字体文件阻塞文本渲染

代码清理优化 #

• 删掉HTML、CSS、JS里的无效注释、空行、冗余嵌套节点，尤其是可视化页面编辑器生成的内容，通常会带大量无用的内联样式和空标签，精简后能大幅降低HTML文件体积
• 弹窗、浮层、订阅提示这类非首屏必要的组件，等页面load事件触发后再延迟加载，不要和首屏内容抢带宽

效果验证 #

每完成一轮优化就用Lighthouse复测，核心看首屏加载耗时、LCP（最大内容绘制）指标，正常做完上面的操作，首页加载耗时能压到2s以内。

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