WordPress・ブログ表示の高速化に挑戦

Screenshot_from_2015-10-27_mini

思う所あって、少し前にこのブログのテーマをSimplicityに入れ替えました。

Simplicityの特徴

んで、ちょこちょこといじっているのですが、前から表示が遅いなぁと思っていたのと、ページキャッシュ系との相性があまりよくない感じなので色々と対策を施してみました。結果、プラグインを使わなくても体感できるぐらいには速くなったので、こちらに備忘録として残します。

プラグインは削除

元々 WP Super Cacheを使っていたんですが、真っ白画面に出会う確率が多くて調べていたら、以下のページにたどり着きました。

Simplicityが「ファイルを生成するキャッシュプラグイン」と相性が悪い理由

そこから、さらに以下のページに。

コピペ一発でSimplicityを結構高速化する方法

まずは、これを実行しました。

.htaccessの編集

ブログを設置しているディレクトリの.htaccessに以下のコードを追記します。

# ETags(Configure entity tags) を無視する設定
<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 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-opentype .otf
    AddType application/vnd.ms-fontobject .eot
</IfModule>

# プロクシキャッシュの設定(画像とフォントをキャッシュ)
<IfModule mod_headers.c>
<FilesMatch "\.(ico|jpe?g|png|gif|svg|swf|pdf|ttf|woff|otf|eot)$">
    Header set Cache-Control "max-age=604800, public"
</FilesMatch>
</IfModule>

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

    # キャッシュ初期化(1秒に設定)
    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-opentype "access plus 1 year"
    ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
</IfModule>
</IfModule>

# Gzip圧縮の設定
<IfModule mod_deflate.c>
    SetOutputFilter DEFLATE

    # 古いブラウザでは無効
    BrowserMatch ^Mozilla/4\.0[678] no-gzip
    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch \bMSIE\s(7|8) !no-gzip !gzip-only-text/html

    # 画像など圧縮済みのコンテンツは再圧縮しない
    SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
    # プロクシサーバーが間違ったコンテンツを配布しないようにする
    Header append Vary Accept-Encoding env=!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-woff
    AddOutputFilterByType DEFLATE application/x-font-opentype
    AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
</IfModule>

これをコピペで追記するだけです。体感でかなり変わりました。

画像の圧縮

アップロード前に圧縮してもいいのですが、iPhoneからの更新だとそれも面倒なので、一旦アップロードした画像をプラグインでロスレス圧縮しています。使っているプラグインは「EWWW Image Optimizer」です。

https://wordpress.org/plugins/ewww-image-optimizer/

これ、意外に効果ありました。

HTML、javascript、CSSの圧縮

こちらもプラグインで対応。使ったのは「Autoptimize」です。設定画面で、HTMLとjavascript、CSSの部分をチェックするだけです。

https://wordpress.org/plugins/autoptimize/

javascriptの非同期読み込み

WordPress自体に使われているjqueryなどを読み込み終わらないと表示自体が始まらないので、結果的に表示が遅くなります。なので、非同期で.jsを読み込む設定したいと思って探した所、以下の記事にたどり着きました。

https://mbdb.jp/hacks/wp-javascript-add-async.html

具体的には、下記コードをfunction.phpに追記するだけです。ボクはSimplicityの子テーマのfunction.phpに記入しました。

if (!(is_admin() )) {
function add_async_to_enqueue_script( $url ) {
    if ( FALSE === strpos( $url, '.js' ) ) return $url;
    if ( strpos( $url, 'jquery.min.js' ) ) return $url;
    return "$url' async charset='UTF-8";
}
add_filter( 'clean_url', 'add_async_to_enqueue_script', 11, 1 );
}

以上が、現状でやってみた高速化です。ページキャッシュ系のプラグインは全て削除しましたが、体感でもページスピード計測系のサービスで見てみても高速化されました。

score

他にもまた見つければ実行していきたいと思います。上記の作業は、それほど面倒ではないし、比較的安全に実行できるので、ページの表示が遅くて悩んでる方にはオススメです!

関連記事