【SWELL】WordPress高速化するためにやったこと【外部スクリプト遅延読み込み】

テーマは高速化と相性が良く、記事の装飾が楽にできるテーマ「SWELL」を使用することにしました。

前提

実施サイトブログ型のサイト(まとめ記事)
サーバーConoha Wing
テーマSWELL
Google アナリティクスタグ有り
文字数/1記事3,000文字程度
Twitter埋め込み8ツイート分
Instagram埋め込み5投稿分
広告5ヵ所に記事内広告(Googleアドセンス)
プラグインSEO SIMPLE PACK
Contact Form 7
WP Multibyte Patch
XO Security
BBQ Firewall
WebP Converter for Media
All-in-One WP Migration
Jetpack

高速化作業などで編集される際は必ずバックアップを取ってから作業しましょう。

ビフォーアフター

Before

モバイルのスコア16、First Contentful Paint (FCP)が5秒ぐらいでした。(スクショ取り忘れました・・・)

テーマを切り替えた直後で、まあ何も設定してないしなぁという感じでした。

After

モバイルでの表示速度が1.3秒まで縮みました!(スコア98は目安)

テーマの高速化設定

以下設定内容です。キャッシュ機能や遅延読み込み機能等フル活用しています。

外部スクリプト遅延読み込み

Twitter、Instagram、Googleアナリティクス、GoogleアドセンスのJavaScriptを遅延読み込みさせました。

開発者の了さん、実装中とのことで待ちの間も遅延読み込みさせたいという方の参考になれば幸いです。

下記のコードを子テーマのfunctions.phpに記載します。すると、埋め込み用コードの最初についてくるJavaScript読み込みコードを削除することができます。

// インスタとツイッター遅延読み込み用
function lazyload_twitter_instagram_async( $content ) {
    $content = str_replace('<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>','', $content);
    $content = str_replace('<script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>','', $content);
    $content = str_replace('<script async src="//www.instagram.com/embed.js"></script>','', $content);
    $content = str_replace('<script async="" src="//www.instagram.com/embed.js"></script>','', $content);
	return $content;
}
add_filter('the_content','lazyload_twitter_instagram_async', 11);

下記のコードを</body>直前に出力させます。SWELLの場合は「外観」>「カスタマイズ」>「高度な設定」の一番下に入力欄が用意されているので、そこに貼り付ければOKです。(※Conoha Wingの場合は「何かうまくいかなかったようです」のエラーが出るので、WAFを一時的にOFFにしてから更新ボタンを押すと上手くいきます。)

<script>
  (function(window, document) {

    function insertJs(src) {
      // JS 読み込み用
      let ad = document.createElement('script');
      ad.type = 'text/javascript';
      ad.async = true;
      ad.src = $src;
      let sc = document.getElementsByTagName('script')[0];
      sc.parentNode.insertBefore(ad, sc);
    }

    // 遅延読込み
    let 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);

        try {
          // ツイート JS 読み込み
          insertJs('https://platform.twitter.com/widgets.js');
          // インスタグラム JS 読み込み
          insertJs('https://www.instagram.com/embed.js');
          // google ads JS 読み込み(※IDは書き換えてください。)
          insertJs('https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-0000000000000000');
          // google analytics JS 読み込み(※IDは書き換えてください。)
          insertJs('https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX');
        } catch (error) {
          console.log(error);
        }
      }
    }
    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>

広告コードはJSが2重で読み込まれないように「SWELL設定」>「広告コード」>「広告コードの設定」では<ins class=”adsbygoogle”の上の

<script type="text/javascript" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-0000000000" data-checked-head="true"></script>

は削除しておいてください。

例:

アドセンスのID「ca-pub-0000000000000000」、Google アナリティクスの「G-XXXXXXXXXX」の部分は各々書き換えてください。

「インスタ埋め込みは使用していない」「広告は設置していない」等ご自身の状況に合わせて不要な際は「insertJs(‘[jsファイルのURL]‘);」の行を消してください。

画像最適化

WebP や AVIF などの画像形式は、一般的に PNG や JPEG より圧縮率が高く、ダウンロード時間やデータ消費量が抑えられます。

PageSpeed Insights

とのことなので、画像を変換しましょう。

プラグインを使用する場合は「WebP Converter for Mediahttps://ja.wordpress.org/plugins/webp-converter-for-media/

Webアプリで済ませたい方はGoogleが提供する画像圧縮サービス「Squoosh」を利用されると良いかと思います。

読み込みたくないファイルを制限

投稿ページで不要なファイルを読み込んでいたりするので不要なファイルは読み込まないように制限をかけて最適化しましょう。

プラグインは少ないに越したことはないのですが、利用者の都合などで増えたりするものです。。。

できるだけ表示速度に影響がないように工夫しましょう。

プラグイン「ContactForm7」のファイルを問い合わせページのみ読み込む

functions.phpに下記コードを追記すると、お問い合わせ用プラグインContactForm7用のファイルがスラッグ「contact」のページのみで読み込まれるようになります。

//Contact Form 7を問合せページのみに読み込ませる
add_action( 'wp', function() {
  if ( is_page( 'contact' ) ) return;
  add_filter( 'wpcf7_load_js', '__return_false' );
  add_filter( 'wpcf7_load_css', '__return_false' );
});

プラグイン「JetPack」のCSSファイルをフロントエンドで読み込まない

functions.phpに下記コードを追記するとJetPackのCSSファイルが表で読み込まれないようにできます。

(JetPackは多機能ですが重いので、できれば使用を控えたいですが、ライターさんがログイン画面だけでサイトのアクセス解析をしたいとのことで一応入れたままにしました。)

// remove jetpack frontend css
add_filter( 'jetpack_implode_frontend_css', '__return_false' );

dashiconsファイルの読み込み制限

管理画面や管理バーに表示されるダッシュボードのアイコンはログインユーザー以外には関係ないので非表示にしておくと無駄にCSSが読み込まれずに済みます。

//ログイン時以外はdashiconsファイルを無効
function dashicons_deregister_style()
{
    if ( ! is_user_logged_in() ) {
       wp_deregister_style( 'dashicons' );
	}
}
add_action( 'wp_enqueue_scripts', 'dashicons_deregister_style');

参考サイト

余談

PageSpeed Insightsではgzip圧縮が「改善できる項目」に上がってくるけれど、別のチェックサイト(https://rakko.tools/http://www.gidnetwork.com/tools/gzip-test.php)で見ると有効になっている。

.htaccessに有効化させる記述をしても効かず(エラー出た:ResizeObserver loop limit exceeded)、ググってもよく分かりませんでした…。