MENU

DX開発に関するご相談・ご質問は、お気軽に
080-3339-4684
営業時間：10:00〜20:00

LINE問合わせ
お問合せ
  1. ホーム
  2. SEO
  3. 【swell 初心者向け】PageSpeed Insightsで「使用していない JavaScript」を削減しよう！

【swell 初心者向け】PageSpeed Insightsで「使用していない JavaScript」を削減しよう！

SEO swell xserver

PageSpeed Insightsで「使用していない JavaScript」を削減するまでやる人は、なかなかいないけど私は、そこまでやります笑

下記のxでも記載したけどここまでやったらモノホンだと思ってます笑

目次

Step1: PageSpeed Insightsで削減対象を探す

  1. PageSpeed Insights にアクセスし、スピード計測したいサイトのURLを入力して解析します。
  2. 結果画面にある「使用していない JavaScript の削減」の項目を探します。
Screenshot
  1. そこに表示されている ～～～～.js のようなURLをコピーします。
    • .js の場所が分かりづらい場合は、URL部分を右クリック →「リンクのアドレスをコピー」で取得できます。

Step2: SWELLの高速化設定でスクリプトを遅延する

  1. WordPressの管理画面から「SWELL設定」→「高速化」のタブを開きます。
  2. ページを下の方にスクロールすると「スクリプトの遅延読み込み」という項目があるので、「スクリプトを遅延読み込みさせる」を有効にします。
  3. 先ほどコピーした.jsファイルのURLを、以下の形式で入力していきましょう。
    • URL + "," で区切って改行しながら複数入力可能です。

～～～.js や ～～～/js のように、ファイル名だけでなくドメイン部分も含めましょう。

入力例


arduinoコードをコピーするhttps://example.com/wp-includes/js/some-script.js,
https://example.com/wp-includes/js/another-script.js,

上記のように改行を入れて、必要なスクリプトを並べていきます。

Step3: 遅延させる秒数を設定する

  1. 遅延させたいJavaScriptファイルが入力できたら、同じページ内に「遅延させる秒数」という項目があります。
  2. ここで指定した秒数の間は、サイト読み込み時に対象のJavaScriptを先送りにすることが可能です。
    • 例として、7秒 など必要に応じて設定します。
  3. 最後に「変更を保存」をクリックして完了です。

設定後は、もう一度PageSpeed Insightsでサイトスピードを測定してみましょう。

重要！遅延させると不具合が出るJavaScriptの注意点

「スクリプトを遅延読み込みさせるぞ！」と張り切る前に、遅延させてはいけないJavaScript もある点に気をつけましょう。

jQuery は要注意

jQuery.js はサイト内のさまざまな動きを制御している重要なライブラリです。

ハンバーガーメニューやスライドショーなど、「ファーストビューですぐに必要な動き」にjQueryが使われている場合、遅延すると表示崩れや動作不具合が起きやすいです。

不具合が起きたら1つずつ除外

もし遅延後にサイトが崩れたり動作が重くなった場合は、対象の.jsファイルを1つずつリストから外して原因を特定するようにしましょう。

jquery という文字がURLに含まれている場合は特に除外推奨です。

まとめ

  1. PageSpeed Insights で「使用していないJavaScript」を確認
  2. SWELL設定 → 高速化 でスクリプト遅延をオンにし、該当.jsファイルを登録
  3. 遅延秒数を設定し、必要に応じて調整
  4. jQuery をはじめとする、表示や機能に直結するスクリプトは遅延NG
  5. 設定後はもう一度 PageSpeed Insights でスコアチェック

不要なスクリプトを遅延させることで、ページの読み込み速度向上を期待できます。ただし、重要なJavaScriptまで遅延させるとサイトが正常に動作しなくなる可能性があるため、慎重に確認しながら設定することが大切です。

豆知識　jQuery か JavaScriptかの判断方法

jQuery は JavaScript（いわゆる「生の JavaScript」や「Vanilla JS」）をベースにしたライブラリですが、ソースコードの記述や呼び出し方に違いがあります。以下のポイントをチェックすることで「jQuery を使っているか、それとも純粋な JavaScript か」を判断できます。

1. $（ドルマーク）や jQuery 関数を使っているかどうか

  • jQuery の典型的な書き方jsコードをコピーする$(document).ready(function() { // jQuery コード }); // または jQuery(document).ready(function() { // jQuery コード });
  • jQuery で DOM を選択するときjsコードをコピーする$('#someId').text('Hello jQuery!'); などのように、$() や jQuery() といった呼び出しを使って要素を取得している場合は jQuery です。
  • 純粋な JavaScript (Vanilla JS) の書き方の例jsコードをコピーするdocument.addEventListener('DOMContentLoaded', function() { // Vanilla JS コード }); // または document.getElementById('someId').textContent = 'Hello JavaScript!'; など、document.getElementById() や querySelector()/querySelectorAll() を直接呼び出しているコードは、基本的に純粋な JavaScript と判断できます。

2. jQuery 特有のメソッドが使われているか

jQuery では、以下のようなjQuery 特有の短いチェーンメソッドや関数をよく使います。これらを見かけたら jQuery だと判断できます。

  • .ajax(), .get(), .post()
  • .fadeIn(), .fadeOut(), .slideUp(), .slideDown() などのアニメーション系
  • .on(), .off(), .click(), .hover() などのイベント登録系
  • .each() などのループ系
  • .html(), .text(), .val(), .attr(), .css() など要素操作系

これらのメソッドが $() からチェーンされている（例：$('#someId').fadeOut(); など）場合は、jQuery を使っているとわかります。

3. スクリプト読み込み時のライブラリ確認

HTML ファイルの <head> や <body> の中で、jQuery の CDN やローカルファイルを読み込んでいるかどうかをチェックする方法です。

htmlコードをコピーする<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

などのように jQuery ファイルを読み込んでいれば、（たいていの場合）jQuery を使っている可能性が高いです。
逆に、jQuery のスクリプトファイルを読み込んでいないのに $ や jQuery 関数を使っている場合は、エラーになるか、jQuery を模倣している別の実装をしているかのどちらかです。

4. $ が使われていても要注意

  • 一部のフレームワークやライブラリでも $ を使う場合があります（例：Zepto.js など）。必ずしも $ = jQuery とは限らないので、単に $ だけ見て判断するのは早計です。
  • 確実に判断したい場合は、.ajax() や .fadeIn() などのjQuery 特有のメソッドを使っているか、あるいは jQuery という名前空間を使っているかを確認してください。

5. まとめ

  1. コード中の $() または jQuery()
    • DOM 要素取得やイベント処理に $() や jQuery() を使っていたら jQuery。
  2. jQuery 特有の短いチェーンメソッド
    • .ajax(), .fadeIn(), .on(), .html() などが見られる場合は jQuery 。
  3. スクリプトタグの読み込み
    • HTML 内で jQuery ファイル（CDN 等）を読み込んでいるなら jQuery を使う可能性が高い。
  4. $ は他のライブラリでも使われる可能性があるので注意。
    • 確実に jQuery か確認したいときは、jQuery 特有メソッドの使用状況や jQuery という名前空間をチェックする。

これらのポイントを確認すれば、そのコードが「jQuery を使っているか、純粋な JavaScript か」をほぼ判断できます。

豆知識　スコアを上げるためのフォント選び

swellユーザーが使用している明朝体は、スコアを下げてしまうから游ゴシックかゴシックを使用した方がスコアがめちゃ変わりますよ笑

SEO swell xserver

この記事が気に入ったら
フォローしてね！

Follow Me
よかったらシェアしてね！
  • URLをコピーしました！
目次