ページの表示速度を早める対策をやってみた結果

スポンサーリンク

スマートフォンからのアクセスが半分以上になって、ページの表示速度がますます重要になっています。遅いページは速攻直帰になってしまいます。
直帰率を低くするために画像の多いページの改善をやってみました。

まず現在のページ速度を把握しておきます。
調べるのはPageSpeed Insightsで。

ページ速度を早くすると言われる方法をチェック

当サイトではあまり画像は掲載していないのですが、一部、画像の多いページもあります。念のため画像の多いページをチェックしてみました。

ページ速度

ひどい点数です。これまで放置してきた意味が分かりません。
気を取り直して改善していきます。

当サイトはXserverを利用しているので、サーバーパネルのオプション機能から「mod_pagespeed設定」をONにします。

mod_pagespeed

「mod_pagespeed」は画像を多用したサイトの表示速度を向上させる技術「CDN(コンテンツ・デリバリー・ネットワーク)」に代わる、Googleが開発した拡張モデュールです。
ボタンクリック一つで「CDN」と同様のページ速度向上効果があると言われています。

設定後、PageSpeed Insightsで再チェック。

ページ速度

47 → 60

劇的な効果ですが、60ポイントはまだまだです。
改善点をいくつか提案されています。

ページ速度改善

スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する

レンダリングブロックしているJavaScriptを除去することを提案していますが、プラグインのJavaScriptなので簡単には出来ません。
CSSをインライン化することを提案されていますが、これも投稿ページで個別に行うこと出来ません。

結局、なんの改善策も講じられないのですが、調べてみると一つあります。
プラグイン「Autoptimize」の利用です。
このプラグインは、HTML、CSS、JavaScriptの圧縮をするプラグインです。

他に高速化を図る方法としてよく知られているのがキャッシュプラグインです。
ところが、Simplicityとキャッシュプラグインの相性が悪く、いくつか試してみましたが、うまく動作しません。
そこでさらに調べていくと、「.htaccess」ファイルにコードを追記するだけで高速化を図れる方法が書かれています。

》》》[改訂版] .htaccess の見直しでWebページ高速化

サーバーソフトがApache以外は使えないそうですので、確認してから使って下さい。
2016.06.26時点のコードを記載しておきます。

# 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 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

    # キャッシュ初期化(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-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>

# 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|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>

ここまでの設定で
ページ速度

47 → 72

だいぶ上がりました。
元々かなり悪い点数なので、ここまで改善できて充分なのですが、もう少しやってみます。

次はプラグインScripts To Footerで、「head」にあるCSSとJavaScriptへのリンクをフッターに移動させる方法ですが、やってみると逆に速度が落ちます。

あとは、動かしているプラグインが多いので、整理してみようと思っています。

コメント