.htaccsessとは

この記事はMojirageアドベントカレンダーの22日目の記事です。
matatsuna.hatenablog.com

.htaccsessとは

一時期、阿部寛のHPが軽いという話が話題になりました
rocketnews24.com

その話題を受けて、これはmojirageも爆速を目指さなければとページ高速化について学習しました
そのときに必要になったのが.htaccsessです

ファイル

いろんなサイトを参考に今回設定したのはこれです

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
Header append Vary User-Agent env=!dont-vary
<Files ~ ".(gif|jpe?g|png|ico|otf|ttf|eot|woff)$">
	Header set Cache-Control "max-age=2592000, public"
</Files>

<Files ~ ".(css|js|html|gz)$">
	Header set Cache-Control "max-age=2592000, public"
</Files>
# Enable Keep-Alive を設定
<IfModule mod_headers.c>
    Header set Connection keep-alive
</IfModule>

主にやってること

gzipの有効

通信するときにzipされたファイルで行うため通信量を抑えることが出来ます
しかし、毎回zipするためリソースが食われます
syncer.jp

キャッシュの有効

ブラウザのキャッシュを有効にしておくと、アクセスしたさいのリクエストを減らすことができ、高速化することが出来ます
しかし、変更したjsファイルがなかなか反映されないということも考えられるので注意が必要です
syncer.jp

keep-aliveの有効

一度に大量にファイルをやりとり際に複数のリクエストを受け付けるのではなくて、一度のリクエストで多くのファイルをやりとりするらしいです
しかし、1ユーザーにリソースを持っていかれる可能性があるので慎重にとどこかに書いてあった気がします
thk.kanzae.net

高速化の指標になるサイト

PageSpeed Insights

googleの検索順位にも関わってくるそう、問題指摘も日本語なので親切
PageSpeed Insights
ちなみに、現状はこんな感じです
gyazo.com

WEBPAGETEST

細かく測ってくれる
https://www.webpagetest.org/
現状、阿部さんのサイトよりも高得点ですw
gyazo.com
qiita.com

デモ環境のネット回線がテザリングしかなく不安定なときがあったのでこの設定をしていて助かりました