ビデオタグによるページの読み込みスピードの問題

今回はWebサイトのパフォーマンスを向上させるちょっとしたテクニックをご紹介します。 1MBや2MBもあるような重い動画をそのまま下記のようにHTMLで読み込むと、ビデオの読み込みのせいで他のリソースのロードが遅くなってしまい、結果としてWebサイト全体の表示が遅くなってしまいます。

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

以下のようにローディング処理が終わった後から、重い動画を挿入するようなテクニックがよく使われます。

window.addEventlistener('load', () => {
  document.querySelector('.js-movie').innerHTML = 
`<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>`;
});

参考



Home
Next entry →