蛙蛙推薦:五分鐘搞定網站前端性能優化

用pagespeed或yslow會發現大多扣分都發生在以下幾個項目上javascript

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

mini化及合併腳本

先安裝uglifyJScss

npm install uglify-js -g

按順序把全部須要加載的腳本mini化併合併成一個大的all.js, 或者分下類壓縮成多個。(若是用了seajs或requirejs請使用相關的spm和r.js)html

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

在html頁面上從新引入all.jsjava

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

啓用gzip壓縮

配置下nginx就行,以下jquery

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配置節(通常是靜態目錄配置節)裏增長以下選項nginx

expires 1h;

總結

通過以上優化pagespeed和yslow會從30多分提升到80分左右。git

相關文章
相關標籤/搜索