WEBサイトの表示スピードをアップしたいんだけどどうしたらいいのかな。JavaScriptのレンダリングを速くすると効果的って聞いたけどどうやってやるんだろう。
本日は上記の疑問にお答えします。
WEBサイトの表示スピードを上げるためにはJavScriptのレンダリングスピードの向上が欠かせません。
ただ実際にやってみようと思うとどうすればいいかわからない方も多いのではないでしょうか。
というわけで本記事ではJavaScriptのレンダリングを高速化させる方法について見ていきたいと思います。
レンダリングとは
そもそもレンダリングとは何でしょうか。
WEB制作をしている人であれば聞いたことがある方もいるかもしれませんが、そうでなければ中々耳にすることがない言葉だと思います。
レンダリングとは、何らかの抽象的なデータ集合を元に、一定の処理や演算を行って画像や映像、音声などを生成すること。例えば、一つのWebページに含まれる、HTMLやCSSなどによる描画内容の記述、スクリプトによる動作の記述、画像ファイルやフォントファイルなど外部のデータなどを組み合わせ、Webブラウザのウィンドウ内にページ内容の描画を行うことを指す。
引用元：e-words
つまり、WEBブラウザが元になるHTMLファイルやCSS、JavaScriptのファイルなどを読み込んで、「目に見える形にすること」をレンダリングというのですね。
例えば以下は簡単なHTMLのコードですが、このままではHTMLを勉強していない人は何かよく分かりませんよね。
<p><span style="color:red;"><strong>これがレンダリングです</strong></span></p>
しかしレンダリングされることによって以下のように誰もが分かる形でテキストファイルが出力されます。
これがレンダリングです
JavaScriptのレンダリングの高速化
このレンダリングを高速化させることで、WEBサイトの表示速度を早める事が出来、ユーザー体験の向上に繋がります。
高速化させるべきものはCSSや画像、JavaScriptなどがありますが、今回はJavaScriptの高速化について見ていきたいと思います。
JavaScriptのレンダリングを高速化させる方法は大きく分けて二つあります。
JavaScriptのレンダリングを高速化させる方法
・非同期で読み込む
・bodyの閉じタグの前に記述する
では上記の内容について順番に見ていきましょう。
非同期で読み込む
通常、HTMLに書かれているコードは上から順番に読み込まれ処理されますが、scriptのタグの中にasyncやdeferと記述する事であえて読み込むスピードを遅らせる事が出来ます。
例えば以下のように記述します。
<!-- async-->
<script src="test.js" async></script>
<!-- defer-->
<script src="test.js" defer></script>asyncとdeferって何？どう違うの？
| async | defer | |
|---|---|---|
| 実行するタイミング | DOMツリー構築前後に関わらず処理 | DOMツリー構築完了後に処理 |
| 実行する順番 | ファイルの読み込みが終わった順に処理 | HTMLの記述順に実行 |
asyncとdeferには上記のような違いがあります。
JavaScriptのファイルを処理するタイミングが問題にならない場合はdeferではなく、asyncで読み込んだ方がファイルが読み込まれ次第処理されるため、レンダリングの速度は速くなります。
ただ、もし「scriptタグはhead内に記述したい」といった場合はdeferを付与してわざとHTMLの記述後に読み込ませることが出来ます。
bodyの閉じタグの前に記述する
JavaScriptがheadタグの中にあると、JavaScriptの読み込みが終わるまでHTMLの読み込みが始まりません。
そのため、JavaScriptのコード数が多ければ多いほどHTMLを読み込み始めるのに時間を要することになり、結果的にページを読み込むスピードが遅くなる場合があります。
bodyの閉じタグの前に書けばHTMLファイルを読み込んでからjsファイルを読み込むため、レンダリングを速くすることができらというわけです。
bodyの閉じタグの前に書く場合の記述例
<html>
<head>
・・・
</head>
<body>
・・・
<script src="test.js"></script>
</body>
</htmlまとめ
というわけで今回はJavaScriptのレンダリングを高速化させる方法について見てきました。
前提として、レンダリングを高速化させるためには一つ一つの積み重ねが大事です。
一つの記述、一つの書き方でページスピードは変わるところが面白い部分でもあり難しい部分でもあります。
ただ今回ご紹介した方法であればJavaScriptのレンダリングを高速化することが出来るはずですのでぜひ試してみてください。
というわけで本日の記事は以上です( ͡° ͜ʖ ͡°)