1ミリ秒でも早く届けたい! HTMLで画像読込を高速化するために取り組んでいること - ICS MEDIA

ウェブサイトの表示スピードはサイトの健全性における重要な観点の一つです。Googleが提唱するCore Web Vitalsコア・ウェブ・バイタルズと呼ばれる指標の中にもサイト表示スピードに関する項目があり、表示されるまでの時間が単なるユーザー体験だけでなく、SEOでも無視できない存在です。表示スピード低下の要因はネットワークやサーバーサイド、そしてフロントエンドまで広範囲におよびます。本記事ではその中でも画像の読み込みについて改善できるテクニックを改善前と改善後を比べながら紹介します。 改善前サンプルを別ウインドウで開く 改善後サンプルを別ウインドウで開く 画像読み込みBefore / Afeter 上図はLighthouseによるチェックの結果です。Lighthouseはウェブサイト検査ツールで、ウェブページのパフォーマンス、アクセシビリティ、SEOなどの状態を計測できます。Googl

[timetrain]

広告群がこれを導入するならばともかく、広告を無くすのが一番速いのではないだろうか（無理

[GENS]

Amazonみたくファーストイメージだけbase64エンコードしてHTMLに埋め込めばもっと早くなるで。

[hironagi]

広告画像を表示するまでは本文(数KBのテキスト)を絶対に表示しない仕様を先に何とかしてほしい

[fellfield]

すごいなーとは思うのだけど、かつて流行ったCSSスプライト等と同じで、過渡期の技術も多そうな気はしている。工数とのバランスを考えて選択したい。

[naggg]

フロントエンド開発から離れて久しいから、なるほどーってなる。

[Falky]

え？Amazonってまだbase64のHTML埋め込みやってんの…？なんでだろう。現代はHTTP/2なので、巨大ファイル1つに色々埋め込むよりも細分化して優先順位付ける方が一般的には速いよ。CSS spriteとかやってた時代の技術ですやん

[kurechon]

このアレコレをよしなにやってくれる next/image が最強ということでよろしかったでしょうか

[ouest]

picture タグは知らんかった

[shingo-sasaki-0529]

loading=lazy は画像サイズが不明な場合には使えないなぁと思ってたけど、fetchpriority は普通に活用できそうだな。

[zzitne]

なるほどな

[harumomo2006]

画像の遅延表示で表示位置がどんどんずれていく仕様だけはやめてほしい。読んでいる途中でスクロールされると読めない

[dorapon2000]

“<img>要素にloading="lazy"属性を用いることで手軽に遅延読み込みを実装できます。この属性がある画像はスクロールしてある程度近づいた時に随時読み込まれるようになります。”

[yarumato]

“画像が14枚程度のシンプルなページでも、改善前は初期読み込み完了まで約2.4秒、改善後は約0.4秒まで短縮。単なるCSSのdisplay: noneで表示・非表示を制御すると、使わない画像も読み込むのでpictureタグを使用”

[irimo]

ふむーん！画質が荒いと残念と思われる風潮の中、画像の読み込み早いなーと"思わせる"(名実共に)内容ありがとうございます。

[w_bonbon]

阿部寛以上の事はしない

[kubecorn]

CDNは当たり前だから書いてない感じかな。わかりやすくまとめられてるし知らないこともあったので参考にさせていただきます。

[sutetuki]

“fetchpriority="high"”

[gowithyou]

]