成都SEO优化和第一屏幕最小化优化

发布时间:2020-10-24 08:56:50
成都SEO优化和第一屏幕最小化优化

在上一个项目中,nuxtssr用于完成服务器端呈现。为了满足SEO的需要,非第一屏内容也被请求,服务器直接发送出去,导致第一屏时间更长(非第一屏的资源请求和组件呈现会带来额外的开销)。对于大量用户来说,少量的爬虫访问需求影响了正常用户的访问,这就导致了SEO与用户体验改善之间的巨大矛盾。

为了解决这一问题,我们设计并实现了一种自适应SSR方案,以满足这两种方案的需要。今天,我将与大家分享本计划实施过程中遇到的一些相关子问题的技术细节、设计思路和实践经验。欢迎来交流。

目前,该项目使用nuxtssr来完成服务器端的渲染。为了满足SEO的要求,非第一屏幕资源也被请求,服务器端直接发送出去,导致第一屏幕时间更长(非第一屏幕资源请求和组件呈现都会带来额外的开销)

目前,我们的nuxt项目使用fetch来预取SSR数据,它处理所有关键和非关键的请求

对于大量用户来说,少量的爬虫访问需求影响了正常用户的访问,这就导致了SEO与用户体验改善之间的巨大矛盾。

为了解决这个问题,我们希望区分不同的场景进行不同的直接输出,SEO场景都是直接输出的,其他场景只直接从最小化的第一个屏幕中输出,非关键请求放在前端进行异步拉取

计划统一控制数据加载。数据加载由一个特殊的插件控制。插件将根据条件有选择地加载数据,并同时惰性地加载部分数据

基于gitlabci连续集成的概念和过程,将数据请求设计成不同的阶段,每个阶段执行不同的异步任务,所有阶段形成数据请求的流水线

每个页面都有一个要控制的nuxtfetchpipeline实例。Nuxtfetchpipeline需要配置相应的作业和阶段,然后它将自适应地确定请求的类型,并具体处理异步数据拉取:

当Stage的配置类型为parallel时,Stage作业执行支持并行处理和串行处理。它将同时启动每个作业,并等待所有作业完成。当阶段的配置类型为串行时,此阶段将完成串行处理。它将依次开始每项工作。上一个作业完成后,将开始下一个作业。完成最后一项工作后,此阶段将完成

一些可重用的作业可以定义为自定义阶段,然后可以通过以下方式在其他阶段中引用它们以降低编码成本

为了便于编码和降低更改成本,每个作业的执行上下文类似于nuxtfetch,但它通过上下文参数访问一些状态。因为fetch阶段没有组件实例,为了保持统一性,您不能通过这个

适合舞台的工作是否都是平行的?SEO场景越多,并行minfetch就越好。例如,第一屏幕内容和核心处理所需的数据,以及页面的主要核心内容的数据(例如,评论页面是评论的主体,短视频页面是短视频信息,而post页面是post的主体)最好是并行挂载次密钥内容的数据。比如侧边栏、第二屏等应该考虑是否按照成都的优先级来并行空闲最重要内容的数据,比如页面的底部,标签页的隐藏部分应该尽可能分批进行,而不影响用户的交互

由于服务器只提取关键数据,而有些页面没有数据,因此需要一个框架屏幕来改进体验

在使用vuecontent加载作为骨架屏幕后,发现JS加载和执行时动画会卡住,而CSS动画在大多数情况下可以在主线程外执行,以避免干扰

浏览器似乎没有优化SVG动画的这一方面。最后,我们修改了vuecontent加载的实现,使用CSS动画来实现闪烁加载效果

客户端水合会产生什么结果?

Vuecontentloading在内部依赖于此。Uid作为svgdefs中clippath的ID。然而,这一点。客户端和服务器中的Uid不同。实际上,它类似于上面的随机数示例。

客户端水合作用的结果是C

也就是说,ID没有改变,导致在我们的场景中,骨架屏幕闪烁一段时间,然后消失

所谓客户端激活是指Vue接管服务器在浏览器端发送的静态HTML并使其成为由Vue管理的动态DOM的过程。

由于服务器已经呈现了HTML,我们显然不需要丢弃它并重新创建所有的DOM元素。相反,我们需要“激活”这些静态HTML,然后使它们成为动态的(能够响应随后的数据更改)。

如果检查服务器呈现的输出,您将注意到应用程序的根元素中添加了一个特殊属性:

data server rendered special属性使客户端Vue知道这部分HTML是由服务器端的Vue呈现的,应该以激活模式装载。请注意,不要添加id=“app”,而是添加数据服务器呈现的属性:您需要将自己的id或其他可选择的选择器添加到应用程序的根元素中,否则应用程序将无法正常激活。

注意,在没有data server rendered属性的元素上,还可以将true传递到\$mount函数的drafting参数的位置,以强制使用激活模式:

在开发模式中,Vue推断客户端生成的虚拟DOM树是否与服务器呈现的DOM结构匹配。如果不匹配,则退出混合模式,放弃现有的Dom并从头开始渲染。在生产模式下,跳过此检测以避免性能损失。

Vue不处理attrs、class、staticclass、staticstyle、key

由于所有的ReadyRenderOntheClientorHasNoneed模块都已就绪,因此可以在液压期间创建挂钩的模块列表

总之,第一个字节和屏幕时间将提前,交互时间也将提前

本文分享了如何解决SEO与用户体验改善之间的矛盾,介绍了如何借鉴gitlabci管道的概念,以及在服务器端渲染时如何兼顾第一屏幕最小化和SEO。文中还介绍了自适应SSR的技术细节、设计思想以及在方案实施过程中遇到的一些相关子问题的实践经验。我希望我们能给你一些启发和帮助。