BLOG

  1. HOME
  2. ブログ
  3. WEB制作・デザイン
  4. コーディング(html/css/JavaScript)
  5. Webサイトの表示速度を改善する非同期・遅延読み込みまとめ
by ウラカワ ウラカワ

Webサイトの表示速度を改善する非同期・遅延読み込みまとめ

Webサイトの表示速度を改善する非同期・遅延読み込みまとめ

こんにちは、VRゲームにハマり自宅でライトセーバーを振り回してるウラカワです。

昨年chromeにloading属性が実装されたりと、表示速度を改善するための仕組みがどんどんブラウザに追加されて便利になってきてますね。

今回はリソースの非同期・遅延読み込み方法をまとめてみました。

画像とiframeの遅延読み込み

Chromium系は機能が実装されたので<img><iframe>loading="lazy"をつけるだけ!!

非対応ブラウザの場合はLazysizesなどのJSライブラリを使うことになります。

Navitve lazy loadingの対応・非対応ブラウザの判定は可能なので、非対応の場合だけLazysizesを使うといったことが可能です。

その場合、対象にdata-src="xxx" loading="lazy" class="lazyload"が必要になります。

パスの指定はともかく対象全部にloading="lazy" class="lazyload"と両方書いていくのは非常に面倒なので、実際に記述するのはloading="lazy"だけとし、<picture><source>も考慮して実装してみました。

動画の遅延読み込み

自動再生しない動画に関しては、preload属性にmetadataもしくはnoneを付けることで無駄な読み込みが無くなります。

逆に自動再生させたい場合はLazysizes拡張プラグインを使うと簡単に実装出来ます。

まず最近のブラウザで自動再生させるにはmuted loop playsinline属性が必要です。

さらにpreload="none" data-autoplay=""とすることで動作します。

JavaScriptの非同期読み込み

deferasync属性を使う、もしくは</body>直前に置く形になります。

ただし、それぞれ読み込みと実行タイミングが違うので内容に合わせて使い分ける必要があります。

基本は<head>内でdefer属性を使うようにしておけばトラブルが起こりにくいかと思います。

asyncは非同期実行ですが<link rel="preload">で優先度を上げて実行タイミングを早めることも出来ます。

CSSの非同期読み込み

遅延読み込みすると当然スタイルが適用されてない状態でレンダリングされるので、ファーストビューのみインラインにしておくか、通常通り読み込んでおくのが前提です。

ブラウザ側で機能は用意されていないので手法としては以下のようになります。

  1. media="print"としておくことで低優先度で非同期ダウンロードする。
  2. ダウンロード完了時にmediaを書き換える。

loadCSSというライブラリを使う方法もあります。

preload

記事内でもいくつか出てますが、<link rel="preload">を使うと通常よりも先にダウンロードしておくことが出来ます。

あくまでダウンロードの優先度を上げるだけ。(表示、実行はされない)

ページ内やCSS・JS内にあるレンダリングに影響しそうなものを先にダウンロードしておくことが可能です。

最後に

今回紹介したものは非同期・遅延読み込み中心でしたが、Resource Hintsというページ遷移後に必要なリソースを先読みして表示速度を改善するものもあります。

こういった技術も合わせて表示速度を最適化し、より良いUXを目指したいですね!

ではまた!

マグネッツとは?
福岡でWEB制作や中小企業様の集客支援などを行っている会社です。
新着情報配信中!
商用利用OK&無料!総合素材サイト|ソザイング
ページの先頭に戻る