エコテキブログ

  1. TOPTOP
  2. Webサービス

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

|

Wapuu

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

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

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

wp_highspeed1

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

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ファイルの作成

wp_highspeed2

さくらのレンタルサーバ上で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にのみ適用されるように制限したりすることです。

PageSpeed Insightsの評価

「圧縮を有効にする」ことで、PageSpeed Insightsからの評価はどれぐらい変化したでしょうか？モバイルサイトとPCサイトに分けてご紹介します。なおサンプルはこのブログではなく、別に立てたダミーのブログサイトです。

モバイルサイト

wp_highspeed3

圧縮前は64点でしたが、

wp_highspeed4

圧縮後は76点で、12点上昇しました。

PCサイト

wp_highspeed5

圧縮前は75点。

wp_highspeed6

圧縮後は90点で、表示の色も緑に変わっています。

.htacceessの作成と編集をすることによって、PageSpeed Insightsからは「圧縮を有効にする」というアドバイスを消すことができました。

〔参考サイト〕