蛙蛙推荐:五分钟搞定网站前端性能优化

用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

相关文章
相关标签/搜索