昨年末に当ブログのレスポンシブデザインによるスマホ対応版をリリースしました。それが功を奏したのか、スマホ対応後、モバイル（タブレットを含む）経由のトラフィックが増えました。そこで心配になってきたのが、スマホなどモバイルデバイスでのパフォーマンス面です。できる限りサクサク表示してもらいたいという思いで、まずはHTML、CSS、JavaScriptのサイズ縮小/圧縮（Minify）による軽量化を行うことにしました。
はじめに
HTML、CSS、JavaScriptのサイズ縮小/圧縮による軽量化はモバイルファーストを実現する上で重要なファクターとなってきています。Googleもすでにページの表示速度が検索順位に影響を及ぼすとしています。自分のブログも今モバイル（タブレットを含む）経由のアクセスが増えてきているので、このタイミングでWordPressのパフォーマンスの改善に取り組むことにした次第です。今回自分の行った方法を紹介します。
なお、自分の場合、WordPressのテーマはローカルで開発していて、今回の施策ではGruntをメインで使っています。なので、Gruntがすでにインストールされていることを前提に話を進めていきます。Gruntのインストールの仕方などは以前書いた以下の記事を参考にしてください。
HTMLの縮小/圧縮
HTMLの縮小/圧縮には、WordPressのプラグイン「WP-HTML-Compression」を使いました。WordPressのシステムを通して吐き出されたHTMLをいい感じで圧縮してくれます。記事を書くときは、ファイルサイズのことは一切に気にせず、好きなだけ改行やスペースなどを使って見やすく書いていくことができるようになります。
使い方はいたって簡単です。ダッシュボード経由で当プラグインをインストールして、有効化するだけです。特に設定などは必要ないです。あとは勝手にHTMLを圧縮してくれます。
HTMLだけじゃなく、CSSもJavaScriptも一気に圧縮できる「Autoptimize」というWordPressプラグインもあります。こちらもおすすめです。
CSSファイルの縮小/圧縮
CSSファイルの縮小/圧縮には、Gruntのプラグイン「grunt-contrib-cssmin」を使って行いました。
WordPressテーマのフォルダに移動して、以下のコマンドでgrunt-contrib-cssminをインストールします。
$ npm install grunt-contrib-cssmin --save-devGruntfile.jsファイルには以下のように記述します。
module.exports = function (grunt) {
var pkg = grunt.file.readJSON('package.json');
grunt.initConfig({
cssmin: {
minify: {
files: {
// 圧縮後のファイル: 圧縮前のファイル[配列で複数指定可]
'style.css': ['css/index.css', 'css/single.css', 'css/style.css']
}
}
}
});
// プラグインの読み込み
grunt.loadNpmTasks('grunt-contrib-cssmin');
};
JSファイルの縮小/圧縮
JSファイルの縮小/圧縮には、Gruntのプラグイン「grunt-contrib-uglify」を使って行いました。
WordPressテーマのフォルダに移動して、以下のコマンドでgrunt-contrib-uglifyをインストールします。
$ npm install grunt-contrib-uglify -save-devGruntfile.jsファイルには以下のように記述します。
module.exports = function (grunt) {
var pkg = grunt.file.readJSON('package.json');
grunt.initConfig({
uglify: {
dist: {
files: {
// 圧縮後のファイル: 圧縮前のファイル[配列で複数指定可]
'js/function.min.js': 'js/function.js'
}
}
}
});
// プラグインの読み込み
grunt.loadNpmTasks('grunt-contrib-uglify');
};
縮小/圧縮の自動化とGruntfile.jsの記述方法
HTMLの縮小/圧縮については、先に説明したWordPressのプラグイン「WP-HTML-Compression」を入れておけば勝手にやってくれます。CSSファイルとJSファイルも同様にファイルを更新したら自動で縮小/圧縮してくれたら嬉しいですね。こちらについては、Gruntのプラグイン「grunt-contrib-watch」を使って行います。
grunt-contrib-watchはファイル状態を監視するプラグインです。以下のコマンドでインストールします。
$ npm install grunt-contrib-watch -save-devGruntfile.jsファイルの記述方法は以下となります。上記のcssとjsの縮小/圧縮のところで書いた記述もまとめてしまいます。
module.exports = function (grunt) {
var pkg = grunt.file.readJSON('package.json');
grunt.initConfig({
// cssファイルの縮小/圧縮のタスク内容
cssmin: {
minify: {
files: {
// 圧縮後のファイル: 圧縮前のファイル[配列で複数指定可]
'style.css': ['css/index.css', 'css/single.css', 'css/style.css']
}
}
},
// jsファイルの縮小/圧縮のタスク内容
uglify: {
dist: {
files: {
// 圧縮後のファイル: 圧縮前のファイル[配列で複数指定可]
'js/function.min.js': 'js/function.js'
}
}
},
// ファイル更新を監視するタスク内容
watch: {
css: {
// 更新を監視したいファイル
files: ['css/index.css', 'css/single.css', 'css/style.css'],
// 変更を感知した時に実行するタスク
tasks: 'cssmin'
},
js: {
// 更新を監視したいファイル
files: 'js/function.js',
// 変更を感知した時に実行するタスク
tasks: 'uglify'
}
});
// プラグインの読み込み
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-uglify');
};
以下のコマンドでファイルの更新の監視を開始します。ファイルを更新するたびにファイルの縮小/圧縮のタスクが実行されるようになります。
$ grunt watchgzip圧縮
とりあえず、上記の施策でHTML、CSS、JavaScriptの縮小/圧縮は行えますが、以下の記事にあるように、gzip化した方が効果は絶大ということなので、最後にgzip化する方法も書いておきます。
まず、以下のサイトを使うと、対象のサイトがgzip化されているか確認することができます。
gzip圧縮を行うためにApacheのmod_deflateモジュールを使います。クライアントに送る前にコンテンツを圧縮してくれます。.htaccessファイルに以下を追記することで、mod_deflateモジュールを使うことができるようになります。
<ifModule mod_deflate.c>
SetOutputFilter DEFLATE
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI _\.utxt$ no-gzip
</ifModule>
以上、今回私が当ブログで行ったHTML、CSS、JavaScriptの縮小/圧縮方法となります。縮小化が完了したら、Googleのパフォーマンス測定ツール「PageSpeed Insights」でどんな評価がされるか確認してみましょう。
最後にサイトパフォーマンスのバイブル的書籍を紹介しておきます。今回紹介したファイルの縮小/圧縮についても詳しく載っています。
著者: Steve Souders / 訳者: 武舎 広幸, 福地 太郎, 武舎 るみ
出版社: オライリージャパン
発売日: 2010年4月10日
ISBN: 4873114462
⇒Amazon.co.jpで詳細を見る
コメント