SWELLの「スクリプトの遅延読み込み」を解説【効果・設定例】

SWELLの設定には「スクリプトの遅延読み込み」という項目があります。

普段の生活では聞きなれない単語で、なんとなく設定したり敬遠したりしていませんか。

WordPressはWordPress標準設定とテーマの設定、プラグインの設定を適切に設定しないとうまく動かなくなってしまうことがあります。

「何のために」「こんな設定」をするのか知っていると、自分のサイトに合った設定ができるようになります。

今回は「スクリプトの遅延読み込み」の効果と設定方法を解説をします。

なんとなくで構わないので覚えておくと便利です。

WordPressテーマ『SWELL』

¥17,600（税込）

シンプル美と機能性を両立させた、国内最高峰のWordPressテーマ

詳細を見る購入する

スクリプトの遅延読み込みとは

スクリプト

JavaScript（拡張子が「.js」のファイル）

遅延読み込み

すぐに使わなくてもよいファイルを遅めに読み始めること。

画面表示されないものや外部の時間がかかるファイルなど。

例：Google アナリティクスは表示に関係ないから後回し・Google アドセンスは時間がかかるから後回し

つまり画面表示に最低限必要なファイルを優先的に読み込ませるための設定ということです。

利用する条件・注意事項

SWELL設定から設定するため、特殊な条件はありません。

ただしSWELLを機能が実装されたバージョン以上にアップデートする必要があります。

機能が実装されたSWELLのバージョン

「スクリプトの遅延読み込み」機能は2021/11/26にリリースされたSWELL ver. 2.5.6以降で利用可能です。

なおver. 2.5.6へのアップデートはユーザー認証が必要となっています。

もしユーザー認証の設定ができない場合は、SWELL公式へ問い合わせるか再購入が必要となります。

注意事項

以下は公式サイトからの引用です。

効果を発揮するには、適切な設定が必要です。

全てのスクリプトを遅延読み込みすべきというわけではありません。

スクリプトによっては遅延読み込みさせるとうまく動作しなくなることがあります。

遅延読み込みさせるスクリプトは自己判断・自己責任のもと設定して下さい。

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

当サイトを参考に設定した場合も上記の注意事項と同様となります。

メリットとデメリット

スクリプトの遅延読み込みはうまく設定すればサイト表示速度が上がることがあります。

しかしデメリットやリスクもあります。

遅延させる時間や遅延をさせないページを設定できます。

もしうまく動かない場合はこれらの設定を調整しましょう。

それでもうまくいかない場合は、どの設定内容が原因か特定する必要があります。

フォーラムで質問すれば解決する可能性はありますが、プラグイン等SWELL以外が原因の場合はサポート対象外になる場合もあります。

原因が分からない場合はこの機能の使用をやめた方がいいでしょう。

設定するほど効果はあるか

当サイトでは以下のように大きな効果がありました。

計測した際は以下の項目が遅延に関係してそうでした。

• Googleアドセンス
• Googleアナリティクス

SNSを使用していなかったりGoogleアドセンス・アナリティクスを使用していなかったりする場合は、効果が見られない可能性があります。

設定手順

STEP

SWELL設定から高速化タブを開く

ここをクリックすると手順を開閉できます

設定はSWELL設定から行います。

画面遷移

1. SWELL設定
2. 高速化

STEP

「外部スクリプトを遅延読み込みをさせる」にチェックを入れる

ここをクリックすると手順を開閉できます

「遅延読み込み機能」に「スクリプトの遅延読み込み」という項目があります。

「外部スクリプトを遅延読み込みさせる」の横にあるチェックボックスにチェックを入れると遅延読み込み機能を利用する設定になります。

STEP

「遅延読み込み対象にするスクリプトのキーワード」を入力（任意）

ここをクリックすると手順を開閉できます

デフォルト入力されている内容で問題ない場合は変更しなくても構いません。

もしデフォルト設定に使用していないスクリプトがあれば記載を削除しましょう。

そらしど

残っていてもエラーが出るわけではありません。触るのが怖ければそのままでもいいかと思います。

一番後ろにカンマがついていても問題ありません。

キーワードの例と遅延させるスクリプトの関係は次の通りです。

ご自身のサイトにあったキーワードを設定して下さい。

キーワード	遅延させるスクリプト	備考
twitter.com/widgets.js,	Twitterの埋め込みやいいねボタン	デフォルト設定
instagram.com/embed.js,	インスタの埋め込み	デフォルト設定
connect.facebook.net,	Facebookの埋め込みやフォローボタン	デフォルト設定
assets.pinterest.com,	ピンタレストの埋め込みやピンボタン	デフォルト設定
adsbygoogle.js,	Googleアドセンス	サイトが重くなる原因として有名
ai_insert_code,	Ad Inserter	プラグインを使用している場合
googletagmanager.com/gtag/js, gtag(,	Googleアナリティクス	トラッキングコードがgtag.jsの場合。2行とも設定する。
google-analytics.com/analytics.js,	Googleアナリティクス	トラッキングコードがanalytics.jsの場合
googletagmanager.com/gtm.js,	Googleタグマネージャー
clipboard.min.js, set_urlcopy.min.js,	URLコピーボタン関係	SWELLテーマ内で読み込むスクリプト
luminous.min.js, set_luminous.min.js,	画像をクリックで拡大させる	SWELLテーマ内で読み込むスクリプト
rellax.min.js, set_rellax.min.js,	フルワイドブロックで使えるパララックス設定で使用	SWELLテーマ内で読み込むスクリプト
prism.js, hcb_script.js,	Hilighting Code Block	Hilighting Code Block（プラグイン）で読み込むスクリプト

デフォルトで設定されているスクリプト

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

SNSの埋め込みやいいね・フォローボタン系を設置しない場合は削除してもかまいません。

当サイトで設定しているスクリプト

twitter.com/widgets.js,
instagram.com/embed.js,
connect.facebook.net,
assets.pinterest.com,
adsbygoogle.js,
googletagmanager.com/gtag/js,
gtag(,
luminous.min.js,
set_luminous.min.js,

STEP

「スクリプトの遅延読み込み機能をオフにするページ」を入力（任意）

ここをクリックすると手順を開閉できます

この機能を使用したくないページがあればここに設定します。

設定例

設定したいパーマリンクが「hoge」「huga」の場合は次のように入力します。

hoge,
huga

キーワードは部分一致可能です。
タイトルや本文は検索はされません。URLだけのようです。
サブディレクトリでまとめて設定することもできます。
パーマリンクが日本語の場合はパーセントエンコーディングが必要かもしれません。（未確認）

次のようなページは設定してもいいかもしれません。

• 設定しているスクリプトを使わない
• 設定しているスクリプトを使っているが、表示速度が遅くてもかまわない
• 特定のページだけ表示が崩れる・遅延機能がうまく動かない

遅延機能の必要がないページであれば、そのページはここに設定したほうが表示速度は少し早くなります。

この項目を設定しすぎるとオフにするかの確認に時間がかかってしまう場合があります。

STEP

「遅延させる秒数」を選択（任意）

ここをクリックすると手順を開閉できます

スクリプトを何秒遅延せるか設定します。デフォルトは5秒が設定されています。

基本的にはデフォルトのままで問題ありません。うまく動かない場合は設定を変えてみましょう。

秒数を短くする

スクリプトを読み込み始めるのが速くなる。設定したスクリプトがうまく動作しない場合におすすめ。

秒数を長くする

スクリプトを読み込み始めるのが遅くなる。表示速度が変化しない場合におすすめ。

ここで設定する秒数は最大値です。設定値より早くスクリプトを読み込む場合があります。

STEP

保存を押す

設定を項目を変更出来たらページ下部にある「変更を保存」ボタンを押します。

以上で設定が完了です。

FAQ

紹介されているスクリプトを全部設定してもよいか

設定してもエラーにはならないので、サイトの動作に問題がなければ大丈夫です。

ただし、不要な文言を検索する為、サイトの表示速度が遅くなる場合があります。

また、意図しないコンテンツまで崩れる可能性があります。

表示速度が速くなったかは、どうやって確認すればよいか

PageSpeed Insightsなどページ速度を評価してくれるサイトを使いましょう。

設定すべきスクリプトはどうやって調べればよいか

PageSpeed Insightsの「使用していない JavaScript の削減」に挙げられているスクリプトを参考にしましょう。

F12開発者ツールのネットワークタブから、時間がかかっているスクリプトを探すこともできます。

設定したのに表示速度が変わらない

SWELLのキャッシュクリア機能でキャッシュをクリアしてみてください。

それでも変化がない場合は以下を確認してみてください。

• スクリプトはカンマ（,）で区切っているか（改行は任意）
• 設定したスクリプトを使用しているか

不要になるプラグインはあるか

Flying Scripts by WP Speed Mattersは機能が被る為いらなくなります。

他にもスクリプトを遅延させるために有効化しているプラグインがあればそれも不要になるかと思います。

個別にfunction.phpで遅延させている場合はそれも削除しましょう。

まとめ

SWELL設定にあるスクリプトの遅延読み込みについて、効果と設定手順を解説しました。

SWELLのことがわかって、サイトの表示速度も速くなっていれば幸いです。

紹介したキーワード以外にもおすすめの設定があればぜひ教えてください！

そらしど

最後まで読んでいただきありがとうございました。