400% 的飞跃－ web 页面加载速度优化实战

[rapospectre]

前言

一个网站的加载速度有多重要？ 反正我相信之前来博主网站的人至少有 50% 在加载完成前关闭了本站。 为啥捏？ 看图

首页完整加载时间 8.18s ，看来能进来看博主网站的人都是真爱呀，哈哈。 正常来讲一个网页 4s 加载不完就会流失很大一部分用户，而博主的网站加载时间竟然达到了 8s 还是在电脑端，如果在移动端，加载时间会更久，体验会更差。 这样的话网站做得再难看批判者进不来不是白搭嘛，于是针对 web 页面加载速度的优化迫在眉睫。

基于博主以前优化过其他网站，于是博主准备把这次的优化过程记录下来分享给大家借鉴。

1. 页面分析

先来看优化前的页面：

加载时间 8.18s ，一共 33 个 请求，加载 1.38MB 。 可以看到对于网速较慢的浏览者光加载资源就需要 5s 以上，再加上 33 个请求切换开销，简直不能愉快的玩耍。 所以接下来的优化手段就要从加载流量和请求数量入手：

2. 优化图片

图片在网络流量中占有很大的比重，因此优化图片对于减少流量有着至关重要的作用。

合并小图片:

很多页面有很多小图标，一个一个加载就相当于一个一个请求，将这些小图片合并成一个大图片，用 css 控制显示范围，这样就只需要一个请求即可加载完所有小图片，瞬间就会减少很多网络请求。

优化图片格式：

很多图片没有经过优化直接上传到网页中会占用很多额外的流量，比如一张屏幕大小的截图，用截图工具直接截图后的大小大概有 1MB ，此时直接上传到网页中就直接占用了 1MB 流量，但其实我们完全可以只牺牲它 40% 的质量换取缩小 10 倍的大小，网上有很多转化 web 图片的网站，当然如果你有 photoshop 的话完全可以自己导出：

将图片在 ps 中打开，然后点击菜单栏 “文件” 菜单，选择 “储存为 web 所用格式”，出现如下对话框：

一般情况下 jpg 图片选择品质中即可， png 格式图片选择 png8 即可，但注意有透明背景的 png 图片要选择 png24 ，否则透明背景中会出现白边， gif 图片选择 gif64 无仿色即可。

一般经过优化的图片大小至少会有 3 倍 之差，图片原大小越大优化的结果会越好。

博主的网站最显眼的图片就是页眉上那个幽鬼的图片啦，所以就先拿它开刀，经过以上步骤优化：

瞬间减小 4 倍，实际效果可以看看，代表着博主门面的图片经过优化后和优化前显示效果并没有明显区别，而文件大小却相差了 4 倍。

3. 使用免费 cdn 加载第三方资源

所有网站都会用到第三方资源，对于第三方资源，如果选择让自己的服务器提供，那么对于小型站点，本就不大的带宽相当一部分还要被公共资源占用，无形之中压缩了服务器带宽，如果把这部分资源让第三方 cdn 提供，那么对于网站加载速度会有不小的提升。

博主选用的是 bootstrap 中文站提供的 cdn 静态库，博主看过不少国内 cdn 静态库，可以说 bootstrap 家的还是很良心的，更新及时，资源现在也很丰富，基本博主用的三方资源都能在上面找到，于是接下来就是搜索静态资源 ＋ 替换静态资源：

<script src="/s/js/jquery.min.js"></script>
改为
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>

这里不要写协议头，让网页自动判断使用 http 还是 https （ 关于 https 网站的部署可以看博主之前的文章： 给你的网站穿上外衣－ HTTPS 免费部署指南 ）

4. 使用 cdn 储存静态资源

一般网站 90% 的流量都用于静态资源的加载，除了用免费 cdn 加载第三方资源，还可以自己申请云空间储存自己的静态资源，进一步减小服务器的开销，让服务器只专注于提供数据或者网页渲染服务。 比如博主使用的是 X 牛 ，将自己的图片什么都存在 x 牛上，每个月都有免费流量，对于个人网站来说应该够用。

5. 合并压缩 js css

除去引用公共库，网页中还有许多自己写的 js 与 css ，如果我们直接把开发环境的文件拿来用无疑很浪费流量，因此在编写好网页测试完毕后，我们应该将 css 和 js 压缩合并成一个或者几个文件，这样既减少了请求次数又减少了流量消耗，一箭双雕。 当然还有 html 压缩，不过 ms 现阶段还有一些坑，就先不用了。 说到合并压缩，第一时间播追就想到了 webpack ，前端工程化神器，简单配置一下就可以完全搞定任务：

博主网站自己的 js 工程文件放在 /webroot/static/src/js/ 中，假如我们要将压缩合并后的文件放在 /webroot/static/dist/js/ 中：

在 /webroot/ 下新建文件夹 webpack, 进入文件夹，新建文件 package.json:

{
  "name": "RaPo3",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "rapospectre",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.24.0",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.15.1"
  }
}

保存后执行：

npm install
//或
cnpm install
//如果你有的话

然后新建 webpack 配置文件 webpack.config.js:

var webpack = require('webpack');
module.exports = {
    entry: {
        base: ['../static/js/src/http.js', '../static/js/stickUp.min.js', '../static/js/src/base.js'],
        index: ['../static/js/src/index.js'],
        detail: ['../static/js/editormd.js', '../static/js/src/article.js'],
        know: ['../static/js/editormd.js', '../static/js/src/know.js'],
        list: ['../static/js/src/list.js']

    },
    output: {
        path: '../static/js/dist/',
        filename: '[name].js'
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin({
            output: {
                comments: false
            },
            compress: {
                warnings: true
            }
        }),
    ]
}

这里要注意的是如果你的 js 文件间的引用是传统的 html 引入后引用那么在这里合并时记得把你被引用的方法\对象等等设置为全局，比如 b.js 要引用 a.js 中的函数 c ，合并前要在 a.js 中加上（ 当然如果你一直用 es6/node 写 js 就不用看这里了 ）：

window.c = c;
或
this.c = c;

不然 c 就会被当作局部函数封装起来。

改完后运行 webpack 提示成功后看到 dist 目录里已经输出了合并压缩好的文件，之前 12kb 的文件经过压缩合并后只有 6kb 大小，然后我们将其替换到网页中即可。

6. 代码优化

页面代码的优化对于页面加载速度也有不小的影响，最广为人知的：

HTML 头部的 JavaScript 和写在 HTML 标签中的 Style 会阻塞页面的渲染，因此 CSS 放在页面头部并使用 Link 方式引入， JavaScript 的引入放在页面尾

其次还有：

1. 按需加载，把统计、分享等 js 在页面 onload 后再进行加载，可以提高访问速度；
2. 优化 cookie ，减少 cookie 体积；
3. 避免 的 src 为空；
4. 尽量避免设置图片大小，多次重设图片大小会引发图片的多次重绘，影响性能；
5. 合理使用 display 属性：

a.display:inline 后不应该再使用 width 、 height 、 margin 、 padding 以及 float
b.display:inline-block 后不应该再使用 float
c.display:block 后不应该再使用 vertical-align
d.display:table-*后不应该再使用 margin 或者 float

1. 不滥用 Float 和 web 字体；
2. 尽量使用 CSS3 动画；
3. 使用 ajax 异步加载部分请求；

7. HTTP2 与 gzip

HTTP2 是以 SPDY 为基础开发的。 SPDY 系列协议由谷歌开发，于 2009 年公开。它的设计目标就是降低 50% 的页面加载时间，所以 HTTP2 在很大程度也是为了优化页面加载时间，同时 HTTP2 支持多路复用，简单说就是所有的请求都通过一个 TCP 连接并发完成。 而 gzip 大家都不陌生，就是一种压缩网页的技术，当然压缩网页进行传输的代价就是给服务器增加一些压缩的负担，当然这种牺牲是值得的。

如何开启 HTTP2 与 gzip ？ 博主的网站基于 nginx + uWSGI 进行服务，因此只要在 nginx 开启 HTTP2 与 gzip 就好：

开启 HTTP2

nginx 1.9.5 之后才支持 HTTP2 ，而且需要配置编译参数，关于 nginx 开启 HTTP2 请直接移步博主之前的文章： nginx 配置 http2

开启 gzip

直接打开 nginx 配置文件, 比如博主的在 /etc/nginx/nginx.conf， 然后加上：

server{
		gzip  on;
        gzip_comp_level 6;
        gzip_proxied any;
        gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript application/x-font-woff;
		}

然后重启 nginx 即可

最后，让我们清除缓存，再次打开网站：

总加载流量 527kb ，页面完成加载时间 1.84s ，对比之前加载时间 8.18s ， 1.38MB 流量，整体时间提升了 4 倍多！用手机端访问测试，简直快的飞起，不信你也来访问( 骗流量脸 )试试呀～

最后，附上本文网站的源码以及目录结构，可以通过 commit 记录更加直观的看到优化的过程：

https://github.com/bluedazzle/django-vue.js-blog

欢迎来颗 star 哈哈。

原文地址: https://www.rapospectre.com/blog/web-page-loading-optimize-guide

作者：rapospectre

[vivagonna]

感谢分享，博客字号稍有点儿小，手机上看略吃力

[yanzixuan]

学习了。弱问 LZ 怎么实现嵌套式评论。

[rapospectre]

@vivagonna 哦哦，好的，我调整下字体看看，谢谢啦

[rapospectre]

@yanzixuan 评论一个表 comment ，回复在另一个表 reply ， reply 和 comment 外键关系，然后前端获取到的数据就是类似 comments: [ {reply: [ {xxx}, {xxx} ], content: 'xx' }, {reply: [ {xxx}, {xxx} ], content: 'xx' }]， 然后就直接 vue 或者其他框架 v-for=comment in comments ， 在 comment 嵌套里面获取到 replys 继续 再写个循环 v-for=reply in comment.reply 然后就可以啦

[nbk2015]

幽鬼好评

[rapospectre]

@nbk2015 哈哈，就喜欢幽鬼

[yanzixuan]

@rapospectre 多谢 LZ 解惑，我之前一直把 reply 跟 comments 放一个表里。

[abelyao]

想问问楼主，分享一篇文章能从 V2EX 带去多少流量？

[yatessss]

幽鬼有些不适合这个版本了。。。

[rapospectre]

@abelyao 没单独统计过呐，不过你从阅读数可以看到并不多 (无奈脸)

[rapospectre]

@yanzixuan 不阔气～

[rapospectre]

@yatessss 嗯，现在节奏越来越快了，不过喜欢它不是因为版本强不强，就是因为喜欢。

[9hills]

lz 你的页面不能做个左右留白么，第一次见到 logo 直接贴边的（那个 Rapo 的 R ，直接和左边在一起。。）

另外红配蓝。。。

今年看到的最丑 Blog ，虽然速度还是挺快的

[misaka19000]

满满的干货啊，感谢楼主

不过话说回来如果对于托管在 Github Pages 的博客的优化楼主有什么好的建议吗？毕竟 github 访问本来就很慢。。。

[Showfom]

来和我博客比一下速度

https://sb.sb/

[qwer1234asdf]

mark

[crazycen]

试试我的速度 https://www.crazycen.com

[shellcodecow]

http://coc.tv 用的是 v 友的源码

[shellcodecow]

http://www.coc.tv 更正

[kxxoling]

@yatessss 这个版本 spe 还是挺强的啊！尤其对面有火枪的时候，针对一手挺好。

[xspoco]

这个时候。

https://imququ.com/

一定要发这个站。

[bdbai]

搭车安利 Bootcdn CLI ：
https://npmjs.com/package/bootcdn-cli

[chshouyu]

也搭车
https://chshouyu.com

[Technetiumer]

听说可以搭车
http://void-fm.ga/

[chairuosen]

搭车 https://ruosen.io/ YSlow PageSpeed 100 分

[Technetiumer]

@xspoco +1
@shellcodecow itorr 的既视感，为啥不解析根域名
@Showfom 一看域名就知道是 dalao ，你博客不是 ttt.tt 么

--------

@rapospectre

整页时间>2s ，延迟 1 秒的页面加载时间可能导致转换损失 7%，减少 11%的页面浏览量，并减少 16%的客户满意度。如果 3 秒后，网页还未加载完毕， 57%的用户会放弃， 74%的用户登录某网站时间超过 5 秒后就不会再登录这个网站。

总请求数 16 ，总大小 774.16KB ， 7 个 JS ， 1 张图片，其中 1 张图片可被优化，页面复杂度和大小直接影响加载时间和用户体验。如果网页请求越多，图片和流媒体元素数量越多，传输和处理所花的时间就越长。 JavaScript 数量和使用越多，就需要大量时间执行，第三方组件极大地影响页面加载时间和用户体验。

有 12 个请求可进行缓存优化，有 9 个请求可合并，有 17 个请求未启用 keep-alive ，有 1 个请求可开启 ETag 优化。

白屏时间（ DNS+建立连接时间+后端响应）为 1.609s ，有 5 个请求未使用 CDN 。

[Technetiumer]

@chairuosen

PageSpeed
清除首屏内容中阻止呈现的 JavaScript 和 CSS
您的网页中有 1 个阻止呈现的 CSS 资源。这会导致呈现网页的过程出现延迟。
在以下资源加载完毕之前，网页上不会直接呈现任何首屏内容。请尝试暂缓或异步加载阻止资源，或者将这些资源的关键部分直接内嵌到 HTML 中。
为以下项优化 CSS 递送：
https://ruosen.io/assets/css/screen.css


我想我是永远不可能 PageSpeed 满分了。。。。

[Faratv2]

你说的都懂，可是套别人 WP 模版，就是没有打开速度

https://imouyang.com

[dremy]

使用 Server Rendering 的 React SPA 博客，速度杠杠的
https://dremy.cn

[ichou]

还不够彻底， gzip 可以预先压缩，选最大压缩率，靠 nginx 来压缩压缩率不够，每次压缩本来也是耗时的

[vivagonna]

@Technetiumer 没必要太纠结那一两秒，关键还是内容，有有价值的内容用户就愿意等，没内容哪怕秒开也没人看

[shijingshijing]

@rapospectre

https://www.rapospectre.com/rss.xml

[vivagonna]

@dremy 然而打开花了至少 3 秒才看到文字，电信用户表示

[shijingshijing]

@Showfom 这个域名也是醉了。。。

[Technetiumer]

@vivagonna 我是复制性能魔方评测结果的

** 有 12 个请求可进行缓存优化，有 9 个请求可合并， [有 17 个请求未启用 keep-alive ] ，有 1 个请求可开启 ETag 优化。 **

[dremy]

@vivagonna 额可能是访问量不高， CDN 没有预加载吧

[phithon]

rss 加载出错，想订阅都不行呀楼主

[Cell]

然而你这个博客我打开还是慢

[chairuosen]

@Technetiumer 这是你的 PageSpeed 给的意见？ css 肯定是要这样的。。我是用这个测的 http://gtmetrix.com/

[Technetiumer]

@chairuosen 所以我想我是永远不可能 PageSpeed 满分了。。。。似乎只有内嵌 CSS 才满分。。。

谷歌官方的
https://developers.google.com/speed/pagespeed/insights/

[Volio]

搭车 https://niconiconi.org
不知道大家感觉速度怎样，应该不慢~

[Showfom]

@Technetiumer 换域名了 打算把旧文章慢慢改改 毕竟我现在都用 16.04 了 233 一些教程和 14.04 还有点区别

[fhefh]

谢谢楼主了 学习了 哈哈哈

[chairuosen]

@Technetiumer 我这就尴尬了。。。才 97 。。 http://gtmetrix.com/ 的 PageSpeed 得分居然跟官方不一样。。。

[HmyBmny]

兄弟，你的网站挂掉了

[rapospectre]

@9hills 别拦着我，我要换成红配绿，哈哈哈哈

[rapospectre]

@misaka19000 谢谢支持呀。你都说了呀， Github 本来就很慢，所以最好的方法是页面托管回国内，会快很多。你看我网站的评论登录是 github ，每次从 github 授权都要等好久，所以这个网速的问题只能是迁到国内了

[rapospectre]

@Showfom 域名简直惊艳

[rapospectre]

@kxxoling 幽鬼任何时候都完克火枪，哈哈

[rapospectre]

@shijingshijing 这个错误是一篇博客引起的，取消发布那篇博客就没问题，我觉得可能是某些控制字符导致的，但是我怎么都找不到到底哪里有非法的控制字符，最后就放弃了。噗

[rapospectre]

@HmyBmny 刚从发现了一个评论的 bug ，紧急修复了一下，重新发布的时候停止响应了 1min 左右，谢谢啦

[rapospectre]

@fhefh 谢谢支持呀

[rapospectre]

@Technetiumer 可以，看来还有很大的优化空间，我再继续学习学习，谢谢啦

[rapospectre]

@phithon 那个错误改了好久，是一篇博客引起的，取消发布那篇博客就没问题，找了好久问题都没找到，已经奔溃放弃，过两天再试试，谢谢啦

[sammiriam]

mark

[f0rger]

虽然都是炒冷饭，但还是支持一下。

[lan894734188]

我来秀下限😂 https://bbs.bydisk.com

[horizon]

..2 年前看到的就是这些东西。

[murmur]

@Showfom 你这个我差点 dns 就没解析出来。。

[gouflv]

哦

[LokiSharp]

试试我的速度。。。 https://sharloki.moe

[xwartz]

刚买了个域名，我也要试试 http://xwartz.xyz/blog

[Nothentai]

http://www.not-hentai.com
听说又可以贴博客了

[yatessss]

@kxxoling 打天梯好久没看到幽鬼这个核了。。。。 被压了不好翻

[yidongnan]

https://www.devh.net
都来帖博客了

[coderluan]

干货挺好，昨天吧里有人发了个网站，打开就日了狗了， 4k 分辨率的图片不压缩当背景

[shoaly]

说太多了, 其实这个网站打不开 就是因为一张图 和一个 css 太大, 直接优化了就完事了

[Totato5749]

我更好奇楼主服务器是哪的 阿里云？

[kxxoling]

@yatessss 最近玩了 2 局 UG 都是前期被压，昨晚是 1 杀 4 死的开局，最后 18 杀 6 死 16 助攻收尾。只要不是 gank 我开局的团战，都是秒切火枪的！

[Thiece]

通过 zopflipng 算法，头图还能再小 25%

[ChefIsAwesome]

vue.js 71k, jquery.js 83k, materialize.js 135k, semantic.js 269k
materilize.css 112k, semantic.css 537k

用上了吗？没有。

[Damaidaner]

我是小白，想问一下 wordpress 下，具体如何使用 bootstrap 中文站提供的免费 cdn 静态库 加载第三方资源？

[qqpkat2]

跟书上的一个套路，没什么新意了。

[zeac]

@dremy 看了你几篇博文 发现你才大三 真心牛逼

[lslqtz]

https://www.loliwiki.org
来比比速度

[lslqtz]

@Nothentai 卧槽博客内容...

[lslqtz]

@chairuosen
PageSpeed
WTF??? 为以下项优化 CSS 递送：
https://fonts.googleapis.com/… ata%3A400%2C700&subset=latin%2Clatin-ext

[dremy]

@zeac 谢啦，有空多来逛逛

[Nothentai]

@lslqtz
非常正常的游戏评测与推荐
┑(￣Д ￣)┍

[SakuraKuma]

http://yoru.me

我把东西都扔空间了

[kideny]

我的个人网站（ www.jicker.cn ），也是用的 wordpress 的博客。
没有上数据库缓存，也没有上静态化的插件，速度也就这样了。。。
如果用 wp-super-cache 静态化缓存插件，速度还可以更快。但是已经到 1s 以内了，感觉没必要，还是少用点插件吧。

[codehz]

你那 logo 图片如果用 svg 或者 iconfont ，应该会更好。。。

[rapospectre]

@kideny 我不是 wordpress 哈， 自己写的。

[rapospectre]

@codehz 谢谢建议，我试试用 svg

[rapospectre]

@Damaidaner 你可以问问 @kideny 哈，我没用过 wordpress

[rapospectre]

@Thiece 卧槽 666

[rapospectre]

@Totato5749 嗯嗯，阿里云

[rapospectre]

@ichou Django 有 gzip 的 middleware ，估计用这个做预压缩应该比较好

[rapospectre]

@coderluan 哈哈

[ichou]

@rapospectre Django 的 gzip middleware 不是预压缩吧，也是请求来了之后，在处理请求的过程中对结果进行 gzip
可以看成是把 nginx 的 gzip 放到了 Django 里

我是指把静态文件入 app.js 预先压缩成 app.js.gz, 当 app.js 的请求到达时， nginx 会直接使用 app.js.gz 作为返回，由于不需要每次都执行压缩，所以可以将压缩的倍率压到很高而不影响服务器性能

[Tokin]

主要是因为那张图片，没有图片要是能达到 400%那就厉害了

[Zohar]

https://www.iwch.me/
个人觉得优化的还不错，欢迎来踩😂

[Damaidaner]

@kideny 你好，我想请问一下，在 wordpress 下，具体如何使用 bootstrap 中文站提供的免费 cdn 静态库 加载第三方资源？