CSSやJavaScriptのコードをHTMLファイルとは別のファイルにして使用することを「外部ファイル化する」と呼んだりします。
例えば、以下のようなJavaScriptの書き方は「インライン」といい、(CSSでも同じ)
<html>
<head>
</head>
<body>
<script>
(ここにJavaScriptのコード)
</script>
</body>
</html>
以下のような書き方なら、それは外部JavaScriptファイルとして読み込むことになります。
<html>
<head>
</head>
<body>
<script src="ここにJavaScriptファイルへのパス"></script>
</body>
</html>
インラインで記述するか、それとも外部ファイルとするかは、それぞれにメリット・デメリットがあります。
それを知ったうえでどちらの方式にするかを選択するとベターでしょう。
外部ファイル化するメリットとデメリット
外部ファイル化する最大のメリットは「メンテナンス性が良くなること」です。
JavaScriptのコードをHTMLから分離させて複数のHTMLページから参照(呼び出す)ようにしておけば、後からJavaScriptのコード修正をする際には1つのファイルを編集するだけで済みます。
その反面、外部ファイル化にはデメリットもあります。
それは、「HTMLファイルから外部ファイルを読み込む際にHTTP通信が1つ発生する」ことです。
HTTP通信とはWebブラウザ(PC)とサーバーの間で行われる通信のことです。
通信によってファイルを読み込む際にはWebブラウザがサーバーに対して「HTTPリクエスト」をします。
それに対し、サーバーが返信することを「HTTPレスポンス」といいます。
リクエストとレスポンスはセットです。
これをファイルの数だけ繰り返すことでサーバーにあるデータをPC側にダウンロードし、Webブラウザはページを表示させているのです。
HTTP通信の数を減らすことはページの表示速度を上げるための基本です
HTTP通信の数を減らすことはページの表示速度を上げるためには基本のことです。
例えば「どこかのサイトを見ようと思ったらなかなか表示されず、ページ再読み込みのボタンを押したらすぐに表示された」という経験は多くの方があるのではないでしょうか？
そのように、何かのタイミングで通信がうまく行われないということはよくあることです。
通信速度だっていつも速いとは限りません。スマホのような無線通信の場合は時間帯によって混雑することもあり、特に不安定なものです。
HTTP通信の数を減らすことはそのような原因でページの表示が遅れるリスクを減らすことにも繋がります。
CSSで使う背景画像を1つにまとめる「CSSスプライト」というテクニックもHTTP通信の数を減らすことが目的です。
CSSスプライトも上記の外部ファイル化と同じく「メンテナンス性が落ちる」というデメリットがあるので、ページの軽量化とメンテナンス性の両立のためにどこで折り合いをつけるかが難しいところでもあります。
Twitterでフォローする
