jQueryの読み込みはhead内。(body閉じタグの前じゃない!?)|デザイナー、コーチ、ディレクターズメモ|井川igawa.

Memo

jQueryの読み込みはhead内。(body閉じタグの前じゃない!?)

驚き

jQueryの読み込みはhead内。(body閉じタグの前じゃない!?)

jQueryの読み込みはbodyの閉じタグの前じゃない。

少なくとも10年ほど前から、jQueryを含めJavaScriptの読み込みはbodyの閉じタグの直前に書いた方が良いと言われていたが、今回それが誤りである可能性があるということがわかった。

近年ではjQuery不要論も出てきているようだが、WordPressやスライダーなどで、変わらずガシガシと使われている。JavaScriptをバリバリ書けるようなコーダーであればjQueryは必須ではないかもしれないが、そうではない人やデザインよりの人にとっては、jQueryはまだまだ全然重宝されている。

比較的簡単に動きのあるデザインにするためには、jQueryは未だ効果的で、かつアップデートもされている。開発者のJohn Resig(ジョン・レシグ)さんは1984年生まれなので、jQueryが広がった当時はまだ20代、2022年現在でも30代の方だ。

John Resig(ジョン・レシグ)
画像引用元サイト:Wikipedia


そんな、Webデザインの世界では多くの人に知られているであろう、「jQuery」。
だが、その読み込み場所は、まさかの「head内」だった。

15年ほど前であれば、外部のJavaScriptファイルはhead内で読み込みましょう、というのが一般的だった。だがその後、おそらくはHTMLとCSSによるレンダリングの関係やサイトの読み込み速度の問題などで、外部のJSファイルはbodyの閉じタグの直前に書くというようにしましょう、と変わってきた。2022年時点、ブログや書籍、YouTubeなどでも、そう書かれていたり言われていたりすることは「かなり多い」だろう。実際、自分もそうしていた。

ところが、たまにあったのが、スライダーや(おそらくMasonryも)の読み込み不具合だ。自分でカスタマイズしていると、なぜか思い通りにいかず、テキスト部分の動きがカクカクしたり、リロードがうまくいかなかったりしてしまうのだ。

(※Masonryは今回の件に気が付く前に別のプラグイン、Magic Gridに変えていたため、検証はしていない。)

どこかのコードがバッティング、コンフリクトしているのだろうと使用を諦めたり、自分の技量不足だと諦めたり、許容範囲内であればインターネット回線が遅いからなのだろうと割り切ったりしていた。使用jQueryプラグインの変更や、CDNを使ったり、defer属性やacync属性を試したり、画像を軽量化したり遅延読み込みをしたりと、とにかく色々と解決策を探っていた。

jQuery


head内に書いたら即、解決した。

それが今回、問題の解決方法が判明した。下記のサイトが非常に参考になった。プログラムに詳しくない人間にとっては、非常にわかりやすく、ありがたい情報だった。

結論は単純。jQuery本体の読み込みは、headタグの中に書けば良かった。

参考:Takaさん 【JS】8分で理解 deferとasyncを図で説明してみた【図解】

参考:penpenさん scriptタグのasync/deferの使い分け

完全に盲点だったが、それでスライダーのカクつきはなくなり、PageSpeed Insightsで複数回の計測をしたところ、サイトの読み込み速度も上がった。


以下、検証結果。

ファーストビューレイアウト

jQuery本体とファーストビューに使用しているスライダーのjsファイルをhead内に、その他のファーストビューのレイアウトに関わらない外部jsファイルはbodyの閉じタグの前に記述。

スライダー有無

スライダーありのとなしの、2つのサイトで確認。
(※jQuery本体は両方とも公式サイトのCDNでhead内に記述。)

もともと両サイトともに85点前後だったが、90点前後となった。

●がっつりとSEOやスピード対策をしている英会話教室サイト「マイク英会話教室札幌」さま
※とてもユニークで楽しい先生です。
url:https://mikesenglishclass.jp
スピードチェック1

●やんわりとSEOやスピード対策をしているポートフォリオサイト
※ポートフォリオ&検証用の当サイトです。
url:https://igawa.co
スピードチェック3

そして何より、jQueryの公式サイトと、作者であるJohn Resig(ジョン・レシグ)さん自身のサイトを確認したところ、やはりjQueryはhead内で読み込まれていた。

参考:jQuery(公式サイト)

参考:John Resig – JavaScript Programming(作者のサイト)

本家本元のサイトがそうなのであれば、間違い無いだろう。


SEO的にはどうなのだろう?

ただ、ひとつ疑問が浮かんだ。サイトの本文の前、bodyタグの前のhead内でJavaScriptの長いコードを読み込むと、SEO的にはどうなのだろう?? と頭をよぎった。クロールに影響は出ないのだろうかと。

が、検索エンジン最王手のGoogle社のPageSpeed Insightsで読み込みが速いのであれば、問題ないのではないだろうか。この辺りは少し、様子を見てみようと思う。

2022.03.19追記)
SEO的にも特に問題はなかった。jQuery公式サイトがそうしていて、Google PageSpeed Insightsの速度も上がるのなら、少なくてもjQuery本体はhead内に書いた方が無難だろう。

jQueryの読み込みは、birdではなくhead。


疲れた時は、栄養を。
ポスト投函で届く、人気のブドウ糖です。
砂糖の代わりにコーヒーや紅茶などに。

Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いています。(元々はメモ書きでしたので順次見直し、更新しています。) 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 写真や動画はフリー素材、購入素材、もしくは自前のものを使用しております。

井川 宜久 | Norihisa Igawa
デザイナー、ディレクター、講師、コーチ / 井川宜久

お問い合わせ CONTACT..

    Name(required)お名前 (必須)
    Furigana(required)ふりがな (必須)
    Email(required)メールアドレス (必須)
    Phone Number(required)電話番号 (必須)
    Message(required)ご質問・ご要望 (必須)


    免責事項について

    • 事実や経験、調査や検証を基にしていますが、私はただの人間です。万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。
    • 万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。