「スクリプトの遅延読み込み」機能の使い方について

SWELL ver. 2.5.6 から、スクリプトの遅延読み込み機能を追加しています。

この記事では、その使い方について解説していきます。

注意事項

「スクリプトの遅延読み込み」機能の設定方法

管理画面の「SWELL設定」→「高速化」タブの中に、次のような設定エリアがあります。

ここで、

について設定できます。

「遅延読み込み対象にするスクリプトのキーワード」設定について

キーワードの入力方法

必須なのは「,区切りで入力すること」です。
改行はなくても大丈夫ですが、あっても大丈夫なので見やすいように「改行+,」で箇条書きしていくのがいいかなと思います。

デフォルト設定値

2.5.6時点でのデフォルト値は以下の通りです。

twitter.com/widgets.js,
instagram.com/embed.js,
connect.facebook.net,
assets.pinterest.com,

解説

「 キーワード」がどこの文字を検索するか

<script>タグの中に実際にコードが書かれている場合、そのコードを検索します。

<script>...ここに書かれたコードの文字列がキーワードにマッチするかどうかを検索します...</script>

コードがない場合は、属性値の文字列が検索対象になります。

<script ...ここに書かれた文字列がキーワードにマッチするかどうかを検索します...></script>

例

example.comというキーワードが設定されていた場合、以下のどちらのスクリプトも遅延読み込みされます。

<script src="//example.com/hoge.js"></script>

<script>
    console.log('example.com');
</script>

srcで読み込んでる方だけを遅延読み込みしたい場合は、キーワードをより長く記述してください。
例：//example.com/hoge.js

スクリプトキーワードの書き方の例

Googleアドセンスを遅延読み込みする

以下のキーワードを追記してください。

adsbygoogle.js,

サイトによっては遅延読み込みさせると正常に表示されなくなるかもしれないのでご注意ください。

また、Ad Inserterプラグイン等を利用している場合はそれに合わせて追加のキーワードが必要になることがあります。

例：Ad Inserterの場合は以下でいけると思います（プラグインのアップデートで変わるかもしれませんのでご自身でテストしてみてください。）

ai_insert_code,

Googleアナリティクスを遅延読み込みする

以下のキーワードを追記してください。

トラッキングコードがgtag.jsの場合

googletagmanager.com/gtag/js,
gtag(,

トラッキングコードがanalytics.jsの場合

google-analytics.com/analytics.js,

ga()タグを別の<script>タグで動かしている場合は、そこのコードに合わせてキーワードを追加してください。

Googleタグマネージャーを遅延読み込みする

以下のキーワードを追記してください。

googletagmanager.com/gtm.js,

SWELLテーマ内で読み込むスクリプトを遅延読み込みさせる

以下のキーワードを追記してください。

URLコピーボタン関係のスクリプト

clipboard.min.js,
set_urlcopy.min.js,

画像をクリックで拡大させるスクリプト

luminous.min.js,
set_luminous.min.js,

フルワイドブロックで使えるパララックス設定で使用されるスクリプト

rellax.min.js,
set_rellax.min.js,

それぞれ、サイトによっては遅延読み込みさせると正常に表示されなくなるかもしれないのでご注意ください。

「Hilighting Code Block」のスクリプトを遅延読み込みさせる場合

prism.js,
hcb_script.js,

サイトによっては遅延読み込みさせるとうまく動作しないことがあるので、ご注意ください。

実際の設定例

当サイトでは、以下のようにキーワードを設定しています。

twitter.com/widgets.js,
instagram.com/embed.js,
connect.facebook.net,
assets.pinterest.com,
googletagmanager.com/gtag/js,
gtag(,
clipboard.min.js,
set_urlcopy.min.js,
luminous.min.js,
set_luminous.min.js,
rellax.min.js,
set_rellax.min.js,
prism.js,
hcb_script.js,

となっています。

「スクリプトの遅延読み込み機能をオフにするページ」について

ここに指定されたキーワードが含まれるページでは、遅延読み込み機能がオフになります。
複数のページでオフにしたい場合、キーワードを「,（+改行）」で区切って指定してください。

「遅延させる秒数」について　

スクリプトの読み込みを最大で何秒遅らせるかを0~15秒の範囲で指定できます。（デフォルトは3秒）

ただし、ユーザー操作が行われればその時点で読み込みが始まります。

フックで上書きできる設定について

• 'swell_delay_js_list'フックを使うと、遅延読み込み対象になっているスクリプトリストを上書きできます。
• 'swell_delay_js_prevent_pages'フックを使うと、除外ページのキーワードリストを上書きすることができます。

いずれも、配列でデータが渡ってきますので、配列で返してください。