Tweet
- 井上 みやび子
- すぐ使える株式会社 代表取締役
- 東京都
- Webエンジニア
注目の専門家コラムランキング
対象：ホームページ・Web制作
- 原島 洋
- （Webプロデューサー）
- 井上 みやび子
- （Webエンジニア）
こうして改善、Google のスコア (6) JavaScript の最適化
-
さて前回はCSSファイルの調整を行ってページ表示速度の向上を目指しましたが、今回は JavaScript の最適化についてご紹介します。
JavaScript最適化の原則
CSSファイルの場合はページの冒頭の<head>-</head>内に書くのが原則というご説明をしましたが、JavaScriptファイルの方はページ末尾に置くのが原則です。
表示速度アップのために取り得る対応としては、(1)ページ末尾に<script>タグを移動する、(2)ファイルが分割されていたらまとめる、(3)ファイルを圧縮するの3つです。
ただ JavaScriptは読み込まれる順番が非常に大事で、むやみやたらと移動したり圧縮したりすると、ページの表示がおかしくなる場合があります。このため、この記事では、(1)の移動のみに対応を絞り、その中でも、<script>タグの移動方法の原則と、移動してはいけないケースをご紹介します。
JavaScript最適化のための<script>タグ移動方法
JavaScriptの最適化でページ表示速度を向上させるには、ページ内に含まれている<script>タグを、全て元と同じ順番で（←ここが重要です！）</body> （終了タグ）の直前に移動します。<head>-</head>内も含め、<scritp src="..."> の形式で外部ファイルを指定しているものと、<scritp> と </script> の間に直接プログラミングコードが書かれているものの両方が対象です。
TwitterやFacebookのボタンについて
特に、TwitterのツイートボタンやFacebookのいいね！ボタンは、ボタン表示位置を示す<div>タグや<a>タグの直後に<script>タグを置いて下さいと指示がある場合がありますが、これも<script>タグだけ離してページ末尾に置いて問題ありません。
TwitterのツイートボタンやFacebookのいいね！ボタン用の<script>タグは、TwitterサイトやFacebookサイトにカウント数などの情報を取るためにアクセスしますので、これがページ中途にあると、ネットワークの問題が原因で非常に表示が遅れる場合があります。このため、これらのボタン用の<script>タグはページの末尾に移動すると、内容の表示速度が改善されます。
JavaScriptを移動してはいけないケース
一方、JavaScriptを移動すると表示がうまく行かなくなる場合もあります。
document.writeという記載がある場合
ヘッダ内ではなくページのコンテンツの間に<script>タグがあり、その中に直接プログラミングコードが書かれている場合、移動前にこの中身を確認して下さい。「document.write」という記載がある場合は、まさにその位置に<script>タグが無いと表示がうまくされません。この場合はタグの移動によるそのページのJavaScriptの最適化はあきらめて下さい。
このような記載は比較的単純なページで見られる事が多いですが、他に<script>タグを読み込んでいないのであれば、速度的に大きな問題になる事はありません。一方、この記載と組み合わせて jQuery などの JavaScript ファイルを読み込んでいる場合は、別の書き方に変えてJavaScriptの最適化を行った方が表示速度としてはメリットがある場合があります。これは個別の問題になりますので、最初にページを作った方に相談してみて下さい。（私でも相談を受け付けています。）
Google Analyticsのテスト
Google AnalyticsでA/Bテスト（「ウェブテスト」）を行う場合はGoogleから<script>タグが提供されます。このタグは、Googleの指示通りに<head>の開始直後に置かないとうまく動きません。
まとめ
いかがでしたか？プログラムを触るのは少し緊張するかもしれませんが、JavaScriptは移動で速度改善ができるものが多いです。時間のある時に、バックアップを取って取り組んでみて下さい。
このコラムに類似したコラム
これからの時代に求められるSEO 瀧内 賢 - Webプロデューサー（2015/08/10 10:00）
こうして改善、Google のスコア (4) ページを圧縮して表示速度改善 井上 みやび子 - Webエンジニア（2013/10/22 07:00）
こうして改善、Google のスコア (3) キャッシュを利用した表示速度改善 井上 みやび子 - Webエンジニア（2013/10/16 06:00）
