こんにちは
エンジニアのmiyachanです。
本記事は手軽に高速化できる方法②ということで、Webサイトの高速化手法 その①に引き続き、備忘録として残していきます。
前回の記事はこちらから
遅延読み込みとDOMのイベント
読み込み速度が速いと、ユーザーは快適にコンテンツを閲覧でき、長く滞在してもらえる可能性が高まります。
前回の画像圧縮に続いて、サイトの高速化に関連する2つの重要な要素、Lazy LoadingとDOM（Document Object Model）について説明します。
Lazy Loading（遅延読み込み）
Lazy Loading（遅延読み込み）は、主に画像の読み込みに関連しています。ページに多くの画像がある場合、一度にすべての画像を読み込むとページの読み込み時間が長くなりがちです。
Lazy Loadingは、ユーザーが画像を見るまで画像の読み込みを遅らせる手法で、ページが読み込まれた後、ユーザーが画像が表示される領域にスクロールするまで画像を読み込みません。これにより、ページの初期読み込み速度が向上し、ユーザーは速やかにコンテンツにアクセスできるようになります。
loading属性を使えば、画像の読み込みを遅らせることができます。要約すると、ユーザーが画像を見るまで、不要な画像の読み込みを先延ばしにし、ページの効率的な読み込みを実現することができます。
<img src="placeholder.webp" loading="lazy" alt="画像">DOM（Document Object Model）とは？
DOM（Document Object Model）は、ウェブページやXML文書の構造をプログラムで扱いやすく表現し、操作するためのしくみです。ブラウザがHTML文書を読み込むと、文書内の要素をツリー構造で表現し、それがDOMと呼ばれます。
DOMのイベント：DOMContentLoadedとLoad
1.DOMContentLoaded
DOMContentLoadedは、ウェブページの読み込みで言うと、HTMLの構造が理解され、DOMツリーができる段階で起こります。つまり、外部リソース（画像やCSSなど）の読み込みを待つことなく、基本的なページの骨組みが整ったときにこのイベントが発生します。
これが起きると、JavaScriptを使ってDOMにアクセスして、初期化や操作をすることができます。簡単に言えば、ページの基本的な構造ができたら、JavaScriptが動き出す合図とも言えるでしょう。
以下のコードは、DOMContentLoadedを使用して、ファーストビューの要素(アニメーション付き)を表示する例です。
<!-- HTML -->
<body>
<style>/* スタイルは簡略化のためにインラインで記述 */
#firstViewElement {
display: none; /* 最初は非表示にしておく */
font-size: 24px;
color: #333;
text-align: center;
margin-top: 50px;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
</style>
<div id="firstViewElement">
<!-- ファーストビューの要素 -->
ここに目を引くコンテンツが表示されます！
</div>
<script>document.addEventListener('DOMContentLoaded', function() {
// DOMContentLoaded 時の処理
let firstViewElement = document.getElementById('firstViewElement');
// ここでアニメーションや表示切り替えの処理を追加
firstViewElement.style.display = 'block';
firstViewElement.style.opacity = 1;
});
</script>
</body>この例では、最初に非表示にしておいた firstViewElement という要素が、DOMツリーが読み込まれた時に表示されるようになります。
イベントを活用してページの基本的な構造が揃った時、CSSのopacityを使用してフェードインのようなアニメーションを実行しています。
2.Load
Loadイベントは、ページ上の全てのリソース（画像、スタイルシート、スクリプトなど）が完全に読み込まれた後に発生します。このイベントは、すべての外部リソースが取得されるのを待ってから実行されるため、DOMContentLoaded よりも遅いタイミングとなります。通常、このイベントはページ上の全ての要素やリソースが揃ってから特定の処理を行う際に利用されます。
ページ全体の読み込みが完了した時点で何かしらの処理を行いたい場合に、load イベントが活用されます。
例として、スライダーのような重い処理を実装する場合、以下のようなステップを踏むことで読み込み時間を短縮していくことができます。
STEP 1. スライダーを初期状態で非表示にする
最初に、ページ読み込み時にスライダーを非表示にしておきます。これにより、初期表示時の負荷を軽減します。
<!-- HTML -->
<div id="slider" style="display: none;">
<!-- スライダーのコンテンツ -->
</div>STEP 2. load イベントでスライダーを発火させる
ページ全体の読み込みが完了した後に load イベントを検知し、スライダーの初期化処理を行います。これにより、他のリソースが読み込まれた状態でスライダーが表示され、ユーザーエクスペリエンスが向上します。
// JavaScript
window.addEventListener('load', function() {
// スライダーの初期化処理
initializeSlider();
});STEP 3. スライダーを非表示から表示に変える
load イベントが検知された後に、スライダーを非表示から表示に変える処理を行います。これにより、ユーザーがサイトにアクセスした際にスムーズな表示が可能となります。
// JavaScript
function initializeSlider() {
let slider = document.getElementById('slider');
// 重い処理やスライダーの初期化を行う
// 例: slider.init();
// スライダーを表示に変更
slider.style.display = 'block';
}これらのステップにより、ページの初期表示時の負荷を軽減し、load イベント後にスライダーを適切に表示させることができます。サイト全体の読み込みが完了してから重い処理を実行することで、負荷を軽減できるでしょう。
★[重要]DOMContentLoaded はDOMが使えるようになる早い段階で発生し、load はページ上のすべてのリソースが読み込まれた後に発生します。
DOMイベントの時間を計測するには
説明したイベントの読み込み時間はブラウザで確認することができます、
読み込み時間の長さ＝webページの表示するまでの長さとなりますので、読み込み時間をいかに削減できるかが肝となってきます。
例としてGoogle Chromeで確認する方法は、
- ページを開いた後、右クリックして「検証」を選択します。
- デベロッパーツールが表示されたら、「Network」タブに移動します。
- ページを再読み込みするか、新しいページを開いたときに、Networkパネルに読み込まれた各リソース（画像、スクリプト、スタイルシートなど）のリクエストとレスポンスが表示されます。
- 最下部には、ページ全体の読み込み時間が表示され、DOMContentLoaded イベントの発生と同時に読み込まれるリソースも確認できます。
- Loadイベントの発生時刻も同様に、Networkパネルに表示されているリソースの読み込み完了時間を確認できます。
完了時間は右下にこのように表示されています↓
★[重要]イベント間の時間差は、ユーザーが初めてページ上で何かを行うまでの待ち時間を示します。通常、DOMContentLoadedが早いほど、ページがユーザーに対して操作可能になる時間が短縮され、体感時間が短く感じることでしょう。ただし、Loadまでの時間も重要で、全てのリソースが読み込まれた後に完全にレンダリングされ、ユーザーがページを利用できるようになります。
まとめ
いかがでしたでしょうか。
これらの手法を活用すれば、読み込みにかかる時間を削減することができると思います。
自分自身も最初は不明瞭でしたが、これらの高速化手法をコーディングやブログを書きながら理解し、備忘録として残しておくことでよりクリアになりました。
次回からの技術ブログでは、もっと分かりやすく、読みやすい記事を心掛けて書いていきたいと思います。
ここまでお読みいただきありがとうございました。
65
