前言一个网站的加载速度到底有多重要？不管怎样，我相信至少有50%的人来过博主的网站，然后在加载之前关闭了网站。为什么？图片首页的完整加载时间为8.18s。看来能进来看看博主网站的人都是真爱，哈哈。通常情况下，如果一个网页不能在4s内加载完毕，就会流失大量的用户。然而，博主的网站即使在电脑端也需要8s才能加载。如果是在移动端，加载时间会更长，体验会更差。在这种情况下，网站再丑陋，阻止批评者进入也无济于事，因此网页加载速度的优化迫在眉睫。基于博主之前优化过其他网站，所以博主准备把这次优化的过程记录下来分享给大家，以供参考。1、页面分析先看优化前的页面：加载时间8.18s，共33次请求，加载1.38MB。可以看出，对于网速较慢的浏览器来说，加载资源需要5秒以上，再加上33个请求切换开销，根本玩不开心。因此，接下来的优化方法应该从加载流量和请求数入手：2.优化图片图片在网络流量中占有很大比例，因此优化图片对于降低流量有着至关重要的作用。合并小图：很多页面都有很多小图标，一个一个加载就相当于一个一个请求，把这些小图合并成一张大图，用css控制显示范围，这样就可以加载所有的小图了只有一个请求，会瞬间减少很多网络请求。优化图片格式：很多图片未经优化直接上传到网页会占用大量额外流量，比如屏幕尺寸的截图，用截图工具直接截图的大小在1MB左右，直接上传到此时的网页占用了1MB的流量，但实际上，我们只能牺牲其40%的质量来换取10倍大小的缩小。互联网上有很多网站可以转换网页图片。当然，如果你有photoshop，也可以自己导出：用ps打开图片，然后点击菜单栏的“文件”菜单，选择“保存为网页格式”，会出现如下对话框：一般jpg图片可以选择mediumquality，png格式图片选择png8，但是要注意透明背景的png图片选择png24，否则透明背景会有白边，gif选择gif64图片没有抖动。一般情况下，优化后的图片尺寸至少会相差3倍以上，而且图片尺寸越大，优化后的效果越好。博主网站最显眼的图就是header上的鬼图，先上图，通过上面的步骤优化一下：瞬间缩小4倍，看看实际效果.优化后和优化前的显示效果没有明显区别，但文件大小相差4倍。3.使用免费CDN加载第三方资源。所有网站都会使用第三方资源。对于第三方资源，如果选择让自己的服务器提供，那么对于小站点来说，小带宽中有相当一部分会被公共资源占用，这无形中压缩了服务器带宽。如果这部分资源由第三方cdn提供，网站的加载速度会大大提高。博主选择了bootstrap中文网提供的cdn静态库。博主看过很多国内的cdn静态库。可以说bootstrap家族还是很良心的，更新及时，现在资源也很丰富。基本博主使用三方资源都可以在上面找到，所以下一步就是搜索静态资源+替换静态资源：改为这里不要写协议头，让网页自动判断是使用http还是https（对于https网站的部署，可以看博主之前的文章：给你4.使用CDN存放静态资源，一般网站90%的流量都是用来加载静态资源的，除了加载第三方资源还有免费的CDN,你也可以申请云空间来存放自己的静态资源进一步减少服务器的开销,让服务器可以只专注于提供数据或者网页渲染服务.比如某博主使用X牛,存储他所有的X牛上的图片，每个月都有免费流量，做个个人网站应该够用了。5.合并合并mpressjscss删除对公共库的引用。网页中有很多自己写的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:notestspecified\"&&exit1"},"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"}}保存并执行：npminstall//或cnpminstall//如果有，则新建一个webpack配置文件webpack.config.js:varwebpack=require('webpack');module.exports={entry:{base:['../static/js/src/http.js','../static/js/stickUp.min.js','../static/js/src/base.js'],索引:['../static/js/src/index.js'],细节:['../static/js/editormd.js','../static/js/src/article.js'],知道：['../static/js/editormd.js','../static/js/src/know.js'],list:['../static/js/src/list.js']},output:{path:'../static/js/dist/',filename:'[name].js'},plugins:[newwebpack.optimize.UglifyJsPlugin({output:{comments:false},compress:{warnings:true}}),]}这里需要注意的是，如果你的js文件之间的引用是导入后传统的html引用，那么合并的时候记得把你引用的方法对象等设置为全局这里比如b.js需要引用a.js中的函数c，在合并前加入到a.js中（当然，如果你一直在用es6/node写js，就不需要看这里）：window.c=c；或这个。c=c;否则，c会被封装成一个本地函数，修改后运行webpack。提示成功后，在dist目录下可以看到合并压缩后的文件已经输出。之前12kb的文件压缩合并后只有6kb大小，然后我们就可以在网页中替换它了。6.代码优化页面代码优化对页面加载速度也有很大的影响，最广为人知的是：HTML头部的JavaScript和HTML标签中写的Style会阻塞页面的渲染，所以CSS放在了页面头部并且使用了Link方式的引入，JavaScript的引入放在页面的最后，页面onload后紧跟：按需加载、加载统计、分享等js，可以提高访问速度；优化cookie并减少cookie体积；避免src为空；尽量避免设置图片大小，多次重置图片大小会导致图片多次重绘，影响性能；合理使用display属性：width,height,margin,padding不应该在a.display:inline之后使用，floatb.display:inline-block不应该在floatc.display:block和vertical-alignd.display:table-之后使用*不应在margin或float之后使用。不要滥用Float和网络字体；尝试使用CSS3动画；使用ajax异步加载部分请求；7、HTTP2和gzipHTTP2是基于SPDY开发的。SPDY系列协议由谷歌开发并于2009年公开，其设计目标是将页面加载时间减少50%，所以HTTP2很大程度上是为了优化页面加载时间，HTTP2支持多路复用。简单的说，所有的请求都是通过一个TCP连接并发完成的。gzip大家都不陌生，这是一种压缩网页的技术。当然，压缩网页传输的代价是给服务器增加一些压缩负担。当然，这种牺牲是值得的。如何启用HTTP2和gzip？博主的网站是基于nginx+uWSGI的，所以只需要在nginx中开启HTTP2和gzip即可：开启nginx1.9.5后才支持HTTP2，需要配置编译参数。关于nginx启用HTTP2，请直接移步博主之前的文章：nginx配置http2启用gzip直接打开nginx的配置文件，比如博主的在/etc/nginx/nginx.conf，然后添加：server{gzipon;gzip_comp_level6;gzip_proxiedany;gzip_typestext/plaintext/cssapplication/jsonapplication/javascriptapplication/x-javascripttext/xmlapplication/xmlapplication/xml+rsstext/javascriptapplication/x-font-woff;}然后重启nginx到***，让我们清空缓存再次打开网站：总加载流量为527kb，页面加载时间为1.84s。相比之前8.18s的加载时间和1.38MB的流量，整体时间提升了4倍多！使用手机端接入测试，就是这么快。不信你来【访问】1试试看~***，附上本站源码和目录结构，通过commit记录可以更直观的看到优化过程：https://github.com/bluedazzle...
