今回はGoogleのYoutube公式アカウントで公開された”ECサイトの画像を最適化する6つのポイント”という英語の動画を日本語に翻訳しました。
*ECサイト(Electronic Commerce/Ecommerce)とは、商品やサービスをインターネット上で売買するサイトです。*
公式アカウントの動画
クリックして動画へ
SEOの最新動向を理解する上では、とても参考になると思います。また、専門用語について、簡単な説明文もつけましたので、初心者にも優しい記事です。(星マークが付いた箇所は注釈です、動画内容ではありません。)
1、CLS(Cumulative Layout Shift)を防ぐ
５、ブラウザに画像のcache lifetime を明確に伝える
さて、本題に入りたいと思います。(動画にある、挨拶文などは割愛させていただきます。)
まず1点目、CLSを防ぐことです
①CLSとは?
*CLS(Cumulative Layout Shift) とはGoogleが発表したページエクスペリエンス指標であるコアウェブバイタル3指標の１つで、CLSとは、表示されるコンテンツのレイアウトのズレの量をスコア化した合計値の指標です。意図しないレイアウトのズレがどのくらい発生しているか、視覚的な安定性を示しています。
*コアウェブバイタル3指標の説明
・LCP（Largest Contentful Paint：LCPとは、
ページに表示される最大コンテンツのレンダリング時間を示す指標です。
最大コンテンツはページ内に表示する画像またはテキストブロックのいずれかで最も大きいものが対象となります。
LCPはレンダリング時間なので、単位は秒が使われていて、値が小さい（短時間）ほど良いと捉えられます。最初の2.5秒以内に描画されることが良いとされています。
・FID（First Input Delay：FIDとは、
初回入力遅延のことで、サイトの応答性を測る指標です。
ユーザーが、（リンクをクリックしたときやボタンをタップしたときなど）最初にページを操作してから、ブラウザが処理を開始するまでの時間を測定しています。
FIDは、ミリ秒で測られ、その時間が短いほど応答性が良い＝UXが良いと判断されます。初回入力遅延が100ミリ秒未満にすることが良いとしています。
・CLS (Cumulative Layout Shift：レイアウト変更の累積値)
ページ内のコンテンツに動きが生じて、クリックしようとする箇所が移動したりすることで、不快に感じるユーザーが多く、Googleからマイナス評価を受けます。画像を適切に処理しない場合もCLSが発生します。
②画像はなぜCLSを起こしますか?
ブラウザがページコンテンツを表示する際、画像サイズがわからなかったのが問題点です。
ブラウザが画像に相応しいスペースを与えなかったことに気づいた時CLSが発生します。
*わかりやすく言うと、ブラウザが画像などのコンテンツを1つずつ読み込みます。
その中に、画像のサイズに誤りがある場合、画像が違う位置に表示されることがあります。
そして、自分の間違いを認識したブラウザが改めて該当画像を正しい位置に表示し直す時にCLSが発生します。*
Googleが提供しているPSI(Page Speed Insight)では、このCLSの数値が良いかどうかもすぐ確認でき、どこを修正すればいいのかも教えてくれます。
PSIではCLS発生の警告とサイズが明記されていない画像がどのファイルであるかまで情報提供されます。
*PSIはウェブページの読み込み速度をGoogleのスコアで表示するウェブツールです。*
ただし、画像以外に、JavaScriptも上記現象を起こしますので、注意が必要です。
③CLSを解決する方法は?
(1) HTMLのimgタグに直接高さと幅を入れるのが一番楽な方法です。こうすることによって、ブラウザが瞬時に画像に用意すべきスペースを認知できます。
(2) CSSもこの問題を解決できますが、CSSファイルが適切にローディングされるのが前提です。
2、画像に相応しいWidthとHeightを設定しましょう。
デバイスや解像度を考慮して、相応しい画像サイズを調整するのは難しいです。
①適切なサイズを設定できたかどうかはPSIで判断しましょう。
PSIのOpportunities項目のproperly sized images sectionを確認しましょう。サイズが大きすぎる画像がリストアップされます。
それに基づいて、htmlのsource set attributeで適切なサイズを設定しましょう。
②Content Delivery Network(CDN)を利用しましょう。
CDN(Content Delivery Network)により、画像のリサイズとフォーマット変更が自動的に行われます。
*CDNとは「コンテンツ配信ネットワーク」の意味です。インターネット上にキャッシュサーバーを分散配置し、エンドユーザーに最も近い経路にあるキャッシュサーバーから画像や動画などのWebコンテンツを配信する仕組みのことです。*
3、適切なファイルフォーマットを選びましょう。
jpgやwebpなどのファイルフォーマットは画質を落とし、その代わりに画像を早く表示します。
ある程度画質が悪くなるのはユーザーにほとんど気付かれないですが(ログやアイコンなど以外)、画質を保つために、ローディング時間が長くなると、離脱が発生しますから、注意しましょう。
では、画像をどのファイルフォーマットで作成すればいいのでしょうか?
①画像のファイルフォーマットを変えるべきかないかはPSIで確認できます。
②また、The caniuse.com siteを通して、各ブラウザに相応しいファイルフォーマットが確認できます。
例えば、webpはほぼ全てのブラウザに適合します。
③ここで、もう一度CDNをおすすめします。(サイトにある各画像を一番相応しいファイルフォーマットに変えましょう。)
4、正しいquality factorを使いましょう。(この点は省きます。)
PSIを通じて、圧縮すべき画像が確認できます。基本webpの値は75です。
5、ブラウザに画像のcache lifetime を明確に伝えましょう!
①方法1
HTTP response header に caching guidanceを入れるのは1つの方法です。
尚、HTTP response headerが正しく設定されているかどうかはPSIのThe Serve Static Assets With an Efficient Cache Policy セクションで確認できます。
Chromeのnetworking tabツールでもHTTP response headerを検査できます。
②方法2
画像のcache lifetimeを調整できるサーバーやプラットフォームがあれば使いましょう、暫く変えない画像はライフタイムを長く設定しましょう。
③方法3
CDNを利用するのも1つの方法です。
世界中のユーザーに一番近いローケーションからキャッシングされた画像のコピーを速やかにローディングしてくれます。
6、コンテンツのローディング優先順位を正しく設定
画像含めた各種情報のローディング優先順位を正しく設定することによってページパフォーマンスを向上できます。これは比較的上級の調整です。
※一般的にhero画像が先に表示されることが望まれます。なぜかというと前述のLCPはページを評価する重要な要素です。
hero画像を含め、ユーザーがスクロールしなくても閲覧できる領域、をabove the fold と呼ばれています。残りはbelow the foldです。(各デバイスによって変わってきます。)
基本below the foldの画像はloading lazyをつけます。
“PSIのDefer Offscreen Images セクションでは表示を後回しにして良い画像を選別してもらいます。Avoid Chaining Critical Resourcesも活用できるセクションです。
注意しないといけないのは、Lazy loading をabove the foldにつけてしまうとパフォーマンスデグレデーションが発生します。
Lighthouseの最新バージョンではLCPに影響してしまうLazy loadingをハイライトしてくれます。
HTTP2が配備されたサーバーを使用するかHTTP2が配備されたサードパーティ(CDN)を使うことをおすすめします。
*HTTP2とはHypertext Transfer Protocol version 2の略。World Wide Webで利用されるHTTPのバージョンの1つ。*
HTTP2が配備されているサーバは画像ローディングが早い、また、大きいファイルが小さいファイルのローディングをフロックすることが防げます。
まとめ
今回の記事では画像の最適化の６つのポイントについて紹介しました。
ここで特に注意していただきたいのは、GoogleがPSI、CDNまたHTTP2を強くお薦めしていました。
“PSI”は無料のツールでGoogleが開発したものです。
HTTP2もGoogleが開発したもので、直接利用できないですが、HTTP2が配備されたCDNやサーバーであれば使用することができます。
個人の判断にお任せしますが、上記ツールを活用すれば評価されるとのことなので、ぜひページ作成する時やseo対策を実施するとき活用しましょう。
ご検討の程どうぞよろしくお願いいたします。