2020/06/19

【WP高速化】PageSpeed Insightsで90点取るまでに改善したこと

最近のSEOのトレンドとして、「コンテンツの充実」と「ページスピード」が重要となっています。

「内容が薄い記事は見たくない」
「ページの表示が遅いと見るのを止める」

当然の流れと言えば当然ですが、これを機械的に判定できるようになってきているこの時代・Google、すごいですね。

ということで、WPで作った当ブログもGoogleが提供しているPageSpeed Insightsでスピードをチェックしました。

30点。

むむむ。

結論。

いろいろ調べて、いろいろやってみた結果、大事なことは以下の2つ。

①画像の保存形式・圧縮
②外部ファイルをfooterで読み込む

この2点を中心に改善し再チェック。

90点！

ここまでの道のりを紹介します。

01. 画像を圧縮する

まずは一番改善の幅が大きそうなJPG、PNG画像を圧縮しました。

使ったのはGoogleがおススメしていた「Squoosh」

1枚1枚圧縮が必要ですが、画質の低下具合を確認しながら細かく調整ができます。

多くの方がおススメしているTinyPNGも使ってはみたのですが、改善できる項目に残る画像が多く、Squooshを使ってみたら項目から消すことができました！

ただ大量に画像を圧縮したいときは、TinyPNGのほうが便利です！

02. JS・jQueryをフッターで読み込む

JSやjQueryを読み込んでいる間は、HTMLファイルの読み込みが止まってしまいます。
HTMLファイルは上から順に読み込んでいくので、JSやjQueryをなるべく下のほうに記述したほうが、表示速度が早くなるんです。

基本では<head></head>内に書くようになっていますが、実は <body></body>内にも書くことができます。

このように</body>の直前に移動させました。

参考：外部CSSと外部JavaScriptで表示速度の低下を防ぐには

さらに、WPで出力されるjquery.jsもフッターで読み込む

WPは標準でjquery.jsを<head></head>内に読み込んでくれています。

これもフッターで読み込むために、functions.phpに以下の記述を追加しました。

▼ functions.php


// jQueryをfooterで読み込む
function custom_enqueue_scripts(){
  if(!is_admin()){ //管理画面以外
    wp_enqueue_script('jquery');
      remove_action('wp_head', 'wp_print_scripts');
      remove_action('wp_head', 'wp_print_head_scripts', 9);
      remove_action('wp_head', 'wp_enqueue_scripts', 1);
      add_action('wp_footer', 'wp_print_scripts');
      add_action('wp_footer', 'wp_print_head_scripts');
      add_action('wp_footer', 'wp_enqueue_scripts');
  }
}
add_action('wp_enqueue_scripts', 'custom_enqueue_scripts');

03. ファーストビューに必要なCSS以外をフッターで読み込む

JSやjQueryと同様、CSSも読み込み速度に影響してしまいます。

style.cssにまとめていたCSSを2つのファイルに分け、
ファーストビュー用のCSSは<head></head>内に、その他は</body>の直前に移動しました。

04. googleフォントをフッターで、非同期で読み込む

当ブログはgoogleフォントのNoto Sans Gothicを使用しています。

WEBフォントはどのデバイスでも同じ見せ方ができるので便利なのですが、けっこう重いらしい。。。

ということでHTMLなどの読み込みを邪魔しないために、googleフォントの読み込みを以下のコードに変更しました。

</body>の直前に追記します。

▼ footer.php

<script>
window.WebFontConfig = {google: { families: ['Noto+Sans+JP'] },//ここに使用するフォント名を記述
      active: function() {sessionStorage.fonts = true;}};
      (function() {
        var wf = document.createElement('script');
        wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
})();
</script>

参考：Google Fonts を非同期で読み込みサイトスピードを高速化

05. JSも非同期で読み込む

JSも非同期で読み込むことでスピードアップが期待できます。

async属性を付与することで非同期読み込みできるようになるので、自動で付与するコードをfunctions.phpに追記してあげます。

▼ functions.php

//jsにasync属性を付与（ページ読み込みスピードアップ対策）
if (!(is_admin() )) {
  function add_async_to_enqueue_script( $url ) {
  if ( FALSE === strpos( $url, '.js' ) ) return $url;
  if ( strpos( $url, 'jquery.js' ) ) return $url;       //対象外
  if ( strpos( $url, 'jquery.min.js' ) ) return $url;
  return "$url' async charset='UTF-8";        // async属性を付与
}
add_filter( 'clean_url', 'add_async_to_enqueue_script', 11, 1 );
}

参考：厳しくなったPageSpeed Insightsの評価をWordPressサイトで改善して得点&速度UP

06. Gutenberg用のCSSの読み込みを削除

私の場合、トップページはGutenbergのエディターを使っていませんでした。
しかし、Gutenberg用のCSSが読み込まれ、ページスピードに影響を与えていました。

なので、トップページのみ読み込まないようにfuctions.phpに以下の記述を追記しました。

▼ functions.php

// トップページでブロックエディタCSSを読み込まない
add_action( 'wp_enqueue_scripts', 'remove_block_library_style' );
function remove_block_library_style() {
    if ( is_front_page() ) {
        wp_dequeue_style( 'wp-block-library' );
    }
}

07. Google AdSenseをトップページで読み込まない

私の場合、Google AdSenseはトップページでは表示させていません。

なので、トップページ以外で読み込むように + 他の読み込むページでは遅延読み込みするようにコードを変更しました。

▼ functions.php

<?php
        if ( !is_front_page() ) {
    echo"<script>
        (function(window, document) {
        function main() {
        // GoogleAdSense読込み
        var ad = document.createElement('script');
        ad.type = 'text/javascript';
        ad.async = true;
        // サイト運営者IDを書き換え
        ad.dataset.adClient = 'ca-pub-xxxxxxxxxxxxxxxx';
        ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
        var sc = document.getElementsByTagName('script')[0];
        sc.parentNode.insertBefore(ad, sc);
        }

        // 遅延読込み
        var lazyLoad = false;
        function onLazyLoad() {
        if (lazyLoad === false) {
          // 複数呼び出し回避 + イベント解除
          lazyLoad = true;
          window.removeEventListener('scroll', onLazyLoad);
          window.removeEventListener('mousemove', onLazyLoad);
          window.removeEventListener('mousedown', onLazyLoad);
          window.removeEventListener('touchstart', onLazyLoad);
          window.removeEventListener('keydown', onLazyLoad);

          main();
        }
        }
        window.addEventListener('scroll', onLazyLoad);
        window.addEventListener('mousemove', onLazyLoad);
        window.addEventListener('mousedown', onLazyLoad);
        window.addEventListener('touchstart', onLazyLoad);
        window.addEventListener('keydown', onLazyLoad);
        window.addEventListener('load', function() {
        // ドキュメント途中（更新時 or ページ内リンク）
        if (window.pageYOffset) {
          onLazyLoad();
        }
        });
        })(window, document);
    </script>";
        }
?>

参考：GoogleAdSenseの遅延読込みでページ表示速度を改善