Webサイトの表示速度をあげる小技〜クリティカル レンダリング パスから考える
URLを入力、あるいはGoogle検索でヒットした一覧からリンクをクリックしてページを表示させるまでの間、ブラウザでは様々な処理が行われます。
最初にページが表示されるとき、複数のステップをふんでレンダリングされますが、それを『クリティカル レンダリング パス』と呼びます。
クリティカル レンダリング パスのフローは、下記のような流れになります。
①DOMの構築
DOM(Document Object Model)は、HTMLの各ノード(要素タグ)をそれぞれ親要素にぶら下げてツリー構造で表現されます。
②CSSOMの構築
DOMの各ノード(要素タグ)ツリー構造にスタイルを適用します。
ブラウザがCSSファイルをキャッシュしていたとしても、CSSOMはキャッシュされず、表示のリクエストがあるたびに再構築されるため、パフォーマンスに大きく影響を与えます。
③Javascript実行
パーサーはHTMLのヘッダ内にある内容を上から読んでいきます。Javascriptを見つけたらそこで実行します。
④レンダリングツリーの生成
上位から下位にスタイルを決定し、レンダリングツリーを構成して描画処理をします。
ここが構築されて初めて目に見える形になります。
⑤レイアウト生成
画面サイズの割り当てを行います。
viewportなどはここで判定されて実行されます。
⑥レンダリング
①〜⑤までのステップから最終的な判断ののちに表示が行われます。
表示速度を上げる小技
スタイルシートの見直し
②のCSSOMでは、以下の対策でパフォーマンス低下を回避します。
ファイル内でのインポートはしない
CSSファイル内でのインポートはせず、読み込むCSSファイルを一枚にまとめる
@import url(“CSSファイル名.css”) ・・・・ ✖️
ファイル内でのインポートはしない
「media=”print”」などで必要なときだけ読み込む
・・・・ ◯
・・・・ ◯
Javascriptの見直し
Javascriptのインライン化
<script type=”text/javascript” src=”JSファイル.js”></script>
ではなく、
<script type=”text/javascript”> /* JavaScriptプログラムの内容 */ </script>
などとする。
Javascriptを非同期にする
タグ内に『async』を記述して非同期の読み込みにする。
<script async type=”text/javascript” src=”JSファイル.js”></script>
ただし、最初に見える部分の挙動に影響を与えるスクリプトの場合は注意が必要です。
非同期処理の場合は処理順はランダムに行われます。
画像の見直し
「クリティカル レンダリング パス」には直接関係ないものの、データ転送に負荷を与えるのが画像読み込みです。
データ転送容量の大部分を占めるのが画像であり、スマートフォンでの閲覧時には大きく影響を与えます。
画像を圧縮する
Adobe Photoshop やWebサービスの「TinyJPG(https://tinyjpg.com/)」、「Optimizilla(http://optimizilla.com/)」などを使ってファイルサイズを下げた画像を使用します。
CSS、JavaScriptファイルの圧縮
サイトによってはデザインやリッチな表現のためにCSSファイルやJavaScriptファイルのサイズが大きくなりがちです。
一ファイルあたりの減る量はわずかですが、少しでも小さくすることで数によっては大きな軽量化が期待できます。
CSS Compressor(https://csscompressor.com/)でCSSファイルの圧縮
ファイルの内容をコピペして[Compress]ボタンを押すだけ。
下のテキストフィールドをコピーして任意のファイルに貼り付けるだけ。
JavaScript Compressor(https://javascript-compressor.com/)でJavaScriptの圧縮
CSS Compressorと同様の操作でできます。
コーディング時の画像対策
imgタグを使用する際に、スタイルでサイズ指定するときは「50%」、「100%」といった相対サイズで表します。
これによって画像容量が減るわけではありませんが、不要なオーバーフローを避けて適切なデータ量の画像を使用することができます。
ロゴなどはSVGを使用して表現したりテキストも画像は極力使わずテキストで表現します。
いつも読んでくれてありがとね!