Google 明确表示，良好的网页体验是影响搜索结果排名的重要因素。若想要提升网页体验而超越竞争对手，单看一两项是不够的，我们需要做系统性的全面优化。
这里列举系统性的网页体验需要注意的要点：
1. 网页应具有良好的核心网页指标。
2. 网页应以安全的方式提供。
3. 在移动设备上查看时,内容应具有良好的显示效果。
4. 内容不应包含过多会分散用户注意力或干扰主要内容的广告。
5. 网页不应含有干扰性插页式广告。
6. 访问者应该能够轻松导航到或找到网页的主要内容。
7. 网页应经过精心设计,使访问者可以轻松将其主要内容与网页上的其他内容区分开来。
具体如何实现，我们继续展开。
01 什么是核心网页指标？
核心网页指标(Core Web Vitals)是 Google 为了帮助网站所有者评估和改进网页性能，特别创造的一组数据指标。这些指标反映了用户体验的三个关键方面：加载速度、互动性和视觉稳定性。
核心网页指标目前包括以下三个具体指标
1. 最大内容渲染时间 Largest Contentful Paint,LCP
衡量从网页开始加载到其主要内容渲染完成所需的时间。为提供良好体验,LCP需要在 2.5 秒内完成。
2. 互动至下一次渲染 Interaction to Next Paint,INP
衡量网页对用户输入做出响应所需的时间。理想情况下，INP 不应超过 200 毫秒。
3. 累计布局位移 Cumulative Layout Shift,CLS
测量网页在加载过程中发生视觉位移的程度，评估视觉稳定性。CLS 的目标值应保持在 0.1 或更低。
这些指标旨在为所有网站提供统一的性能评估标准。尽管不同访问者的硬件、网络环境都不同，但需要有 75% 的用户在访问网站时，各项数据达到了这些指标，才会被 Google 视为符合核心网页指标的要求。
特别需要注意的是，75% 的用户包含移动端和桌面端，大多数情况下移动端的访问量占比更多。由于移动端设备的特殊性，我们应该特别注意通过响应式设计或其他方法，保证用户在移动端的浏览体验。
02 优化网页核心指标的常见方法
优化最大内容渲染时间 (LCP)
减小主要渲染内容的文件大小，特别是图像、视频等，通过压缩、调整分辨率、延迟加载等方式。
优先加载主要内容所需的关键资源，使用“渲染关键路径”技术对资源进行优先级排序。
使用网页缓存和 CDN，提供缓存静态资源的机会，加速内容传输。
实施服务器端渲染，将初始 HTML 直接在服务器生成减少客户端工作量。
分包加载，将非关键资源延迟加载以提升主线程响应速度。
优化交互到下次渲染(INP)
减少 JavaScript 执行时间，代码分割、延迟加载非关键 JS 等。
避免长时间运行的主线程任务，利用 requestIdleCallback 或 Web Workers 将工作分片。
优化网页布局计算量，避免强制同步布局和频繁样式计算。
合理应用 CSS 规则，简化选择器、避免过度使用昂贵的属性。
使用 CSS containment，限制样式、布局范围,减少影响范围。
优化累积布局位移(CLS)
预保留空间给将要加载的 UI 元素，避免无提前布局位移。
确保新渲染的内容不会导致现存内容发生位移。
使用转换 transform 代替绝对定位，避免布局抖动。
针对无法预期布局位移的场景使用 CustomEvent。
使用 font-display 控制 Web 字体渲染时机防止 FOUT。
总的来说，优化这些指标需要从内容传输、渲染过程、JavaScript 执行、资源优先级等多方面入手，权衡用户体验和网页性能表现。
03 使用 HTTPS 提供安全链接
HTTPS 是指超文本传输安全协议(Hypertext Transfer Protocol Secure)。它通过在计算机与服务器之间建立一个安全的加密链接，来保证数据传输的安全性。
HTTPS 不同于 HTTP 的主要区别在于：
加密:HTTPS 在 HTTP 的基础上利用 SSL/TLS 协议对数据进行加密，可以防止数据在传输过程中被窃听或窃取。
身份验证:HTTPS 通过数字证书对服务器身份进行认证，确保用户访问的是真实可信的网站，防止中间人攻击。
数据完整性:HTTPS 会对数据传输进行完整性校验，确保数据在传输中不被篡改。
使用 HTTPS 协议主要有以下好处：
提高网站安全性,有效防范流量被监听、数据被窃取、身份被冒充等安全风险。
满足一些新的网络特性要求,如Service Worker、客户端HTTPS请求、特定API等。
提升搜索引擎对网站的评级和排名,谷歌已将HTTPS作为网站排名的一个重要参考因素。
赢得用户更多信任,在地址栏呈现绿色安全锁标识,让访问者放心访问。
特别需要注意的是，用户在使用 Google Chrome 浏览器时（全球市占率超过65%），若网站不使用 HTTPS，会在访问者界面用红色感叹号提示该网页不安全。品牌官网尤其要注意这个问题，毕竟你不想让已经到手的客户因为这个原因被劝退吧。
无论是对网站所有者还是访问者来说，HTTPS 都提供了重要的安全性和可信赖性保障，是未来互联网的发展方向。
04 优化广告体验
避免使用干扰性插页式广告和对话框
这类广告元素会妨碍用户浏览和查看网页内容，给予用户不良体验，从而影响网站的可信度和访问率。
插页式广告会完全覆盖整个网页内容，而对话框虽然只覆盖部分区域，但同样会遮挡原有内容。虽然对话框在某些情况下是必需的，但我们应当谨慎使用，尽量减少对用户的干扰。
频繁出现的干扰性广告和对话框不仅会引起用户的反感，还会给搜索引擎造成困扰，影响网页的抓取和理解，进而降低搜索排名。用户如果感受到网站使用体验低劣，自然也不会主动再次访问。
使用无干扰的广告展现形式
使用仅占据小部分屏幕空间的横幅广告形式，可以在吸引用户注意力的同时，确保用户能无障碍访问网页主要内容。
对于常见的应用安装广告场景，我们可以利用浏览器原生支持的横幅广告功能，例如 Safari 的智能应用横幅和 Chrome 的应用内安装体验。另一种方式是创建简单的 HTML 横幅广告，通过链接的方式引导用户前往应用商店下载。
同样对于其他类型的通知，如简报注册提示等，我们也可以使用这种小型容器的形式进行展现，避免对内容的遮挡。
