WordPress サイトの表示速度を上げる改善策 #02

Javascript、CSSファイルの圧縮処理をしてサイトの表示速度を上げる方法を紹介します。
今回はJavascriptとCSSのgzip圧縮に取り組みました。

前回はJavascriptの非同期処理をしました。
非同期処理の対策をしたあと、GTmetrixで調べたサイトの表示速度は、Page SpeedはグレードB、YSlowはグレードDでした。
GTmetrix pagespeed

JavascriptとCSSファイルをgzip圧縮した結果

JavascriptとCSSファイルのgzip圧縮をしたあとの表示速度を、GTmetrixで調べたました。
結果、表示速度はPage load time: 4.12sになりました。
Page SpeedのグレードはAに上がり、YSlowはグレードDと変わらずです。
jscss-gzip
Page SpeedはGoogleの、YSlow GradeはYahooのルールにWebページが適切に構築されているかを測定しています。

gzip圧縮ファイルの作り方

Macはアプリケーションの中のユーティリティにある、ターミナルを使います。
ターミナルを立ち上げるとこのような画面になります。

terminal

$のあとにgzipと打ち込み、半角スペースを入れます。

terminal

圧縮するjsやcssファイルをターミナルの画面にドラッグ&ドロップします。
ターミナルのウィンドウにファイル名が表示されます。Enterキーを押すと、圧縮ファイルが作られます。

terminal

圧縮ファイルの拡張子には.gzがつきます。javascriptファイルは.js.gz、cssファイルは.css.gzになります。
例えば、style.cssを圧縮するとstyle.css.gzになります。
圧縮したファイルと圧縮する前のファイル(拡張子は.jsと.css)両方をサーバーにアップロードします。
両方アップするとサーバー上にはstyle.cssとstyle.css.gzの2種類になります。

.htaccessでgzip圧縮ファイルを有効にする

gzip圧縮ファイルを有効にするための命令を、.htaccess(ドットエイチティーアクセス)ファイルに書きます。
WordPressをインストールしているルートディレクトリに.htaccessファイルがある場合は、そのファイルをダウンロードしてコードを追加します。
.htaccessファイルにコードを追加する前に必ずバックアップを取りましょう。

.htaccessにgzip圧縮ファイルを許容し対応していればそのgzip圧縮ファイルを使い、対応してなければ圧縮していないファイルを呼び出すための命令を記述します。
Javascript、CSSファイルの場合、gzip圧縮ファイルがあればそのファイルを、ない場合は圧縮していないファイルを呼び出す命令を記述します。
最後の行を改行し、空白の行にします。

RewriteEngine On  ”# 書き換えエンジンを有効に”
RewriteCond %{HTTP:Accept-Encoding} gzip “# gzipが許容されていれば”
RewriteCond %{REQUEST_FILENAME} !\.gz$ “# 拡張子が「.gz」でなければ次へ”
RewriteCond %{REQUEST_FILENAME}\.gz -s “# 元のファイルの末尾に「.gz」を付与したファイルが存在すれば次へ”
RewriteCond %{REQUEST_FILENAME} \.js$ [OR] “# JavaScript ファイルまたは”
RewriteCond %{REQUEST_FILENAME} \.css$ “# CSS ファイルの場合”
RewriteRule .+ %{REQUEST_URI}.gz “# URIの末尾に「.gz」をつける”
“# FileMatchでファイル毎に MIME-TYPE と gz エンコードを指定”
参考:ページの表示速度を改善する方法

gzip圧縮されているかの確認

gzip圧縮されているかを確認できるWebサービスがあります。
GIDNetwork
Web Page URL:と書いてあるフォームにサイトのURLを入力しCheckをクリックします。
Web page compressed? Yes で有効になっています。
GIDnetwork

Windowsでgzip圧縮ファイルを作成する場合

Windowsではファイル圧縮・解凍ソフトLhaplusや7-Zipをご利用ください。
Lhaplus(窓の杜)
http://www.forest.impress.co.jp/library/software/lhaplus/
Lhaplus(Vectoer)
http://www.vector.co.jp/soft/win95/util/se169348.html

gzip圧縮前にファイルをMinify化する場合

Minifyとはファイルの余分なスペース、改行、インデントなどの不要なバイトを取り除くことになります。
エラーが発生する場合があるので、作業前にバックアップファイルを作ってください。
JavascriptとCSSファイルの圧縮(Minify:ミニファイ)する場合は、Webサービスやツールがあります。

MinifyのWEBサービス、ツール、プラグイン

gzip圧縮、.htaccess参考サイト

gzip圧縮のまとめ

gzip圧縮ファイルを作ることにより、Page SpeedはグレードはAに上がりました。
あくまで目安ですので、あまりこだわりすぎないようにしたいと思いますが、YSlowのグレードを上げられるように、もう少しほかのことも試してみます。

Macのターミナルを使うことや.htaccessファイルに追加することは、習慣になっていないため緊張しますが、
.htaccessについては元ファイルのバックアップを保存し、エラーが出た場合は元に戻せるようにしておけばいいので、必要な設定があればこれからも追加をしていきたいと思います。

今回このサイトではJavascriptとCSSファイルのMinify化していません。
今後の参考のため、Minifyのツールや、Webサービスもメモとして載せています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Share・Feedly

関連記事