目标：提升网站在Google PageSpeed Insights得分

一、SEO的基本概念

二、重要性：

三、工具：

• 我们统一使用如下等性能评估工具，以便突出重要性能指标并提供优化建议。

> 指南参考：

• https://web.dev/fast/?hl=zh-cn

• [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/)

• [PageSpeed Insights](https://pagespeed.web.dev/)

四、实施步骤：

1. 衡量性能 新页面上线前使用Lighthouse或其他工具进行性能评估。

2. 优化策略 根据评估结果，优先解决影响用户体验的关键问题。

3. 持续监控 即使网站上线后，也需要持续监控性能并进行必要的优化。

五、基础指标：

• * 首屏渲染时间（FCP）: 目标 < 2.5s - 优化FCP参考：https://web.dev/fcp/#how-to-improve-fcp

• * 最大内容渲染时间（LCP）: 目标 < 4s - 优化LCP参考链接：https://web.dev/optimize-lcp/

• * 首次输入延迟（FID）: 目标 < 100ms - 优化FID参考链接：https://web.dev/optimize-fid/

• * 累计布局偏移（CLS）: 目标 < 0.1 - 优化CLS参考链接：https://web.dev/optimize-cls/

• * 谷歌结构化数据标记 - 遵循谷歌结构化数据指南，将网站内容实现结构化。 - 结构化数据标记参考链接：https://developers.google.com/search/docs/appearance/structured-data/search-gallery?hl=zh-cn - 富媒体结果参考链接：https://search.google.com/test/rich-results?hl=zh-cn

六、优化图片

• * 选择合适的图像格式

• * 使用 WebP 图像,配合picture标签，设置失败回退图片，webp格式支持透明图层

七、选择正确的压缩级别

• * Lv站图片压缩工具85

• * Uniwigs站，PS导出75

八、压缩图像

九、用视频替换动态GIF以加快页面加载

十、提供响应式图像

• 指定多个图像版本，浏览器将选择最好的一个来使用，引入srcset属性，为不同设备提供不同图像，尤其提高移动设备访问速度。

十一、提供正确尺寸的图像

• PC端/M端所有图片必须包含width和height属性

• 所有图片必须设置alt属性，若图片属于占位用，alt属性需保留，值可为空

十二、使用图像 CDN 优化图像

• * Uniwig使用cloudflare cdn，无需额外操作

• * Lv 图片或其他静态资源可将域名地址部分替换为https://do949imosbvsw.cloudfront.net/

十三、延迟加载图片和视频

• 所有自有图片及视频使用lazyload技术(懒加载)，延迟加载图片和视频，提高首屏加载速度，减少用户等待时间，提高用户体验。

• 对于不自动播放的视频

• 对于代替GIF动画图片视频方案 见第九条

十四、优化

• > 参考链接：JavaScript https://web.dev/fast/?hl=zh-cn#javascript

• * 优化长任务，参考https://web.dev/optimize-long-tasks/

• * 优化INP

• * 使用即时加载 - 推送 (Push)（或预加载）最重要的资源。 - 尽快渲染 (Render) 初始路线。 - 预缓存 (Pre-cache) 剩余资产。 - 延迟加载 (Lazy load) 其他路线和非关键资产

• * 拆分代码减少js负载

• * 删除未使用代码（webpack）

• * 缩小和压缩代码减少网络负载

十五、优化资源交付

• * 静态资源使用CDN，目前Uniwig和lavivid使用cloudflare

• * 关键资源使用预加载Rel=preload,preconnect, prefetch，解决LCP可用prefetch
• - 使用<link rel="preload">：告知浏览器当前导航需要某资源，并应尽快获取。
• - 使用<link rel="preconnect">：告知浏览器页面打算与另一个源建立连接，并希望尽快开始该过程。
• - 使用<link rel="prefetch">：用于预先获取非关键资源，以便在有机会时更早地发生。

十六、优化 CSS

• * 延迟加载非关键css

• * 压缩CSS

• * 提取关键CSS，提高首屏加载（Critical CSS）

• * 优化CSS引用的背景图片，基于客户屏幕尺寸引用不同图片资源

十七、优化第三方资源

十八、优化网络字体

• * 使用 font-display，立即显示文字 ```css @font-face { font-family: Helvetica; font-display: swap; } ``` swap告诉浏览器使用该字体的文本应立即使用系统字体进行显示。自定义字体准备就绪后，系统字体就会被换掉。

• * 使用gzip压缩传输

• * 优先选用woff2，使用备选变体（woff，ttf，EOT）

十九、验证谷歌结构化数据标记

• * 验证谷歌结构化数据标记

• * 遵循谷歌结构化数据指南。

- 参考链接:https://developers.google.com/search/docs/appearance/structured-data/search-gallery?hl=zh-cn - 参考链接：https://developers.google.com/search/docs/guides/intro-structured-data?hl=zh-cn