【今日のQ&A】jQueryスクリプトはどこに置く?【jQuery】

こんにちは、@codeship_techです。

今回はjQueryのスクリプトを置く場所についてです。

どこに置いても読み込まれさえすれば動作するのですが、置き場所によってどのような影響があるのでしょうか?

jQueryのCDNタグおよび、自分のjQueryスクリプトはHTML内のどこに置いたら良いんですか?

基本はbodyタグの一番下、それで動かないコンテンツがあるときはheadタグ内部です。

HTML
<script
 src="https://code.jquery.com/jquery-3.4.1.js"
 integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
 crossorigin="anonymous"></script>  

HTMLがロードされるとき、画面の上から順にタグを表示していきますが、scriptタグが発見されるとHTMLのロードは一旦止まり、内部のJavaScript(またはjQuery)の解析に入ります。

もしheadタグにscriptがあると、HTMLのbodyを描画する前にJavaScriptの解析を初めてしまうので、ロードが遅くなります

SEOの観点から、Googleのサイトアルゴリズムはロードの早いページに高得点をつけることが知られています。
この場合のロード完了とはHTMLとCSSさえロードができていれば良いとされているので、ロードを早めるためにscriptタグはbodyタグに置くのが望ましいのです。

WordPressなどテンプレートエンジンを用いている場合はheaderタグにJavaScriptを読み込むことも多く注意が必要ですが、大半はフレームワークの誘導に従うことで解決できます。

関数リファレンス/wp enqueue script \- WordPress Codex 日本語版

授業日記についてのご意見

CodeShipの授業について「こんな事が知りたい・紹介して」というご意見・ご提案がありましたら、CodeShip公式Twitterアカウント(【CodeShip】プログラミングスクール)までDMまたはリプライにてお寄せください。