2022年度の国内シェアNo⒈のワードプレス・テーマ『SWELL』、何かと話題ですよね。
その中でもメリットとして挙げられているのが表示速度の速さ、ではないでしょうか？グーグルによると、サイトの表示速度が3秒以上になると、サイトを離れる割合が50%以上になるとか。つまりは半分以上の人がスピードが遅いと記事まで辿り着かずに離れてしまう、というわけです。
サイトページの表示スピードを計測してくれるページがPageSpeed Insightsです。
自分のサイトはどうなのだろう、と表示速度を調べてみたところ、
表示速度を表す数字が赤い四角で囲んだところです。なんとこんなに遅い！左がモバイル、右がパソコンでの表示速度です。モバイルでは15秒以上になることも！
現在はモバイルでのサイト閲覧が70%を越えるので、モバイルでの表示速度はとても大事です！記事の内容もまだまだ足りませんが、表示速度がサイト訪問者減少に繋がっているのだったら、まず対処しなければいけませんよね。
この中で、表示速度に関わってくるのが、
Largest Contentful Paint（ページの読み込みに要する時間）に関する部分なので、何が悪いのかをみてみたところ、
「使用していないJavaScriptの削減」の文字。
よくわからないものの対策を実行してみた結果がこちら。
ほかにも改善点はあるものの、一番はじめの表示速度はだいぶ上がりました。3秒には届きませんが、15秒以上に比べたら4秒程度にはなったので、かなりの改善ではないでしょうか？（モバイルの速度）
そこで、本記事では「使用していないJavaScriptの削減」でお悩みの皆さまに、表示速度を上げる方法を紹介します。
「使用していないJavaScriptの削減」対策をする方法
「使用していないJavaScriptの削減」対策は簡単にSWELLの設定からできます。
色々難しいことはわかりませんが、「使用していないJavaScriptの削減」対策には「スクリプトを遅延読み込みさせる」設定が必要です。
サイトページを表示する時に、まず最初に読み込もうとするのが画像・動画などの重いファイルからなんです。そこで、ページの読み込みに時間のかかるファイルを読み込むのを後回し（遅延）して、文字などを一番大事な部分を優先に読み込んでもらうことが、
「スクリプトを遅延読み込みさせる」です。
実際にやってみましょう。
「SWELL設定」→「高速化」を選ぶと「スクリプトを遅延読み込みさせる」と欄が出てきます。
「スクリプトを遅延読み込みさせる」をオンにしましょう
最初にいくつか、デフォルトのものが入っていますが、そこはいじらなくてオッケー。これらはSNSボタンの読み込みに関わってくる部分なので削除してしまうとサイトが遅くなってしまう可能性もあります。ご注意ください。
ここには、「サイトを読み込む時に悪い影響＝サイトを遅くする」コードが入力するのですが・・・。
「使用していないJavaScriptの削減」はどこからわかる？
では実際にサイトを遅くするコードはどこからわかるのでしょうか？
ここで出てくるのがまた、PageSpeed Insightsのページ。
すでに対応してしまったので黄色になっていますが、元々はここが９秒ほどあり、赤でした。赤で囲んだ部分がサイトが遅くなる原因ですよ！と教えてくれているので、ここをどうにかしないといけませんね。
簡単に言うとスピードアップのために、赤で囲んだ部分をコピーして、「スクリプトを遅延読み込みさせる」のです。
/で囲まれた部分からjsまでの部分が必要なコードなので、これを例にすると、
“jquery.min.js”までをコピーして、「遅延読み込み対象にするスクリプトのキーワード」部分にペーストしましょう。自分のサイトからの場合はこれで対応が可能ですが、実際にサイトを遅くしている大きな原因がGoogleさんだったりします。
SWELLでは、GoogleアドセンスやGoogleアナリティクス、Googleタグのための専用コードが用意してあるので、コピペすると楽チンです！
- adsbygoogle.js,
- googletagmanager.com/gtag/js,gtag(, （トラッキングコードがgtag.jsの場合）
- google-analytics.com/analytics.js, （トラッキングコードがanalytics.jsの場合）
- googletagmanager.com/gtm.js,
ほかにもいくつかコードはありますが、Google関係のみのコードをピックアップしています。
その他、SWELL内で読み込むスクリプトを遅延読み込みさせる場合、
これらを参考にして必須なのは「,区切りで入力すること」！と公式サイトに書いてあります。改行はしなくても良いですが、見やすいので改行すると良いでしょう。
ここまでできたら、変更を保存して表示速度を確認してみましょう！その結果がこちら。
試してみる価値ありでした。携帯で緑が出たことがなかったのでテンションが上がりました。まだまだ改善点はあるようですが、表示速度に関しては今のところ満足です。
まとめ
本記事では、『SWELL』を使用しているのに、「使用していないJavaScriptの削減」が原因で表示速度が遅くなっている方のための解決方法を紹介しました。
これをするだけで表示速度、特にモバイルの速度がググッと上がります。
余談ですが、
PageSpeed Insightsで表示速度を調べるとなぜか、米領サモアとアメリカでの表示が2つずつ上がります。最初は気付かずにこんなところで私のブログを読んでくれてる人がいるのだと大喜びしましたが、どうもぬか喜びのようです。
表示速度を測定するたびに米領サモアとアメリカに一度接続されて、表示数をしてカウントされるというわけです。表示速度を調べれば調べるほど、米領サモアとアメリカでの表示数が上がりますが、それは実際の表示数とは違うフェイクなので注意してくださいね！
ほかのJavaScriptの遅延読み込み対策のプラグインや機能はSWELLの機能を妨げる可能性があるので削除してくださいね！
「使用していないJavaScriptの削減」対策は5分もあれば簡単にできるので、PageSpeed Insightsとにらめっこして表示速度で悩んでいる方は一度はお試しください。私は1週間ほど表示速度をにらめっこして、「スクリプトを遅延読み込みさせる」までは辿り着きましたが、「,（コンマ）」を入れずにコピペしていたので、全くスピードアップしなかったことがわかりました。
なので、
『SWELL』で「使用していないJavaScriptの削減」対策でお悩みの方のお手伝いができれば嬉しいです。本日もお付き合いいただきありがとうございました！
- リスト
- リスト
- リスト
コメント
コメント一覧 （2件）
御社の当サイトを拝見し大変参考になり助かってます。
私はホームページビルダーを使って弊社のHP を制作してます。
しかし、皆さんは ワードプレスを使い、プラグインを多用し制作しているようです。
私みたいにホームページビルダー などで制作している方は少なく、制作に当たり資料・データーがほとんど無い状態ですが、御社のサイトは私にとっては大変ありがたい資料が凝縮されて参考になってます。
何せ、来年 70才になる老人です、でも 弊社のHP ぐらいは自分で勉強して制作を続けていこうと思ってます。
一つ難問があり「使用していないJavaScriptの削減」が、何とか良くできないのか模索中です、良い方法はありませんか ?
忙しいとは存じますが、よろしくお願いします。
このようなブログを参考にしていただいて大変嬉しく思います。私自身もGoogle検索をしながらの試行錯誤でのワードプレス作成なので、残念ながら「使用していないJavaScriptの削減」については表面的な知識のみです。お役に立てず申し訳ありません。ホームページビルダーから作り上げているとのこと、何かと大変そうなイメージですが頑張ってください。