画像の最適化とパフォーマンス改善

Transcript

1. 大塚班�安藤 拓斗 
 2 0 2 2 / 7 / 1 3 画像の最適化とパフォーマンス改善
2. W e b 上の画像 • 画像は、ウェブページの総バイト数の 5 0 ％を占めています。 • 画像は、ページが読み込まれたときに見える最大の要素であることが多いため、 L a r g e s t C o n t e n t f u l P a i n t に大きな影 響を及ぼします。 • 画像には幅と高さのプロパティがないことが多く、ページの読み込み時に画像が飛び回ってしまうのです。これは、 C u m u l a t i v e L a y o u t S h i f t C o r e W e b V i t a l に悪影響を及ぼします。 • W e b サイト上の画像の 9 9 . 7 % は、 W e b P のような最新の画像形式を使用していません。 • W e b ページで画像をパフォーマンスよく使用するには、サイズ、重量、遅延ロード、最新の画像形式など、多くの側面を考 慮する必要があります。 • 開発者は画像を最適化するために複雑なビルドツールをセットアップしなければなりませんが、それらのツールは通常、外 部データソースから来るユーザー投稿の画像には対応しておらず、すべての画像を最適化することは不可能です。 • このような無理な開発作業は、必然的にエンドユーザーエクスペリエンスにフラストレーションを与えることになります。 N e x t . j s B l o g 「 I m a g e s o n t h e W e b 」から引用
3. W e b 上の画像 • W e b 上の画像の取り扱いには、 S E O や U X 、開発側の対応方法など色々考えないとい けないことがたくさんある • 全ての画像に対して、 i m g タグ置いて s r c 属性にセットして終わりではなかった。。。 つまり・・・🤔 😇
4. 最適化されていない画像とは何か？ 起こり得る U X への悪影響とは… ?
5. ① 通信される画像サイズと実際に表示される画像サイズがあっていない ② i m g タグに w i d t h , � h e i g h t が設定されていない ③ 軽量な拡張子の画像が使われていない ④ v i e w p o r t 外の画像を読み込んでいる 最適化されていない画像とは何か？ 起こり得る U X への悪影響とは… ?
6. 通信される画像サイズと実際に表示 される画像サイズがあっていない
7. もし、大きすぎるサイズの画像 ( 例 : 5 0 0 × 5 0 0 p x ) を送ってしまうと、無駄な通信が 発生して画面描画が遅れる。 
 また、スマホの処理スペックが P C ほど高くないためサイズによってはパフォーマン スに悪影響を与えてしまう。 例題 スマホの画面に 1 0 0 × 1 0 0 p x の画像を i m g タグで表示したい ①通信される画像サイズと実際に表示される画像サイズがあっていない
8. 解決策 s r c s e t 属性、または p i c t u r e タグを使って出し分ける。 注意⚠ 画像の出しわけを d i s p l a y : n o n e ; で行ってもどちらも読み込まれるため良くない。 ①通信される画像サイズと実際に表示される画像サイズがあっていない
9. ①通信される画像サイズと実際に表示される画像サイズがあっていない 「 H T M L の s r c s e t 属性や p i c t u r e タグを使ったレスポンシブイメージを解説」 - 模写修行 h t t p s : / / m o s h a s hu g y o . c o m / m e d i a / r e s p o n s i v e - i m g より
10. p i c t u r e タグを使ったアートディレクション ①通信される画像サイズと実際に表示される画像サイズがあっていない
11. s r c s e t 属性を使用 ビューポートサイズとデバイスの解像度に応じて適切な画像を判断 デバイスピクセル比を見て適切な画像を判断 動きを確認する�👉� h t t p s : / / s t a c k b l i t z . c o m / e d i t / r e a c t - t s - u m f a 7 x ? f i l e = A p p . t s x ①通信される画像サイズと実際に表示される画像サイズがあっていない
12. i m g タグに w i d t h , � h e i g h t が設定さ れていない
13. 起こり得る影響 画像の表示前後でレイアウトの配置にズレが生じる ( これを「レイアウトシフト」と呼ぶ。 ) この影響により、 L C P や C L S の悪化につながり、全体的な U X の悪化や S E O に 悪影響を与える。 L C P : �『 L a r g e s t C o n t e n t f u l P a i n t 』�ファーストビューが表示されるまでの時間 C L S ：『 C u m u l a t i v e L a y o u t S h i f t 』�描画までに起こった画面レイアウトの変化量 詳しくは 👉 O p t i m i z e C u m u l a t i v e L a y o u t S h i f t - w e b . d e v ② i m g タグに w i d t h , � h e i g h t が設定されていない
14. 解決策 画像要素 ( 動画要素も同様 ) にサイズ属性 w i d t h , h e i g h t を指定する。 👉�ブラウザが画像の取得を開始する前に指定した ����サイズ分だけの領域を確保してくれる 👉� s r c にセットした画像と w i d t h , h e i g h t 属性の アスペクト比は必ず一致させる ② i m g タグに w i d t h , � h e i g h t が設定されていない 動きを確認する�👇 
 h t t p s : / / s t a c k b l i t z . c o m / e d i t / r e a c t - t s - u m f a 7 x ? f i l e = A p p . t s x
15. 軽量な拡張子の画像が使われてい ない
16. W e b P （ウェッピー）とは…？？ 👉 G o o g l e が開発した静止画像フォーマット。 
 背景透過（アルファチャンネル）や、アニメーションにも対応 対応率 : 約 9 7 % ( 2 0 2 2 年 7 月 現在 ) 解決策 W e b P を使用する。 ③軽量な拡張子の画像が使われていない 「 C a n I u s e - W e b P i m a g e f o r m a t 」 h t t p s : / / c a n i u s e . c o m / w e b p より
17. J P E G イメージ�� 4 6 0 8  ×  3 4 5 6 � 3 . 2 M B W e b P イメージ�� 4 6 0 8  ×  3 4 5 6 � 2 . 4 M B ③軽量な拡張子の画像が使われていない
18. 👇 これで解決 ③軽量な拡張子の画像が使われていない
19. 実はもっとすごいのが . . . A V I F ( A V 1 I m a g e F i l e F o r m a t ) 👉 J P E G と比較して 5 0 ％以上のサイズ縮小が可能で、可逆圧縮と非可逆圧縮を選ぶことができ、 
 ����アニメーションや透過にも対応 U s i n g A V I F t o c o m p r e s s i m a g e s o n y o u r s i t e - w e b . d e v 対応率 : 約 7 2 % ( 2 0 2 2 年 7 月 現在 ) 「 C a n I u s e - A V I F i m a g e f o r m a t 」 h t t p s : / / c a n i u s e . c o m / a v i f より
20. J P E G イメージ�� 4 6 0 8  ×  3 4 5 6 � 3 . 2 M B A V I F イメージ�� 4 6 0 8  ×  3 4 5 6 � 9 2 2 K B
21. v i e w p o r t 外の画像を読み込んで いる
22. ④ v i e w p o r t 外の画像を読み込んでいる 起こり得る影響 初期描画でページ内のすべての画像を読み込むと、表示にかかる時間が不必要に伸びる 詳しくは 👉 B r o w s e r - l e v e l i m a g e l a z y - l o a d i n g f o r t h e w e b - w e b . d e v
23. ④ v i e w p o r t 外の画像を読み込んでいる 解決策 l o a d i n g = " l a z y " �を使い遅延ローディングを行わせる ( 👉 v i e w p o r t が近づいたタイミングで順次読み込まれる ) 注意⚠ ✅ 初期描画される画像への遅延読み込みは避ける ( 付けてしまっても� G o o g l e L i g h t h o u s e �が警告を出してくれる ) ✅ レイアウトシフトが発生しないよう w i d t h 属性 , h e i g h t 属性に値をセットする ( 読み込みに時間がかかるページでより顕著に現れてしまう )
24. まとめ • 画像の表示ってこんなに大変なのん . . ? 検証 → ネットワークから動きを確認する�👇 
 h t t p s : / / s t a c k b l i t z . c o m / e d i t / r e a c t - t s - j p 5 w a f ? f i l e = A p p . t s x
25. 参考文献 • レスポンシブイメージを設定する（画像サイズの最適化）� - T A G I N D E X • H T M L の s r c s e t 属性や p i c t u r e タグを使ったレスポンシブイメージを解説 - 模写修行 • s o u r c e 要素に w i d t h / h e i g h t 属性を指定して各画像のアスペクト比の維持と C L S の改善を図る - M A T S U E - L I N K S • H T M L に i m g 要素で画像を表示する 2 0 2 0 年版 - Q i i t a • S m a r t e r , L i g h t e r , B e t t e r I m a g e s : A G u i d e t o O p t i m i z a t i o n - M a t h e u s F a n t i n e l • O p t i m i z e C u m u l a t i v e L a y o u t S h i f t - w e b . d e v • U s i n g A V I F t o c o m p r e s s i m a g e s o n y o u r s i t e - w e b . d e v • B r o w s e r - l e v e l i m a g e l a z y - l o a d i n g f o r t h e w e b - w e b . d e v