Webページのパフォーマンス向上は、ユーザーエクスペリエンスとSEOの両面で重要です。この記事では、ページのパフォーマンスを向上させるための2つの主要な手段について説明します：画像の遅延読み込みとビデオの優先読み込み。

 

1. 画像の遅延読み込み
ウェブページに多数の画像が含まれている場合、すべての画像を一度に読み込むとページの読み込み速度が遅くなります。これを解決するために、画像の遅延読み込みを使用します。画像の遅延読み込みとは、必要な時点まで画像の読み込みを遅らせることです。

 

JavaScriptライブラリ「lozad.js」を使用して遅延読み込みを実装することが可能です。以下にその手順を示します。

 

最初に、ページに「lozad.js」を含めます。

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>
次に、遅延読み込みを行う画像に class="lozad" を付け、src 属性を data-src に変更します。

<img class="lozad" data-src="image.png" alt="Your Image Description" />
ページが読み込まれたときに、「lozad.js」を実行します。

const observer = lozad();
observer.observe();
さらに、遅延読み込みを適用しない画像には、class="skip-lazy" を付けることで、その画像に対する遅延読み込みをスキップすることができます。

 

2. ビデオの優先読み込み
ページの読み込み速度に影響を与えるもう一つの要素はビデオです。特に自動再生するビデオはページの読み込み速度に大きな影響を与えます。ビデオの読み込み速度を上げるためには、
<link rel="preload"> を使用してビデオの優先読み込みを行うことができます。

<link rel="preload" as="video" href="path-to-your-video
JavaScript