ブログのAMP対応と表示速度の改善

ブラウザのキャッシュを活用する

これが意外と効果があったような感じがしますが、ブラウザのキャッシュ機能は、一度訪れたことのある再訪者に対して、読者のブラウザに残っている画像などを再利用してもらうための設定です。

.htaccessへの記述の追記

WEB言語をいろいろいじるにはまだ知識不足で怖いところもありますが、いろいろ教えてもらいつつ.htaccessへ記述を追記してみました。失敗するとブログがダウンするかもという恐怖と戦いながらの作業です。

# ETagsを無視
<ifModule mod_headers.c>
Header unset ETag
</ifModule>
FileETag None

# Enable Keep-Aliveの設定
<IfModule mod_headers.c>
Header set Connection keep-alive
</IfModule>

# MIME Typeの追加
<IfModule mime_module>
AddType text/cache-manifest .appcache
AddType image/x-icon .ico
AddType image/svg+xml .svg
AddType application/x-font-ttf .ttf
AddType application/x-font-woff .woff
AddType application/x-font-woff2 .woff2
AddType application/x-font-opentype .otf
AddType application/vnd.ms-fontobject .eot
</IfModule>

# プロクシキャッシュ(画像とフォントをキャッシュ)の設定
<IfModule mod_headers.c>
<FilesMatch “\.(ico|jpe?g|png|gif|svg|swf|pdf|ttf|woff|woff2|otf|eot)$”>
Header set Cache-Control “max-age=604800, public”
</FilesMatch>
# プロキシサーバーが間違ったコンテンツを配布停止
Header append Vary Accept-Encoding env=!dont-vary
</IfModule>

# ブラウザキャッシュの設定
<IfModule mod_headers.c>
<ifModule mod_expires.c>
ExpiresActive On

# キャッシュ初期化(1sに設定)
ExpiresDefault “access plus 1 seconds”

# MIME Type毎の設定
ExpiresByType text/css “access plus 1 weeks”
ExpiresByType text/js “access plus 1 weeks”
ExpiresByType text/javascript “access plus 1 weeks”
ExpiresByType image/gif “access plus 1 weeks”
ExpiresByType image/jpeg “access plus 1 weeks”
ExpiresByType image/png “access plus 1 weeks”
ExpiresByType image/svg+xml “access plus 1 year”
ExpiresByType application/pdf “access plus 1 weeks”
ExpiresByType application/javascript “access plus 1 weeks”
ExpiresByType application/x-javascript “access plus 1 weeks”
ExpiresByType application/x-shockwave-flash “access plus 1 weeks”
ExpiresByType application/x-font-ttf “access plus 1 year”
ExpiresByType application/x-font-woff “access plus 1 year”
ExpiresByType application/x-font-woff2 “access plus 1 year”
ExpiresByType application/x-font-opentype “access plus 1 year”
ExpiresByType application/vnd.ms-fontobject “access plus 1 year”
</IfModule>
</IfModule>

# 画像など圧縮済みのコンテンツは再圧縮なし
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico|eot|woff|woff2)$ no-gzip dont-vary

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/js
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-font-opentype
</IfModule>