MENU
  • ホーム
  • ブログ始めてみました
  • フィンランドの衣食住フィンランドでの生活で日々感じることを紹介
    • カフェ・レストランフィランドで訪れたオススメのカフェやレストランをご紹介
    • 料理レシピオススメのフィンランドレシピを紹介
    • 旅行
    • 小説・映画・作家フィンランドで出会ったオススメの本、作家さんを紹介
  • ライティング
結婚を機に2008年フィンランドに移住、旦那と息子と過ごすフィンランドでの日々を綴ります。
miyukiville in フィンランド
  • ホーム
  • ブログ始めてみました
  • フィンランドの衣食住フィンランドでの生活で日々感じることを紹介
    • カフェ・レストランフィランドで訪れたオススメのカフェやレストランをご紹介
    • 料理レシピオススメのフィンランドレシピを紹介
    • 旅行
    • 小説・映画・作家フィンランドで出会ったオススメの本、作家さんを紹介
  • ライティング
miyukiville in フィンランド
  • ホーム
  • ブログ始めてみました
  • フィンランドの衣食住フィンランドでの生活で日々感じることを紹介
    • カフェ・レストランフィランドで訪れたオススメのカフェやレストランをご紹介
    • 料理レシピオススメのフィンランドレシピを紹介
    • 旅行
    • 小説・映画・作家フィンランドで出会ったオススメの本、作家さんを紹介
  • ライティング
  1. ホーム
  2. ライティング
  3. 「使用していないJavaScriptの削減」でお悩みの方へ。『SWELL』で表示速度を上げる方法

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

2023 4/22
ライティング
April 22, 2023
laptop, mobile, writing

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

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

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

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

PageSpeed Insights, mobile,
PageSpeed Insights, PC

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

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

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

PageSpeed Insights

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

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

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

PageSpeed Insights, mobile
PageSpeed Insights, PC

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

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

目次

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

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

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

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

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

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

  • Gutenberg
  • WooCommerce
  • Elementor
  • 多機能なブロック拡張プラグイン
  • 高速化系プラグインで相性の悪いもの
    • Flying Scripts
    • Autoptimize
    • Async JavasScript
  • SWELLの標準機能と被っているもの
    • 目次生成プラグイン
    • 画像遅延読み込みプラグイン
    • ふきだしプラグイン

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

  • Classic Editor
  • AddQuicktag
  • TinyMCE Advanced

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

  • Jetpack
  • キャッシュ系プラグイン
    • 「WP Super Cache」
    • 「W3 Total Cache」

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

  • SiteGuard WP Plugin
  • EWWW Image Optimizer

などは要注意です。

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

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

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

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

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

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

サイトページを表示する時に、まず最初に読み込もうとするのが画像・動画などの重いファイルからなんです。そこで、ページの読み込みに時間のかかるファイルを読み込むのを後回し(遅延)して、文字などを一番大事な部分を優先に読み込んでもらうことが、

「スクリプトを遅延読み込みさせる」です。

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

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

SWELL setting, script, keyword

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

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

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

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

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

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

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

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

javascript, PageSpeed Insights

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

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

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

SWELL, google adsense
SWELL, google analytics
SWELL, google tag

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

SWELL, scriptcode

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

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

PageSpeed Insights, mobile
PageSpeed Insights, PC

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

まとめ

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

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

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

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

余談ですが、

PageSpeed Insightsで表示速度を調べるとなぜか、米領サモアとアメリカでの表示が2つずつ上がります。最初は気付かずにこんなところで私のブログを読んでくれてる人がいるのだと大喜びしましたが、どうもぬか喜びのようです。

表示速度を測定するたびに米領サモアとアメリカに一度接続されて、表示数をしてカウントされるというわけです。表示速度を調べれば調べるほど、米領サモアとアメリカでの表示数が上がりますが、それは実際の表示数とは違うフェイクなので注意してくださいね!

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

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

なので、

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

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

ライティング
laptop, mobile, writing

この記事が気に入ったら
いいね または フォローしてね!

Follow @miyukiville Follow Me
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメント一覧 (2件)

  • 佐々 陽一 より:
    5月 25, 2023 6:46 am

    御社の当サイトを拝見し大変参考になり助かってます。
    私はホームページビルダーを使って弊社のHP を制作してます。
    しかし、皆さんは ワードプレスを使い、プラグインを多用し制作しているようです。
    私みたいにホームページビルダー などで制作している方は少なく、制作に当たり資料・データーがほとんど無い状態ですが、御社のサイトは私にとっては大変ありがたい資料が凝縮されて参考になってます。
    何せ、来年 70才になる老人です、でも 弊社のHP ぐらいは自分で勉強して制作を続けていこうと思ってます。
    一つ難問があり「使用していないJavaScriptの削減」が、何とか良くできないのか模索中です、良い方法はありませんか ?
    忙しいとは存じますが、よろしくお願いします。

    返信
    • miyukio33o より:
      5月 27, 2023 12:33 pm

      このようなブログを参考にしていただいて大変嬉しく思います。私自身もGoogle検索をしながらの試行錯誤でのワードプレス作成なので、残念ながら「使用していないJavaScriptの削減」については表面的な知識のみです。お役に立てず申し訳ありません。ホームページビルダーから作り上げているとのこと、何かと大変そうなイメージですが頑張ってください。

      返信

コメントする コメントをキャンセル

Recipe Rating




  • online-store-gb9b3ce48a_640
    SWELLでPochipp(ポチップ)〜アフィリエイトプラグイン〜を簡単に設定する方法
  • laptop, mobile, writing
    「使用していないJavaScriptの削減」でお悩みの方へ。『SWELL』で表示速度を上げる方法
  • coffee, caffeine, beverage-2425303.jpg
    初心者ライターさん必見!Webライター検定3級合格を目指そう!
  • sunset, dusk, landscape-4460476.jpg
    ルース・ギャロウェイ・シリーズ
  • book, dog, fairy tales-794978.jpg
    エリー・グリフィス、洋書でミステリー+人間ドラマを楽しみたい人向けのイギリス人女性作家
  • カフェ・レストラン
  • フィンランドの衣食住
  • ライティング
  • 編み物・毛糸の購入
  • 自然
  • 健康・スポーツ
  • 小説・映画・作家
  • 料理レシピ
  • 旅行

にほんブログ村 ライフスタイルブログ 北欧ライフスタイルへ
にほんブログ村

目次