前端优化页面加载速度的方法_vue项目seo优化全流程经验

1.为什么Vue项目对SEO不友好？

1.爬虫在爬取过程中不会执行js，所以隐藏在js里的跳转不会被获取。

2、Vue通过js控制路由，然后渲染出对应的页面，但是搜索引擎蜘蛛并不会执行该页面的js，导致搜索引擎蜘蛛只能索引index.html这个页面，而相关子页面的内容无法在百度搜索到。

3、当我们加载页面的时候，浏览器渲染包括：HTML解析、DOM树构建、CSS构建、解析、布局、绘制。解析完之后会触发Vue的渲染，然后把元素挂载到id为app的div上，这时候我们才能看到我们页面的内容。因此，即使Vue的渲染机制很快，但是有一段时间我们还是会看到白屏，用户体验不佳。

引发的问题

更少的索引页面 -> 更少的抓取页面 -> 更少的点击次数，等等。

不可以对相应页面做不同的TDK（title， ， ）配置，每个页面的title和meta标签都一样，不利于网络爬虫的抓取。

爬虫的内容

1.从元标记中读取内容。

2. 根据语义化的 HTML 标签抓取并分析内容。整体使用 div 标签的网站与正确使用 HTML5 标签的网站效果会有所不同。

3.读取a标签里的链接，通过a标签里的链接就可以跳转到其他网站了。（爬虫是先跳转还是继续爬取跳转前的内容，取决于算法是广度优先还是深度优先）

4. h1-h6等标签具有不同的强调程度。

h1 通常被认为是重要内容。还有 em 标签用于强调内容。

所以在查看页面源代码的时候，需要能够看到更多对爬虫有利的内容，如果没有做过任何优化的话，在根目录下只能看到HTML文件中的内容，body中只有对爬虫有利的信息，在中只能看到title，和，以及tdk对应的内容。

2. 如何优化

客户端渲染：用户访问URL并请求HTML文件，前端根据路由动态渲染页面内容。关键环节较长，有一定的白屏时间；

服务端渲染：当用户访问某个URL时，服务端根据访问路径请求所需的数据，并将其拼接成HTML字符串返回给前端，当前端收到HTML的时候，其中的一些内容已经存在了；

预渲染：构建阶段会生成与预渲染路径匹配的 HTML 文件（注意：每个需要预渲染的路由都有一个对应的 HTML 文件）。构建出来的 HTML 文件已经包含了一些内容。

由于这不是一个新项目，服务端渲染的开发成本较高，并且业务场景不需要对所有页面进行改进，所以我们选择在构建时简单地为特定路由生成静态 HTML 文件。这样做的好处是更容易设置预渲染，您可以将前端用作完全静态的站点。

-spa- 是一个用于在单页应用中预渲染静态 HTML 内容的插件。因此，这个插件限制了你的单页应用只能使用构建，并且它是框架无关的，无论你使用 React 还是 Vue 甚至没有框架，都可以使用它进行预渲染。

页面加载流程：打包好的 HTML 里面的静态内容其实只是起到一个占位的作用，解析的时候会触发 Vue 的渲染生成可交互的页面覆盖之前的静态页面。这样的实现可以解决首屏显示时间长的问题。（确实首页白屏时间短了点，但是我的网站首页大部分内容都是靠接口返回的，预渲染的内容和我的实际内容可能会有很大的差异，导致页面出现抖动跳转的现象，交互效果不是很好）

-spa-配置过程

安装：

npm -spa- --save

代码配置

vue.js

const = （'-spa-'）

常量 = 。

：{

// 应用程序的名称字段，以便

// 它可以位于 index.html 的标题中。

名称： 名称，

：[

//由于测试需要在测试环境进行，所以环境就不用配置了，其实只需要配置生产环境就可以了。

新的 （{

// 请求预渲染给定的输出应用程序路径。

：路径.join（，'./dist'），

// 必选，需要渲染的路由。（注意，我的项目是前后端分离的项目，所以需要使用nginx把对应的路由映射到对应文件的html文件上，否则预渲染的文件将无法加载）

: [ '/', '/login', '/', '/home', '/'],

// 必需，实际使用的渲染器，没有它就无法进行预编译

： 新的 （{

：{}，

// 渲染时不显示浏览器窗口

: true, //这里有个大坑一定要注意，表示是否显示浏览器窗口，默认值是false，但是代码发送到服务器的时候，运行在Linux环境下，是不可能打开浏览器窗口的，所以必须明确设置为true

// 等待渲染，直到检测到指定元素。

// 例如，在项目入口处使用 `.(new Event('--'))`

vent: '-event',

：5000

}）

}）

]，

}，

src/main.js

新的Vue（{

，

店铺，

（）{

.（新事件（'-event'））

}，

：h => h（应用）

}).$mount（'#app'）

.js

new ({ mode: '', }) 必须设置为模式

核实

运行 npm run build ，检查生成的 dist 目录中是否有对应各个路由名的文件夹。然后在目录中找到 index.html ，用 IDE 打开，检查文件是否有文件应有的内容，如果有则表示设置成功。