「使用していないJavaScriptの削減」でお悩みの方へ。『SWELL』で表示速度を上げる方法

2022年度の国内シェアNo⒈のワードプレス・テーマ『SWELL』、何かと話題ですよね。

その中でもメリットとして挙げられているのが表示速度の速さ、ではないでしょうか？グーグルによると、サイトの表示速度が3秒以上になると、サイトを離れる割合が50%以上になるとか。つまりは半分以上の人がスピードが遅いと記事まで辿り着かずに離れてしまう、というわけです。

サイトページの表示スピードを計測してくれるページがPageSpeed Insightsです。

自分のサイトはどうなのだろう、と表示速度を調べてみたところ、

表示速度を表す数字が赤い四角で囲んだところです。なんとこんなに遅い！左がモバイル、右がパソコンでの表示速度です。モバイルでは15秒以上になることも！

現在はモバイルでのサイト閲覧が70%を越えるので、モバイルでの表示速度はとても大事です！記事の内容もまだまだ足りませんが、表示速度がサイト訪問者減少に繋がっているのだったら、まず対処しなければいけませんよね。

この中で、表示速度に関わってくるのが、

Largest Contentful Paint（ページの読み込みに要する時間）に関する部分なので、何が悪いのかをみてみたところ、

「使用していないJavaScriptの削減」の文字。

よくわからないものの対策を実行してみた結果がこちら。

ほかにも改善点はあるものの、一番はじめの表示速度はだいぶ上がりました。3秒には届きませんが、15秒以上に比べたら4秒程度にはなったので、かなりの改善ではないでしょうか？（モバイルの速度）

そこで、本記事では「使用していないJavaScriptの削減」でお悩みの皆さまに、表示速度を上げる方法を2つ紹介します。

方法1・余計なプラグインを削除しよう！

とあるサイトにはプラグインは5つ程度にしよう！と書いてありました。以前使っていたテーマでは目次を作るプラグイン、アーカイブを作るプラグイン、などなどインストールして気づけば20以上のプラグインを使っていました。

『SWELL』にして良かったことは、それらのプラグインが必要なくなったこと！以前頑張ってインストール、設定したこともいい勉強になりましたが、今まで書いたブログも『SWELL』を使っていたら必要なかったことがわかりました。有料テーマはプラグイン面やSEO対策が行われているのでお金を出す価値があると言われる理由もわかりますね。

『SWELL』ホームページでも「推奨プラグインと非推奨・不要・注意すべきプラグインについて」が紹介されています。

SEO対策のプラグインをして「SEO SIMPLE PACK」は推奨プラグインとして紹介されています。開発者の了さんもかかわっていたプラグインですね。

非推奨なプラグインとして、

基本不要なプラグインとして

意味もわからず「とりあえず」で導入するべきではないプラグインとして

その他、不具合の原因になるかもしれないプラグインとして、

などは要注意です。

その他推奨プラグインもありますが、こちらでは削除するプラグインにスポットを当てました。

Jetpackに関しては、ワードプレスの契約時に使用しているので削除できないため、遅延読み込み機能など、SWELLの機能と被るものはオフに。セキュリティ面だけは残しました。それでも、まだ表示速度は10秒そこそこ。

そこで辿り着いたのが、「使用していないJavaScriptの削減」でした。

方法２・「使用していないJavaScriptの削減」対策をしよう

「使用していないJavaScriptの削減」対策は簡単にSWELLの設定からできます。

色々難しいことはわかりませんが、「使用していないJavaScriptの削減」対策には「スクリプトを遅延読み込みさせる」設定が必要です。

実際にやってみましょう。

「SWELL設定」→「高速化」を選ぶと「スクリプトを遅延読み込みさせる」と欄が出てきます。

「スクリプトを遅延読み込みさせる」をオンにしましょう

最初にいくつか、デフォルトのものが入っていますが、そこはいじらなくてオッケー。これらはSNSボタンの読み込みに関わってくる部分なので削除してしまうとサイトが遅くなってしまう可能性もあります。ご注意ください。

ここには、「サイトを読み込む時に悪い影響＝サイトを遅くする」コードが入力するのですが・・・。

「使用していないJavaScriptの削減」はどこからわかる？

では実際にサイトを遅くするコードはどこからわかるのでしょうか？

ここで出てくるのがまた、PageSpeed Insightsのページ。

すでに対応してしまったので黄色になっていますが、元々はここが９秒ほどあり、赤でした。赤で囲んだ部分がサイトが遅くなる原因ですよ！と教えてくれているので、ここをどうにかしないといけませんね。

簡単に言うとスピードアップのために、赤で囲んだ部分をコピーして、「スクリプトを遅延読み込みさせる」のです。

/で囲まれた部分からjsまでの部分が必要なコードなので、これを例にすると、

“jquery.min.js”までをコピーして、「遅延読み込み対象にするスクリプトのキーワード」部分にペーストしましょう。自分のサイトからの場合はこれで対応が可能ですが、実際にサイトを遅くしている大きな原因がGoogleさんだったりします。

SWELLでは、GoogleアドセンスやGoogleアナリティクス、Googleタグのための専用コードが用意してあるので、コピペすると楽チンです！

その他、SWELL内で読み込むスクリプトを遅延読み込みさせる場合、

これらを参考にして必須なのは「,区切りで入力すること」！と公式サイトに書いてあります。改行はしなくても良いですが、見やすいので改行すると良いでしょう。

ここまでできたら、変更を保存して表示速度を確認してみましょう！その結果がこちら。

試してみる価値ありでした。携帯で緑が出たことがなかったのでテンションが上がりました。まだまだ改善点はあるようですが、表示速度に関しては今のところ満足です。

まとめ

本記事では、『SWELL』を使用しているのに、「使用していないJavaScriptの削減」が原因で表示速度が遅くなっている方のための解決方法を2つ紹介しました。

『SWELL』で推奨していないプラグインを削除する

「使用していないJavaScriptの削減」対策には「スクリプトを遅延読み込みさせる」スクリプトのキーワードを設定する

この2つをするだけで表示速度、特にモバイルの速度がググッと上がります。

余談ですが、

ほかのJavaScriptの遅延読み込み対策のプラグインや機能はSWELLの機能を妨げる可能性があるので削除してくださいね！

「使用していないJavaScriptの削減」対策は5分もあれば簡単にできるので、PageSpeed Insightsとにらめっこして表示速度で悩んでいる方は一度はお試しください。私は1週間ほど表示速度をにらめっこして、「スクリプトを遅延読み込みさせる」までは辿り着きましたが、「,（コンマ）」を入れずにコピペしていたので、全くスピードアップしなかったことがわかりました。

なので、

「,（コンマ）」を忘れずに「スクリプトを遅延読み込みさせる」をすれば、モバイルの表示速度90も夢ではありませんよ！

『SWELL』で「使用していないJavaScriptの削減」対策でお悩みの方のお手伝いができれば嬉しいです。本日もお付き合いいただきありがとうございました！