GTmetrix のスコア改善

GTMetrixのスコア改善 技術ネタ

GTMetrix のスコアを改善した時のことを書きたいと思います。



前提

GTMetrixで測定した本サイトの環境は以下の通りです。

  • KUSANAGI for さくらのVPS
  • Nginx
  • PHP 7

改善前のスコア

改善前のスコアは 94 でした。

GTmetrix改善前スコア
KUSANAGI は最初からスコアが高いですね。また、測定前から EWWW Image Optimizer プラグインを入れていたので、その効果もあったようです。

改善内容

以下の4点について対応を行いました。

HTML, CSS, JavaScript の圧縮(Minity HTML/CSS/JavaScript や Inline CSS/JavaScrpt)

HTML、CSS、JavaScriptを圧縮しなさいと指摘されました。
対応方法としては、Autoptimize プラグインを導入しました。たくさんのサイトで説明されていますので、ここでは詳細を書きませんが、このプラグインをインストールし、設定画面でチェックボックスにチェックを入れるだけで Html, Css, JavaScript を小さくしてくれました。すばらしいプラグインですね。

favicon.ico(ファビコン)設置(Avoid bad requests)

favicon.ico が存在していないと指摘されました。
ファビコンを作成する予定はなかったのでどうしよかと思っていましたが、 Nginx がダミー画像を返してくれる機能があったため、conf に empty_gif を追記しました。

location = /favicon.ico {
    log_not_found off;
    access_log off;
    empty_gif;
    expires 30d;
}

Varyヘッダ設定(Specify a Vary: Accept-Encoding header)

Varyヘッダが設定されていないと指摘されました。
対応としては、Nginx の conf に css と JavaScript の場合のみ、Varyヘッダを設定するようにしました。

location ~* \.(css|js)$ {
    expires 7d;
    access_log off;
    add_header Vary 'Accept-Encoding, User-Agent';
}

JavaScript の構文解析を遅延させる(Defer parsing of JavaScript)

JavaScriptのダウンロードと解析のためにレンダリングブロックされているという指摘でした。
JavaScript(今回の対象はjQuery)の遅延ロードは以下のように defer をつけるだけです。

<script defer src='//ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js'></script>

これを実現するために、functions.php に以下のコードを書きました。

function defer_jquery($tag, $handle){
    if('jquery' === $handle){
        return str_replace(&quot;type='text/javascript'&quot;, 'defer', $tag);
    }
}
if(!is_user_logged_in()){
    add_filter('script_loader_tag', 'defer_jquery', 10, 2);
}
is_user_logged_in()
管理画面からのプレビューなどが正しく動かない場合があったので、ログインしている場合は対象外としました。

改善後のスコア

改善後は 98 でした。

GTmetrixの改善後スコア
99点以上を目指していたのですが、98点で挫折。。。「Optimize the order of styles and scripts」の指摘を改善できれば、99点はいけそうですが、大変そうなので、とりあえず良しとしました。