蛙蛙推薦：五分鐘搞定網站前端效能優化

蛙蛙王子發表於2013-08-09
網站前端優化

用pagespeed或yslow會發現大多扣分都發生在如下幾個專案上

  1. js,css沒有mini化
  2. 多個js沒有合併成一個
  3. 靜態資源沒有進行gzip壓縮
  4. 靜態資源沒有設定過期時間

mini化及合併指令碼

先安裝uglifyJS

npm install uglify-js -g

按順序把所有需要載入的指令碼mini化併合併成一個大的all.js, 或者分下類壓縮成多個。(如果用了seajs或requirejs請使用相關的spm和r.js)

uglifyjs jquery.min.js mustache.js underscore.js highcharts.js jquery.vector-map.js china-zh.js warning_main.js  > all.js

在html頁面上重新引入all.js

<script src="/static/js/all.js"></script>

啟用gzip壓縮

配置下nginx就行，如下

gzip on;
gzip_http_version 1.1;
gzip_comp_level 2;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;

設定過期時間

在nginx相關的location配置節(一般是靜態目錄配置節)裡增加如下選項

expires 1h;

總結

經過以上優化pagespeed和yslow會從30多分提高到80分左右。

相關文章