Nuxt.js(二、解决首屏速度与SEO)

1.普通的Vue SPA初始化加载速度很慢

在传统的web应用中,当用户请求一个页面时,服务器直接返回一个html文件,浏览器直接渲染出来。但是,在vue应用中,这个过程则可能比您所希望的要慢,特别是在网速较慢的情况下。它的步骤如下:

  1. 当用户初始请求任何的页面时,服务端都会返回引索页index.html
  2. 第二步浏览器需要下载vue相关的Javascript文件
  3. vue引擎初始化并运行
  4. vue路由到相应的页面并加载相关的组件
  5. 执行组件内的javascript,获取api数据
  6. 浏览器渲染模板到用户端,用户看到首屏
  7. 之后用户在切换到应用的其他页面中时,浏览器只会下载该页面相关的javascript,然后直接渲染

一旦vue初始化之后,web应用后续的运行就会非常快,但是初始化加载可能会很慢

2.nuxt的解决方案:universal mode

让我们来看看nuxt的universal mode是怎么初始化的,它的步骤如下:

  1. 当用户初始请求某个页面时,服务端会在服务端直接渲染好这个页面,然后直接返回page.html
  2. 浏览器渲染page.html模板到用户端,用户可以很快的看到首屏进入应用
  3. 然后浏览器需要下载vue相关的Javascript文件
  4. vue引擎初始化并运行
  5. vue将接管初始化的page.html,并与之耦合,使得应用接下来的运行回到正常的步骤上
  6. 之后用户在切换到应用的其他页面中时,浏览器只会下载该页面相关的javascript,然后直接渲染,这样就回到了原始的应用中

如您所见,在初始化任何JavaScript之前都会先渲染新页面(首屏)。一旦下载JavaScript并运行Vue,页面就会“耦合”,这基本上意味着它会变成一个普通的SPA(单页应用程序)。

3.nuxt的智能预读取

Nuxt 2.4中发布了Nuxt.js的一个新特性,称为智能预读取,它与universal mode相结合,提供了更好的用户体验。

使用此功能(默认情况下已启用),当nuxt-link路由在视口中可见时(即页面滚动到路由入口元素时),Nuxt.js将自动下载链接目标页面所需要的javascript。当单击路由调整时,JavaScript已经将目标组件准备好了,目标页几乎立刻渲染呈现,而不是等待组件下载。


4.vue-meta

vue SPA应用对SEO不友好,我们都知道,vue构建的页面依赖于加载要呈现的JavaScript。因此我们的SPA应用会有以下的一些问题:

  1. 搜索爬虫程序可能不支持抓取JavaScript的功能。
  2. Google是唯一一个尝试渲染JavaScript的引擎。
  3. 一个JavaScript错误可能导致整个站点没有被索引。
  4. 如果你的页面太慢,可能根本就没有索引。
  5. 客户端渲染的JS网站历史排名并不高。

一张网页相对于搜索引擎最重要的两个标签

1<title> the Title </title>
2<meta name='description' content='the description'>
3//当你搜索某一关键词时,页面显示方式如下图


为了管理页面的这些头部信息,nuxt引入了vue-meta来完成这一功能,这个是一个独立的插件,它也可以在nuxt外使用,而且vue meta支持ssr,在nuxt universal mode中可以直接在服务端渲染中完成header信息的更新,你的页面组件上vue-meta配置看起来将会是这样:

1head() {
2    return {
3        title: 'the about page',
4        meta: [
5            {
6                hid: 'description',
7                name: 'description',
8                content: 'the about description'
9            }
10        ]
11    }
12}



Nuxt.js(二、解决首屏速度与SEO)的更多相关文章

  1. ssr 之Nuxt.js

    ssr:server side rendering(服务端渲染),目的是为了解决单页面应用的 SEO 的问题,对于一般网站影响不大,但是对于论坛类,内容类网站来说是致命的,搜索引擎无法抓取页面相关内容 ...

  2. 从壹开始 [ Nuxt.js ] 之一 || 为开源收录Bug之 TiBug项目 开篇讲

    缘起 哈喽大家周二好呀,刚刚经历过了几天火车抢票,整个人都不好了,不知道小伙伴对今年的春节是否还一如既往的期待呢,眼看都要春节了,本来也想写篇2018总结篇,但是怕不免会出现鸡汤文的窠臼嫌疑,想想还是 ...

  3. vue目首屏添加skeleton骨架屏

    1. 安装插件:npm install vue-skeleton-webpack-plugin 2. 在src目录下创建 Skeleton.vue <template> <div c ...

  4. Vue项目优化首屏加载速度

    Vue项目部署上线后经常会发现首屏加载的速度特别慢:那么有那写能做的简单优化呢 一.路由的懒加载 路由懒加载也就是 把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件. 结合 ...

  5. 【Vuejs】317- 提升90%加载速度——Vuecli下的首屏性能优化

    点击上方"前端自习课"关注,学习起来~,所以接下来还会介绍一些它们在优化上的异同 的话,先安装插件 cnpm intall webpack-bundle-analyzer –sav ...

  6. 【Vuejs】269- 提升90%加载速度——vuecli下的首屏性能优化

    前言 之前用 ,所以接下来还会介绍一些它们在优化上的异同 分析 vuecli 2.x自带了分析工具只要运行 npm run build --report 如果是 vuecli 3的话,先安装插件 cn ...

  7. 从壹开始 [ Nuxt.js ] 之二 || 项目搭建 与 接口API

    前言 哈喽大家周一好,今天的内容比较多,主要就是包括:把前端页面的展示页给搭出来,然后调通接口API,可以添加数据,这两天我也一直在开发,本来想一篇一篇的写,发现可能会比较简单,就索性把项目搭建的过程 ...

  8. 解决React首屏加载白屏的问题

    众所周知,在项目中如果在资源加载请求还未完成的时候,由于阻塞机制,会出现首页白屏的问题,产生很差的用户体验.本文以react为例,提供一个解决方法. 解决原理:使用 onreadystatechang ...

  9. Vue(三十二)SSR服务端渲染Nuxt.js

    初始化Nuxt.js项目步骤 1.使用脚手架工具 create-nuxt-app 创建Nuxt项目 使用yarn或者npm $ yarn create nuxt-app <项目名> 注:根 ...

随机推荐

  1. Java基础——final、static关键字

    final关键字是最终的意思,可以修饰成员方法.成员变量.类 特点: 1.修饰方法:表示该方法是最终方法,不能被重写 2.修饰变量:表示变量是常量,不能再次被赋值 3.修饰类:表示类是最终类,不能被继 ...

  2. 无法更新apt镜像源?树莓派安装最新版Debian11(bullseye)arm64位系统步骤

    镜像下载.域名解析.时间同步请点击阿里云开源镜像站 树莓派系统在2022年1月28日迎来了更新,更新了64位的系统,同时也有lite系统供我们使用.32位系统很多软件都用不了,特别是宝塔面板.下面是安 ...

  3. 采用二进制文件方式安装loki和promtail

    1. 下载二进制文件 官方下载地址:https://github.com/grafana/loki/releases 下载如图所示的这俩文件,Grafana采用yum方式安装 cd /usr/loca ...

  4. 爬虫简介与requests模块

    爬虫简介与requests模块 一 爬虫简介 概述 网络爬虫是一种按照一定规则,通过网页的链接地址来寻找网页的,从网站某一个页面(通常是首页)开始,读取网页的内容,找到网页中的其他链接地址,然后通过这 ...

  5. 羽夏笔记——Hook攻防基础

    写在前面   本笔记是由本人独自整理出来的,图片来源于网络.本人非计算机专业,可能对本教程涉及的事物没有了解的足够深入,如有错误,欢迎批评指正. 如有好的建议,欢迎反馈.码字不易,如果本篇文章有帮助你 ...

  6. java 学习笔记(一)

    书 head first java 1. 2.加强版的FOR循环 3. 通过super引用父类 4.多态 5.接口和抽象类 接口 6.多线程锁 7.JDBC

  7. springDataRedis忽略实体指定的属性

    如果是通过 RedisRepository定义的实体,可能存在想要忽略的属性,那么,就可以 使用 org.springframework.data.annotation.Transient 注解,就可 ...

  8. 在 Java 中 Executor 和 Executors 的区别?

    Executors 工具类的不同方法按照我们的需求创建了不同的线程池,来满足业务 的需求. Executor 接口对象能执行我们的线程任务. ExecutorService 接口继承了 Executo ...

  9. SynchronizedMap 和 ConcurrentHashMap 有什么区 别?

    SynchronizedMap 一次锁住整张表来保证线程安全,所以每次只能有一个线程来 访为 map. ConcurrentHashMap 使用分段锁来保证在多线程下的性能. ConcurrentHa ...

  10. 学习Walle(一)

    一.概述 Walle 一个web部署系统工具,配置简单.功能完善.界面流畅.开箱即用!支持git.svn版本管理,支持各种web代码发布,PHP,Python,JAVA等代码的发布.回滚,可以通过we ...