2024 Google SEO【全面优化网页体验】

Google 明确表示，良好的网页体验是影响搜索结果排名的重要因素。若想要提升网页体验而超越竞争对手，单看一两项是不够的，我们需要做系统性的Google SEO全面优化。

这里列举系统性的网页体验需要注意的要点：

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 横幅广告，通过链接的方式引导用户前往应用商店下载。

同样对于其他类型的通知，如简报注册提示等，我们也可以使用这种小型容器的形式进行展现，避免对内容的遮挡。

来源：https://www.syoseo.com/post/1704.html