サイトが重いのをプラグインを使わずに改善する方法【JavaScript編】

こんにちは、とみです。

サイトの読み込みを高速化させることはSEO対策のみならず、サイトに訪れたユーザーにストレスを与えないためにも重要なポイントです。

多くの場合、プラグインを使って高速化させることが多いですが、

ただ中には入れたら逆に遅くなるプラグインなどもあれば、良質なプラグインでも設定項目の組み合わせによっては結果的に遅くなってしまうこともあります。

WordPressが遅い原因

1. サーバー性能が悪い
2. テーマの完成度が低い（高速化視点で）
3. プラグイン入れすぎ
4. テーマ機能ありすぎ（使ってないのに）
5. 外部サイトから読み込み（WP関係ないｗ）

まあ1つにWordPressと言っても最低でも上記全て考慮しないと高速化は難しいです。
— スキルシェア⚡WordPress高速化（次は9月から対応可） (@skillsharejp) August 1, 2020

今回は Javascriptを遅延読み込みさせることでWordPressやサイトの速度を改善する方法を紹介します。

以下のような方向けです。

・クライアントがWordpressを使っていない
・クライアントがCMSのプラグインを導入できない
・なるべくプラグインを使わずに軽いスクリプトで済ませたいあなた

プラグインを使わずにスクリプトの読み込み遅延をさせる方法

用意するもの

require.js ファイル（こちらからダウンロードして、サーバーのjsディレクトリ内に置く。minifiedと言うものでOK）
jquery.js ファイル（もしデフォルトで入れていない場合は、こちらからダウンロードして、同じくサーバーのjsディレクト内に置いておきます。compressedと言うものでOK）
require_trigger.js ファイル（自分で作成します）

実装部分はこんな感じです。

・header.php（bodyタグよりも先に読み込むhtmlファイル。通常最初から存在している）

<!DOCTYPE html>
<head>
  ・・・・
  ・・
  // require.js は jquery で動くので、require.js より前に読み込んでおきます。
  <script type="text/javascript" src="{path}/js/jquery.js"></script>

  // headタグの最後で require.js を読み込んでおくようにします。
  <script type="text/javascript" src="{path}/js/require_trigger.js"></script> 
</head>

・require_trigger.js （自分で作る必要がある js ファイル）

// scriptタグを生成します。
var el = document.createElement("script");
// scriptタグのsrc属性にrequire.js を指定します。（ハイフン以降の数字はバージョンです）
el.src = "{path}/require-2.3.6.js";
el.setAttribute = ("data-main","jquery");

// body要素の最後にrequire.jsの実装を追加させるようにします。
document.head.appendChild(el);
var require = {
    paths: {
        'lazyload': '{path}/lazyload',
        'observer': '{path}/intersection-observer',
        'gtag': 'https://www.googletagmanager.com/gtm.js?id=GTM-WQ5SM37',
        'ganalytics': 'https://www.google-analytics.com/analytics',
    }
};
window.addEventListener("load", function(){
    require([
        'observer',
        'lazyload',
        'gtag',
        'ganalytics',
    ]);
});

流れはざっくりこんな感じです。

htmlの読み込みが始まる
head 部分で “jquery.js” が読み込まれる
head 部分で “require_trigger.js” が読み込まれる
“require_trigger.js” 内で require.js ライブラリが引っ張ってきて require.js の機能が使えるようになる
“require_trigger.js”の7行目で、遅延読み込み対象のjsリストを作る
“require_trigger.js”の16行目で、ユーザーの画面に先に必要なものを表示し終えた後に7行目で作ったjsリストの読み込みを開始するように指定する

どちらのファイルも、{path} と書かれているところは適宜ご自身のいじる必要のあるサイトのサーバーのパスに合わせて変更してください。

例えばWordPressでjsディレクトリの下にjquery.jsがある場合、以下のようにjquery.jsを取ってきます。

<? echo get_theme_file_uri()/js/jquery.js">

このサイトの場合、 “https://taroblog.me/wp-content/themes/cocoon-master/js/jquery.js”と返ってきます。

絶対パスではなく、相対パスで書くように心がけましょう。（サイトのお引っ越しをした際にパスも変える必要が出てしまい、漏れるとサイトが落ちるため）

require_trigger.js で変更する必要がある部分

３ヶ所あります。

// scriptタグを生成します。
var el = document.createElement("script");
// scriptタグのsrc属性にrequire.js を指定します。（ハイフン以降の数字はバージョンです）
el.src = "{path}/require-2.3.6.js";　　　　　　　　　　　　　　　　　　　　　　← ①ここの{path}
el.setAttribute = ("data-main","jquery");

// body要素の最後にrequire.jsの実装を追加させるようにします。
document.head.appendChild(el);
var require = {
    paths: {　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　← ②ここのpaths の中身
        'lazyload': '{path}/js/lazyload',
        'observer': '{path}/intersection-observer',
        'gtag': 'https://www.googletagmanager.com/gtm.js?id=GTM-WQ5SM37',
        'ganalytics': 'https://www.google-analytics.com/analytics',
    }
};
window.addEventListener("load", function(){
    require([　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　← ③ここのrequire の中身
        'observer',
        'lazyload',
        'gtag',
        'ganalytics',
    ]);
});

①の{path}については上述の通り、ディレクトリを書くだけです。

②の「paths」はrequire関数のオプションで、ここで実際に遅延読み込みさせたいスクリプトのパスを指定しておくことが出来ます。

上記の例のように以下のように書くことで