【WordPress】Webフォントありのブログを高速化した、たった1つのこと

ブログが重い

このブログでは、一部ですがWebフォントを使っています。
あとスライダーやカレンダーやら重いものが動いており、
表示スピードがとっても遅く、もたもたしたブログでした。

スピード判定で有名なGT Metrixで検査すると、やっぱり「DD判定」。

有名なプラグインのDB Cache Reloaded、W3Total Cacheも導入していましたが、ボトルネックがあるようで、まったく改善されませんでした。
CSSやJSを圧縮してみたりもしたのですが、DD判定は変わりませんでした。

今回は、GTMetrixのアドバイスに従って、高速化施策を行います。

一瞬で高速化

とても単純で、.htaccessに以下を追記するだけです。


#MIMEタイプ
AddType application/vnd.ms-fontobject .eot
AddType application/x-font-ttf .ttf
AddType application/x-font-opentype .otf
AddType application/x-font-woff .woff
AddType image/svg+xml .svg

<ifModule mod_expires.c>
    ExpiresActive On
    ExpiresDefault "access plus 1 seconds"
    ExpiresByType image/x-icon "access plus 10 days"
    ExpiresByType image/vnd.microsoft.icon "access plus 10 days"
    ExpiresByType image/jpeg "access plus 10 days"
    ExpiresByType image/png "access plus 10 days"
    ExpiresByType image/gif "access plus 10 days"
    ExpiresByType text/css "access plus 10 days"
    ExpiresByType text/javascript "access plus 10 days"
    ExpiresByType application/x-javascript "access plus 10 days"
    ExpiresByType text/html "access plus 600 seconds"
    #フォント
	ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
	ExpiresByType application/x-font-ttf "access plus 1 year"
	ExpiresByType application/x-font-opentype "access plus 1 year"
	ExpiresByType application/x-font-woff "access plus 1 year"
	ExpiresByType image/svg+xml "access plus 1 year"
</ifModule>

追記してからGTMetrixで再度検査すると、いっきに「AC判定」！
感動ものです。
2回目以降のアクセス時の体感速度もかなり速くなりました。

行数としては多いですが、以下で解説します。

なぜ早くなったか？ブラウザキャッシュ設定の重要性

もともとはGTMetrixでの優先度の高い指標「Leverage browser caching」が最悪の判定でした。
どういうことかというと、
本来、CSSやJSや画像はブラウザにキャッシュさせることによって、さっさと動作しているように見せることができるのに、
その設定がブログのサーバー側にないため、ページを開くたび、毎回いちからロードさせていた、ということです。
毎回ロード＝転送量が多い、から遅かったわけです。
特にWebフォントは全部で6MBぐらいあるので、他のリソースに比べてばかみたいに重いわけです。

.htaccessにブラウザキャッシュの設定をいれることによって、
その転送量を大幅に節約され、結果、2回目以降の表示が速くなりました。
※ブラウザキャッシュの設定を入れることによって改善されるのは、2回目以降のアクセス時にのみ有効です。
初回アクセス時には何の意味もありません。

GTMetrixが言うとおり、ブラウザキャッシュの設定が重要ということです。

そもそもW3Total Cacheでブラウザ設定の項目があるのに、まったくできていないってどういうこと・・・？
追々調べることにします。

Webフォント用の設定

上記htaccessの記述では、Webフォント用と、CSSや画像用の記述が混ざっている状態です。
Webフォント用の記述だけを抜き出すと、

#MIMEタイプ
AddType application/vnd.ms-fontobject .eot
AddType application/x-font-ttf .ttf
AddType application/x-font-opentype .otf
AddType application/x-font-woff .woff
AddType image/svg+xml .svg

<ifModule mod_expires.c>
    ExpiresActive On
    ExpiresDefault "access plus 1 seconds"
略
    #フォント
	ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
	ExpiresByType application/x-font-ttf "access plus 1 year"
	ExpiresByType application/x-font-opentype "access plus 1 year"
	ExpiresByType application/x-font-woff "access plus 1 year"
	ExpiresByType image/svg+xml "access plus 1 year"
</ifModule>

のところです。
addTypeでMIMEタイプを定義して、
mod_expires.cのディレクティブでキャッシュ期限の設定をしています。
フォントは変わることはないので、長めに1年としています。

MIME設定はいろいろ記述方法がありますが、今回はこれでうまくいっているのでOKとします。
また、注意事項として、MIMEタイプをaddTypeしてからExpiresを記載しないと、スルーされます。

Webフォント以外のCSS,JavaScript,画像用の設定

残りの下記

<ifModule mod_expires.c>
    ExpiresActive On
    ExpiresDefault "access plus 1 seconds"
    ExpiresByType image/x-icon "access plus 10 days"
    ExpiresByType image/vnd.microsoft.icon "access plus 10 days"
    ExpiresByType image/jpeg "access plus 10 days"
    ExpiresByType image/png "access plus 10 days"
    ExpiresByType image/gif "access plus 10 days"
    ExpiresByType text/css "access plus 10 days"
    ExpiresByType text/javascript "access plus 10 days"
    ExpiresByType application/x-javascript "access plus 10 days"
    ExpiresByType text/html "access plus 600 seconds"
略

がCSS,Javascript,画像用です。

3行目のExpiresDefault “access plus 1 seconds”で一度初期化してから、
それぞれファイルのブラウザキャッシュ有効期限を決めています。
このブログはそんなにデザインや記事などそこまで頻繁に更新しないので、
「10日」にしています。

ちなみにこれだけ入れた状態では「DC判定」でした。

【おまけ】圧縮転送が効かない

高速化について調べていて、JavaScriptなど重いファイルをgzip圧縮して転送するというものがありました。
W3Total Cacheを有効にすると、次の記述が自動でhtaccessに追記されます。
圧縮転送の記述です。

<IfModule mod_deflate.c>
    <IfModule mod_headers.c>
        Header append Vary User-Agent env=!dont-vary
    </IfModule>
        AddOutputFilterByType DEFLATE text/css text/x-component application/x-javascript application/javascript text/javascript text/x-js text/html text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/x-icon application/json 
    <IfModule mod_mime.c>
        # DEFLATE by extension
        AddOutputFilter DEFLATE js css htm html xml
    </IfModule>
</IfModule>

AddOutputFilterByType 以降で記述しているリソースファイルを圧縮して転送するため、転送量が減り、表示が早くなるということでした。
ですが、GTMetrixでみていると、どのファイルも圧縮されていないようだったので、
詳しく調べてみることにしました。

FireFoxのFirebugアドオンを使って、レスポンスヘッダを確認し、実際に圧縮されているかどうかを調べると、
どうやら圧縮されていないようでした。

記述が間違っていないのに圧縮ができていない原因は、Apacheでそもそも圧縮するモジュールを許可していないからのようです。
このブログはCPIの共用サーバーですが、CPIのシェアドプランACE01のApacheでは、圧縮用のmod_deflate.cモジュールが許可されていないようでした。
だから、いくらhtaccessに記載しても効かないわけです。

試しにW3Total Cacheプラグインを無効にしても、速度は変わったようには見られませんでした。