こんにちは、@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を読み込むことも多く注意が必要ですが、大半はフレームワークの誘導に従うことで解決できます。
授業日記についてのご意見
CodeShipの授業について「こんな事が知りたい・紹介して」というご意見・ご提案がありましたら、CodeShip公式Twitterアカウント(【CodeShip】プログラミングスクール)までDMまたはリプライにてお寄せください。
