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

こんにちは、とみです。

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

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

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

今回は 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',
    ]);
});

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

  1. htmlの読み込みが始まる
  2. head 部分で “jquery.js” が読み込まれる
  3. head 部分で “require_trigger.js” が読み込まれる
  4. “require_trigger.js” 内で require.js ライブラリが引っ張ってきて require.js の機能が使えるようになる
  5. “require_trigger.js”の7行目で、遅延読み込み対象のjsリストを作る
  6. “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 で変更する必要がある部分

3ヶ所あります。

// 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関数のオプションで、ここで実際に遅延読み込みさせたいスクリプトのパスを指定しておくことが出来ます。

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

'lazyload', '{path}/js/lazyload'

③の require関数を実際に使った際に変数のように使用することが出来ます。
「lazyload.js を lazyload って名前であとで使うよ」と宣言しておけるのです。

この時、左側のjsファイルは拡張子(語尾の .js の部分)は記載する必要はありません。

③で、実際にrequire関数を起動させます。ここで実際に遅延読み込みさせるjsファイルを指定しています。
上記の例ですと、「observer.js」「lazyload.js」「gtag.js」「analytics.js」という4つのjsファイルを遅延読み込みさせていることになります。

遅延読み込みが出来ているかを確認する場所

requirejsを使って遅延読み込みをさせると、サーバーがユーザーに見せるためのデータを集める途中で指定したスクリプトだけを後回しにするようになります。

requirejsで遅延読み込みさせたjsファイルは、以下の画面の右下の部分(Waterfallと書かれているところ)の赤い線の右側で読み込みが開始されるようになります。

このようになっていれば、ちゃんとrequirejsが機能していることになります。

最初に読み込んでおく必要がない JavaScript はrequirejsで遅延読み込みさせるようにしましょう。

おまけ:プラグインを使って jsファイルの読み込みを早くさせる方法

個人的には、プラグインは入れまくると、動きの重いデブっちょサイトになってしまう可能性があるので最低限必要なものだけ入れるようにした方がいいと思っています。

ただ高速化させたいサイトにプラグインを使えるのであれば、Autoptimizeがおすすめです。

「高速化しますよ!!」と言いながらサイト重くしているプラグインとかあったりするのですが、Autoptimize はこのブログに導入してみて、実際にちゃんと読み込みが早くなりました。

Autoptimizerを入れたら90→92に上がりました

ただし、Autoptimize は読み込む js を圧縮させてサイズを減らす事で早く読み込ませるように実装しているようなので、遅延読み込みではないようです。

目的は早くする事なので、それでも良いかなとは思います。

プラグインは入れすぎ注意

プラグインも動作させるためにスクリプト(データ)を読み込む必要があります。

プラグインの数が増えればその分読み込むスクリプトも増えるので、読み込むデータの総量が増えます。

ユーザーに見せるためのデータを手元に持ってくるまでの速度が変わらなければ、当然のにそしてサイトのパフォーマンスが下がります。

プラグインを入れた際は、有効化する前とした後でのサイトのパフォーマンスがどれくらい変わったかをPageSpeed Insightsで確認するようにしましょう。

ではまた!