Webサイトの高速化に取り組んでいるのですが、ファーストビュー以外の画像の読み込みを遅らせて、FCPの改善に取り組んでいるところです。
しかしながら、Chromeのデベロッパーツールなどで確認しましても、サイトの高層化にはそれほど大きな影響はないと感じています。
この原因についてですが、パフォーマンスを確認してみますと、そもそもサーバーが画像を配信する秒数は非常に短く、複数の画像を同時に配信してくるため、数十KB程度の画像で数枚程度なら、遅延読み込みで枚数を減らしてもそれほど大きな影響はないものと思います。
サイトの高速化について、それよりも大きな影響があるのは、レンダリングの処理計算にかかる時間で差が出ることが多いです。
レンダリングをする際、レイアウトの複雑な計算を何度もしなおすことで時間がかかり、高速化のボトルネックとなっていることが多いと感じています。
ただし、ブラウザが実行するレンダリング計算の中身というか、プロセスが不明なため、この点を改善するにはかなり時間がかかりそうと考えています。
ただし、ページ内で無数の画像やWebフォントを使用している際には、ファーストビュー以外の画像の読み込みを遅延させ、スクロールして実際に表示される時になってから表示させるようにすれば、多少の高速化効果は見込めるものと思います。
これを実行するには、JavaScriptでの実装が必要になりますが、いわゆるIntersection Observerという技術を使うことで実装することができます。
イメージでいえば、あえてファーストビュー以外の<img>タグのsrcを崩すことにより、画像と認識されなくなるため、HTMLを読み込んだ時点では画像をダウンロードしなくなります。
<img>タグのままでしたら、HTMLファイルを読み込んだ時点でダウンロードされてしまうため、遅延することはできないため、<img>タグをそのままでな機能しないようにする必要があります。
けれども、ユーザーがスクロールをして、画像コンテンツの箇所に差し掛かった際に、<img>タグの箇所に投入するという仕組みです。
Webフォントについては、単なる遅延読み込みのため、ファーストビューが表示された後、実際にWebフォントが反映されますが、画像とWebフォントの遅延読み込みでは、Intersection Observerの仕組みを使うか使わないかでの違いがあります。
WebフォントでもIntersection Observerも使うことは可能ですが、特にメリットはないと感じています。
ただし、このような画像の遅延読み込みをしましても、そもそも数枚程度の画像の読み込みでしたら、それほど時間はかからないため、遅延してもしなくてもあまり大きな違いはないというのがぼくの印象です。