前言
一個網(wǎng)站的加載速度有多重要？ 反正我相信之前來博主網(wǎng)站的人至少有 50% 在加載完成前關閉了本站。 為啥捏？ 看圖
首頁完整加載時間 8.18s，看來能進來看博主網(wǎng)站的人都是真愛呀，哈哈。 正常來講一個網(wǎng)頁 4s 加載不完就會流失很大一部分用戶，而博主的網(wǎng)站加載時間竟然達到了 8s 。這還是在電腦端，如果在移動端，加載時間會更久，體驗會更差。 這樣的話網(wǎng)站做得再難看，批判者進不來不是白搭嘛，于是針對 web 頁面加載速度的優(yōu)化迫在眉睫。
基于博主以前優(yōu)化過其他網(wǎng)站，于是博主準備把這次的優(yōu)化過程記錄下來分享給大家借鑒。
1. 頁面分析
先來看優(yōu)化前的頁面：
加載時間 8.18s ，一共 33 個 請求，加載 1.38MB 。 可以看到對于網(wǎng)速較慢的瀏覽者光加載資源就需要 5s 以上，再加上 33 個請求切換開銷，簡直不能愉快的玩耍。 所以接下來的優(yōu)化手段就要從加載流量和請求數(shù)量入手：
2. 優(yōu)化圖片
圖片在網(wǎng)絡流量中占有很大的比重，因此優(yōu)化圖片對于減少流量有著至關重要的作用。
合并小圖片:
很多頁面有很多小圖標，一個一個加載就相當于一個一個請求，將這些小圖片合并成一個大圖片，用css 控制顯示范圍，這樣就只需要一個請求即可加載完所有小圖片，瞬間就會減少很多網(wǎng)絡請求。
優(yōu)化圖片格式：
很多圖片沒有經(jīng)過優(yōu)化直接上傳到網(wǎng)頁中會占用很多額外的流量，比如一張屏幕大小的截圖，用截圖工具直接截圖后的大小大概有 1MB ，此時直接上傳到網(wǎng)頁中就直接占用了 1MB 流量，但其實我們完全可以只犧牲它 40% 的質(zhì)量換取縮小 10 倍的大小，網(wǎng)上有很多轉(zhuǎn)化 web 圖片的網(wǎng)站，當然如果你有 photoshop 的話完全可以自己導出：
將圖片在 ps 中打開，然后點擊菜單欄 “文件” 菜單，選擇 “儲存為 web 所用格式”，出現(xiàn)如下對話框：
一般情況下 jpg 圖片選擇品質(zhì)中即可，png 格式圖片選擇 png8 即可，但注意有透明背景的 png 圖片要選擇 png24 ，否則透明背景中會出現(xiàn)白邊，gif 圖片選擇 gif64 無仿色即可。
一般經(jīng)過優(yōu)化的圖片大小至少會有 3倍 之差，圖片原大小越大優(yōu)化的結果會越好。
博主的網(wǎng)站最顯眼的圖片就是頁眉上那個幽鬼的圖片啦，所以就先拿它開刀，經(jīng)過以上步驟優(yōu)化：
瞬間減小 4 倍，實際效果（https://www.rapospectre.com）可以看看，代表著博主門面的圖片經(jīng)過優(yōu)化后和優(yōu)化前顯示效果并沒有明顯區(qū)別，而文件大小卻相差了 4 倍。
3. 使用免費 cdn 加載第三方資源
所有網(wǎng)站都會用到第三方資源，對于第三方資源，如果選擇讓自己的服務器提供，那么對于小型站點，本就不大的帶寬相當一部分還要被公共資源占用，無形之中壓縮了服務器帶寬，如果把這部分資源讓第三方 cdn 提供，那么對于網(wǎng)站加載速度會有不小的提升。
博主選用的是 bootstrap 中文站提供的 cdn 靜態(tài)庫 （https://www.bootcdn.cn/），博主看過不少國內(nèi) cdn 靜態(tài)庫，可以說 bootstrap 家的還是很良心的，更新及時，資源現(xiàn)在也很豐富，基本博主用的三方資源都能在上面找到，于是接下來就是搜索靜態(tài)資源 ＋ 替換靜態(tài)資源：
這里不要寫協(xié)議頭，讓網(wǎng)頁自動判斷使用 http 還是 https （ 關于 https 網(wǎng)站的部署可以看博主之前的文章： 給你的網(wǎng)站穿上外衣－ HTTPS 免費部署指南 https://www.rapospectre.com/blog/https-deploy-guide）
4. 使用 cdn 儲存靜態(tài)資源
一般網(wǎng)站 90% 的流量都用于靜態(tài)資源的加載，除了用免費 cdn 加載第三方資源，還可以自己申請云空間儲存自己的靜態(tài)資源，進一步減小服務器的開銷，讓服務器只專注于提供數(shù)據(jù)或者網(wǎng)頁渲染服務。 比如博主使用的是 X牛 ，將自己的圖片什么都存在 x牛上，每個月都有免費流量，對于個人網(wǎng)站來說應該夠用。
5. 合并壓縮 js css
除去引用公共庫，網(wǎng)頁中還有許多自己寫的 js 與 css，如果我們直接把開發(fā)環(huán)境的文件拿來用無疑很浪費流量，因此在編寫好網(wǎng)頁測試完畢后，我們應該將 css 和 js 壓縮合并成一個或者幾個文件，這樣既減少了請求次數(shù)又減少了流量消耗，一箭雙雕。 當然還有 html 壓縮，不過 ms 現(xiàn)階段還有一些坑，就先不用了。 說到合并壓縮，第一時間播追就想到了 webpack ，前端工程化神器，簡單配置一下就可以完全搞定任務：
博主網(wǎng)站自己的 js 工程文件放在 /webroot/static/src/js/ 中，假如我們要將壓縮合并后的文件放在 /webroot/static/dist/js/ 中：
在 /webroot/ 下新建文件夾 webpack, 進入文件夾，新建文件 package.json:
保存后執(zhí)行：
這里要注意的是如果你的 js 文件間的引用是傳統(tǒng)的 html 引入后引用那么在這里合并時記得把你被引用的方法\對象等等設置為全局，比如 b.js 要引用 a.js 中的函數(shù) c，合并前要在 a.js 中加上（ 當然如果你一直用 es6/node 寫 js 就不用看這里了 ）：
不然 c 就會被當作局部函數(shù)封裝起來。
改完后運行 webpack 提示成功后看到 dist 目錄里已經(jīng)輸出了合并壓縮好的文件，之前 12kb 的文件經(jīng)過壓縮合并后只有 6kb 大小，然后我們將其替換到網(wǎng)頁中即可。
6. 代碼優(yōu)化
頁面代碼的優(yōu)化對于頁面加載速度也有不小的影響，最廣為人知的：
HTML頭部的JavaScript和寫在HTML標簽中的Style會阻塞頁面的渲染，因此CSS放在頁面頭部并使用Link方式引入，JavaScript的引入放在頁面尾
其次還有：
按需加載，把統(tǒng)計、分享等 js 在頁面 onload 后再進行加載，可以提高訪問速度；
優(yōu)化 cookie ，減少 cookie 體積；
避免 的 src 為空；
盡量避免設置圖片大小，多次重設圖片大小會引發(fā)圖片的多次重繪，影響性能；
合理使用display屬性：
a.display:inline后不應該再使用width、height、margin、padding以及float
b.display:inline-block后不應該再使用float
c.display:block后不應該再使用vertical-align
d.display:table-*后不應該再使用margin或者float
不濫用Float 和 web 字體；
盡量使用CSS3動畫；
使用 ajax 異步加載部分請求；
7. HTTP2 與 gzip
HTTP2 是以 SPDY 為基礎開發(fā)的。 SPDY 系列協(xié)議由谷歌開發(fā)，于 2009 年公開。它的設計目標就是降低 50% 的頁面加載時間，所以 HTTP2 在很大程度也是為了優(yōu)化頁面加載時間，同時 HTTP2 支持多路復用，簡單說就是所有的請求都通過一個 TCP 連接并發(fā)完成。 而 gzip 大家都不陌生，就是一種壓縮網(wǎng)頁的技術，當然壓縮網(wǎng)頁進行傳輸?shù)拇鷥r就是給服務器增加一些壓縮的負擔，當然這種犧牲是值得的。
如何開啟 HTTP2 與 gzip？ 博主的網(wǎng)站基于 nginx + uWSGI 進行服務，因此只要在 nginx 開啟 HTTP2 與 gzip 就好：
開啟 HTTP2
nginx 1.9.5 之后才支持 HTTP2 ，而且需要配置編譯參數(shù)，關于 nginx 開啟 HTTP2 請直接移步博主之前的文章： nginx 配置 http2
開啟 gzip
直接打開 nginx 配置文件, 比如博主的在 /etc/nginx/nginx.conf， 然后加上：
然后重啟 nginx 即可
最后，讓我們清除緩存，再次打開網(wǎng)站：
總加載流量 527kb ，頁面完成加載時間 1.84s，對比之前加載時間 8.18s ，1.38MB 流量，整體時間提升了 4 倍多！用手機端訪問測試，簡直快的飛起，不信你也來訪問( 騙流量臉 )試試呀～
