Google PageSpeed Insightsより
リソースを圧縮して表示速度を改善する方法
今回は、PageSpeed Insightsの速度に関するルールから、「リソースの圧縮をする」をテーマに取り上げます。
Google PageSpeed Insightsより
「リソースを圧縮する」に関しての内容
- ソースの中の不要な部分を除いてコードを圧縮
- 圧縮することでページスピードが上がる
- CSS、JavaScriptは変数名を変更することで更にファイルサイズを削減できる
リソース（HTML、CSS、JavaScript）を圧縮する – PageSpeed Insights — Google Developers
至極単純です。とにかく無駄な部分を省き、速度改善を目指します。
推奨される解決方法
リソースの圧縮に関して、下記で紹介されているツールを使用することが推奨されています。
- HTMLの圧縮
PageSpeed Insights の Chrome 拡張機能を使って、HTMLコードの最適化されたバージョンを生成できます。
- CSSの圧縮
YUI Compressorとcss.min.jsを使用できます。
- JavaScriptの圧縮
Closure Compiler、JSMin、YUI Compressorを使用できます。
それでは各ファイルについて、圧縮するツールの使用手順を記載していきます。
参考となるサイトURLも記載しておりますので、併せてご参照下さい。
いずれも非常にわかりやすくまとめられております。
【HTML】PageSpeed InsightsのChrome拡張機能の使い方
まずChromeで拡張機能をインストールします。
下記のダウンロードページからインストール可能です。
PageSpeed Insights for Google Chrome
手順
- 調べたいWEBページをChromeで開く
- 右上にある「≡」マークをクリック→[その他ツール]→[デベロッパーツール]
- ブラウザの下方にデベロッパーツールが開くので、その上部の「PageSpeed」をクリックし、続けて「分析を開始」ボタンをクリック
- 「提案の概要」が表示されるので、各修正箇所に対する提案に従い、改善
【CSS・JavaScript】Online JavaScript/CSS Compressorの使い方
CSS、JavaScriptのフォルダをペーストするだけで自動で圧縮してくれるツールです。
ここではOnline JavaScript/CSS Compressorの使い方を記載します。
Refresh-SF – Online JavaScript and CSS Compressor
手順
- Refresh-SF – Online JavaScript and CSS Compressorにアクセス
- 「Input」の部分にCSS or JavaScriptのファイルをペースト
- 圧縮する対象のファイルに応じて右上のJavaScript/CSSをクリック
- 圧縮コードが生成される
【Before】
【After】※圧縮すると後から編集しにくくなるので、バックアップはお忘れなく。
【JavaScript】Closure Compilerの使い方
通常のコード圧縮に加えて、2つのJavaScriptを1つのJavaScriptにまとめることも
できる優れものです。ここでは後者の手順を紹介します。
※Javaがインストールされていない場合、別途インストールが必要です。
2つのJavaScriptファイルの連結の手順
- 次の引数で実行します。
java -jar compiler.jar --js=in1.js --js=in2.js ... --js_output_file=out.js
–js= で入力ファイルを指定し、 –js_output_file= に出力ファイルを記入
- 2つのJavaScriptファイルが1つにまとめられ、out.jsとして出力されます。
まとめ
リソースの圧縮は、ツールを使用することで手軽に行うことができる、ページ速度改善の手法の一つです。
速度改善をコツコツと積み重ねていきましょう。
