轉： web 頁面加載速度優化實戰-100% 的飛躍提高

前言

一個網站的加載速度有多重要？ 反正我相信以前來 博主網站 的人至少有 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. 避免 <img> 的 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 ，並且須要配置編譯參數。

開啓 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 倍多！用手機端訪問測試，簡直快的飛起，不信你也來[訪問] 1 試試呀～

原文章：http://blog.csdn.net/hj7jay/article/details/52770285