HTTP通信の転送ファイルを圧縮してページ表示速度を上げる方法（.htaccessのmod_deflateを使用）

#はじめに
Webサイトの表示速度が検索順位にも影響すると言われています。
Googleの『<a href="https://developers.google.com/speed/pagespeed/insights/">PageSpeed Insights</a>』などを使いながらチューニングしていくのですが、手っ取り早くスコアを上げる方法です。

Apacheのmod_deflateというモジュールを使って、対応します。
とりあえず、.htaccessに以下のように書いてみて、特にサーバエラーが出なければOKです。

#貼り付けたソース
ちなみに、.htaccessをこのソースをコピペしただけです！

==ここから==
‘‘‘
<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

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
</IfModule>

<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType text/html "access plus 1 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 216000 seconds"
ExpiresByType application/x-javascript "access plus 216000 seconds"
ExpiresByType application/x-shockwave-flash "access plus 216000 seconds"
</ifModule>

FileETag none

<FilesMatch "^(wp-config\.php|wp-mail\.php|install\.php|\.ht)">
order allow,deny
deny from all
</FilesMatch>
‘‘‘
==ここまで==


論より証拠で、私のサイトで実験してみましたので、Before&Afterで比較してみてください。

まず、私の公式サイト（<a href='http://hirajo.com'>http://hirajo.com</a>）の場合を紹介します。

#平城寿の公式サイトの場合
##適用前（Before)
PCサイト：58点
スマホサイト:55点

<img width="1430" alt="デフォルト 2017-09-11 22.42.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/164635/976c4b08-a79e-7367-42ff-13c997c703bd.png">
<img width="1430" alt="デフォルト 2017-09-11 22.42.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/164635/8e064b75-c1e3-b00d-00bd-d07a43154d64.png">

##適用後（After）
PCサイト：75点（⇒17点アップ！）
スマホサイト:66点（⇒11点アップ！）

<img width="1442" alt="デフォルト 2017-09-11 22.41.31.png" src="https://qiita-image-store.s3.amazonaws.com/0/164635/45d455e3-c304-7055-562e-9359e56cf69d.png">
<img width="1435" alt="デフォルト 2017-09-11 22.41.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/164635/4799da34-cd35-6fc0-8784-625c8127b97d.png">

とかなり劇的に改善しました！


こんなに手軽に改善するのは素敵ですね！

調子にのって私が運営する@SOHO（<a href="http://www.atsoho.com/">http://www.atsoho.com/</a>）にも反映させてみました！

#@SOHOの場合
##適用前（Before)
PCサイト：60点
スマホサイト:41点

<img width="1473" alt="デフォルト 2017-09-11 22.51.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/164635/170af0e8-e694-cfe7-f97e-59c22fd90a30.png">
<img width="1467" alt="デフォルト 2017-09-11 22.51.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/164635/96c25838-07c0-cf37-7f5f-3796c02b8a0a.png">


##適用後（After)
PCサイト：70点（⇒10点アップ！）
スマホサイト:60点（⇒19点アップ！）

<img width="1450" alt="デフォルト 2017-09-11 22.50.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/164635/e3ff4960-fae1-a641-d1e6-011df9602dc2.png">
<img width="1464" alt="デフォルト 2017-09-11 22.50.38.png" src="https://qiita-image-store.s3.amazonaws.com/0/164635/69b33e83-3108-be6f-c49e-70db9aa5fad4.png">

と、かなり改善しました^^

私の公式サイトはWordPressで@SOHOはWordPressではないので、WordPressであるかどうかに関わらず、効果があるようです。
コピペだけで10点以上改善するわけなので、これはやらない手はないですね！