WordPressの高速化「圧縮を有効にする」。さくらのレンタルサーバーで.htaccessファイルを作成と編集

2015年3月11日2017年11月19日

以前、WordPressプラグインのW3 Total Cacheを使って、サイトの高速化をする記事を書きました。そのときはプラグインを使うことで、PageSpeed Insightsの評価はあがりましたが、まだまだ改善の余地があります。

そこで、今回はGoogle先生からいただいたアドバイスのひとつである、「圧縮を有効にする」ことで、さらなる高速化を図ってみます。ちなみにWordPressは、さくらのレンタルサーバー上にインストールしています。

PageSpeed Insightsからの修正アドバイス

「圧縮を有効にする」の[修正方法を表示]をクリックすると。修正の具体的な内容が分かります。

gzip や deflate を使用してリソースを圧縮することで、ネットワークで送信されるバイト数を減らすことができます。
次のリソースの圧縮を有効にすると、転送サイズを 199.3 KB（71%）削減できます。
http://○○○.ecoteki.com/…morphic2/css/bootstrap.min.css?ver=4.1.1 を圧縮すると 79.4 KB（83%）削減できます。
http://○○○.ecoteki.com/…-includes/js/jquery/jquery.js?ver=1.11.1 を圧縮すると 61.1 KB（65%）削減できます。
http://○○○.ecoteki.com/…s/morphic2/js/bootstrap.min.js?ver=4.1.1 を圧縮すると 20 KB（73%）削減できます。
http://○○○.ecoteki.com/…est/wp-content/themes/morphic2/style.css を圧縮すると 15.6 KB（77%）削減できます。
http://○○○.ecoteki.com/…es/morphic2/css/genericons.css?ver=4.1.1 を圧縮すると 9.6 KB（43%）削減できます。
http://○○○.ecoteki.com/morphic_test/ を圧縮すると 7.1 KB（73%）削減できます。
http://○○○.ecoteki.com/…s/jquery/jquery-migrate.min.js?ver=1.2.1 を圧縮すると 4 KB（57%）削減できます。
http://○○○.ecoteki.com/…hemes/morphic2_child/style.css?ver=4.1.1 を圧縮すると 2.6 KB（74%）削減できます。

.htacceessの作成と圧縮

ではアドバイスに従って、「圧縮を有効」にしていきましょう。といっても、やり方はめっちゃ簡単です。

.htacceessファイルの作成

さくらのレンタルサーバ上でWordPressのルートディレクトリに.htacceessファイルを作成します。

.htacceessファイルの編集

圧縮をかけたいディレクティブを、.htacceessファイルに記述します。自分は以下の内容を記述しました。

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

ちなみにディレクティブとはサーバ全体に適用されたり、特定のディレクトリやファイル、ホスト、URLにのみ適用されるように制限したりすることです。