サイトのパフォーマンス改善

ウェブサイトのパフォーマンス（表示速度）を改善するための覚書です。ページの読み込み時間が短くなることで閲覧者に与えるストレスを軽減することができます。

ウェブページのパフォーマンス測定オンラインツール

PageSpeed Insights
GTmetrix
HTTP Compression Test …サーバーが圧縮データを送信しているかチェック

CSS・javascriptの軽量化オンラインツール

.htaccessによるキャッシュの制御・gzip圧縮

キャッシュの制御の記述一例

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/gif "access plus 6 months"
ExpiresByType image/jpeg "access plus 6 months"
ExpiresByType image/png "access plus 6 months"
ExpiresByType image/x-icon "access plus 6 months"
ExpiresByType text/css "access plus 1 months"
ExpiresByType text/javascript "access plus 1 months"
ExpiresByType application/javascript "access plus 1 months"
</IfModule>

mod_deflate モジュールによるデータ圧縮の記述一例（画像やPDFはすでに圧縮されているため除外）

<ifModule mod_deflate.c>
SetOutputFilter DEFLATE
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico|pdf)$ no-gzip dont-vary
AddOutputFilterByType DEFLATE text/html text/xml text/css text/plain
AddOutputFilterByType DEFLATE image/svg+xml application/xhtml+xml application/xml
AddOutputFilterByType DEFLATE application/rdf+xml application/rss+xml application/atom+xml
AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript application/json
AddOutputFilterByType DEFLATE application/x-httpd-php application/x-httpd-fastphp
AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-otf
AddOutputFilterByType DEFLATE font/truetype font/opentype
</ifModule>

レンタルサーバによってはこの記述がなくても圧縮したデータを送信する設定になっている場合があるので先に上述のチェックサイトでチェックしておくと吉。