カエルの推薦:5分でウェブサイトのフロントエンドの性能の最適化を完成します

pagespeedやyslowを使うと、多くの減点が以下のいくつかの項目で発生していることがわかります.

js,cssはmini化されていない

以上のjsは1つの

に統合されていない.

静的リソースはgzip圧縮を行わなかった

静的リソースに有効期限が設定されていない

mini化およびマージスクリプト
先にuglifyJSをインストールする

npm install uglify-js -g

ロードするスクリプトminiをすべて順番に1つの大きな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点程度に向上する.