提高网站访问速度，先用浏览器开发者工具和性能检测报告找出最慢的页面与资源，再依次优化图片、缓存、服务器响应和脚本，最后在相同条件下复测。开始前，准备网站后台或服务器的相应权限，并选定首页、列表页、详情页等代表性页面；如果使用托管建站服务，就从后台提供的缓存、图片压缩和性能设置入手。
第一步：建立速度基线，确定瓶颈位置
先记录优化前的表现，避免只凭“感觉变快了”判断。用 Chrome 打开待测页面，按 F12 进入开发者工具，在“Network（网络）”面板勾选“Disable cache（停用缓存）”，刷新页面，查看文档请求的响应时间、图片和脚本的传输大小，以及是否存在失败或耗时特别长的请求。首次加载和重复访问可以分别记录，因为缓存会影响结果。
再在“Lighthouse”面板运行一次移动端性能检测，保存报告，重点看 LCP（主要内容显示时间）、INP（交互响应）和 CLS（布局稳定性），并记下报告指出的最大图片、阻塞渲染的资源及未使用代码。网站有真实用户数据时，也可查看相应的 Core Web Vitals 报告。每次测试尽量使用同一设备、网络和页面，重复测几次并比较中位结果。
- 文档响应慢、页面内容迟迟不出现：优先检查服务器处理、数据库查询和页面缓存。
- 图片传输量大或最大内容元素是图片：先处理图片尺寸、格式和加载方式。
- 脚本执行时间长、点击后反应迟缓：排查第三方脚本和前端 JavaScript。
第二步：压缩图片和静态文件
进入网站后台的媒体库，或检查服务器上的图片目录，先处理首页横幅、文章首图和产品主图等首屏资源。将图片裁剪到页面实际显示尺寸，再转换为 WebP 或 AVIF；如果原图是 3000 像素宽、页面只显示 800 像素，就不必继续传送整张大图。保留必要的原图备份，并检查转换后的图片在手机和桌面端是否清晰。
对列表页和长文章，可使用响应式图片，让浏览器按屏幕尺寸选择合适文件；首屏主图不要设置延迟加载，首屏以下的图片则可启用懒加载。对 CSS、JavaScript 和字体文件，删除未使用的内容并启用压缩传输。修改后重新打开 Network 面板，确认图片文件体积下降、首屏主图没有延迟出现，页面布局也没有因图片尺寸变化而跳动。
第三步：设置缓存并减少服务器等待
在主机控制面板、网站缓存插件或 CDN 的缓存设置中，为带有版本指纹的 CSS、JavaScript、字体和图片设置较长缓存时间。例如，文件名包含内容哈希、每次更新都会改变的静态文件，可使用较长的 Cache-Control: public, max-age=31536000, immutable 缓存策略；未带版本号的文件应缩短缓存时间，避免改版后访客仍看到旧资源。
如果网站使用内容管理系统，可在缓存插件或主机后台开启页面缓存，并在发布文章、修改模板后清理相关缓存。登录后台、购物车、个人账户等个性化页面不要直接套用公共页面缓存，以免访客看到其他人的数据。对于动态网站，还应检查数据库查询、过多插件和重复接口请求；减少无用插件后，比较文档请求响应时间是否下降。
若主要访客分布在不同地区，可在 CDN 控制台启用静态资源缓存，并确认图片、脚本等请求确实从边缘节点返回。服务器支持时开启 Brotli 或 Gzip 压缩。设置后检查响应头和页面内容：静态文件应命中缓存，更新后的文件应能及时刷新，动态内容仍应对应当前登录用户。
第四步：整理脚本与样式，避免阻塞首屏
在 Lighthouse 报告或开发者工具中找出阻塞首屏渲染的 CSS、JavaScript 和第三方代码。先移除不再使用的统计、客服或营销脚本，再将非首屏必需的脚本设置为延后执行；例如，适合延后执行的外部脚本可使用 defer。不要把首屏展示或关键交互所依赖的代码一并延后，否则可能造成按钮失效或内容空白。
样式文件可拆分首屏必要样式与页面其他样式，并减少重复规则；字体只加载实际使用的字重，避免同时下载多套字体文件。每次调整后检查菜单、表单、搜索、登录等关键功能是否正常，再观察 Lighthouse 中阻塞资源和未使用代码提示是否减少。
第五步：复测并确认优化完成
用第一步相同的页面、设备和测试方式再次运行 Network 与 Lighthouse，并与基线逐项对照。可将 LCP 不超过 2.5 秒、INP 不超过 200 毫秒、CLS 不超过 0.1 作为真实用户体验的参考目标；单次实验室测试会受网络和设备影响，因此应多次测试，并优先观察真实用户数据的变化。
完成标志不只是分数提高：首屏主图传输量明显下降，文档响应和关键资源加载更快，页面操作正常，缓存命中符合预期，内容更新后也能正确显示。如果速度没有改善，就回到报告中定位仍然耗时的具体请求；若出现旧内容、样式错乱或交互异常，先清理相关缓存，必要时撤回最近一次改动，再逐项重新测试。
