.htaccessでサイト表示を早くする方法

とりあえず指定

wordpress入れてたら「# END WordPress」の後ろにコピペ

# キャッシュの設定
<ifModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/js "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType application/x-font-ttf "access plus 1 month"
ExpiresByType application/x-font-woff "access plus 1 month"
ExpiresByType application/x-font-woff2 "access plus 1 month"
ExpiresByType application/x-font-opentype "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
</IfModule>

# 転送高速化（gzip圧縮）の設定
<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
BrowserMatch ^Mozilla/4.0[678] no-gzip
BrowserMatch ^Mozilla/4 gzip-only-text/html
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>

1つずつ軽く調べてみた

キャッシュの設定

「mod_expires」モジュールを使って、キャッシュを設定することでアクセスするたびにファイルを読み込まずに済み表示を早くすることができる

<ifModule mod_expires.c>
# mod_expiresを有効にする記述
ExpiresActive On
# ExpiresByTypeの後にMINIタイプを指定でキャッシュを有効にする
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/js "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType application/x-font-ttf "access plus 1 month"
ExpiresByType application/x-font-woff "access plus 1 month"
ExpiresByType application/x-font-woff2 "access plus 1 month"
ExpiresByType application/x-font-opentype "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
</IfModule>

Apacheで用意された「mod_expires」モジュールというものを使ってアクセスしてから1ヶ月間キャッシュを利用するという記述
「1 month」変えればキャッシュ利用期間変えれる「1 weeks」「1 day」「12 hours」みたいに

▼後で見たい
http://aimstogeek.hatenablog.com/entry/2018/01/17/154537

転送高速化（gzip圧縮）の設定

なんかよくわからないけど、圧縮して転送量を減らす方法らしい
転送量が減る代わりにCPUの処理が遅くなるから、実装した後に「PageSpeed Insights
」で個々に速度検証した方がいいっぽい

<IfModule mod_deflate.c>
# mod_deflateを有効にする記述
SetOutputFilter DEFLATE

# 古いMozillaなどの古いブラウザでは無効にする。例外としてIEは有効にする
BrowserMatch ^Mozilla/4.0[678] no-gzip
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch bMSI[E] !no-gzip !gzip-only-text/html
    
# 画像は2重圧縮になるので圧縮しない
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  #HTMLファイル
AddOutputFilterByType DEFLATE text/xml   #XMLファイル(1)
AddOutputFilterByType DEFLATE text/css   #CSSファイル
AddOutputFilterByType DEFLATE application/xhtml+xml #XHTMLファイル
AddOutputFilterByType DEFLATE application/xml           #XMLファイル(2)
AddOutputFilterByType DEFLATE application/rss+xml    #XMLファイル(3:rss形式)
AddOutputFilterByType DEFLATE application/atom_xml #XMLファイル(4:atom形式)
AddOutputFilterByType DEFLATE application/x-javascript #JavaScriptファイル
AddOutputFilterByType DEFLATE application/x-httpd-php #PHPファイル
</IfModule>

おまけ：IfModuleって何

「IfModule」ってなんだろうと思って調べてみたけど指定したモジュールが存在するかどうかの条件分岐だった
<ifModule mod_expires.c>だったら「mod_expires」というモジュールがサーバーにあったら利用するって記述みたい。