目次
Googleからの6つの画像最適化のヒント
【Google翻訳】
Googleは、ウェブサイトで画像をより速く、より効率的に読み込むための6つの方法を共有しています。Googleの新しい動画で、デベロッパーアドボケイトのAlan Kentが、eコマースウェブサイトの画像を最適化するための6つのヒントを紹介しています。
ビデオは特にeコマースサイトを対象としていますが、アドバイスは多数の画像を提供するすべてのWebサイトに適用できます。
14分以上の時間を記録しているため、ウェブサイトでの作業で忙しい場合は、Googleの動画を消化するのが大変です。
これが、5分以内に消費できるより口当たりの良い要約です。
これらは、画像をより速く、より効率的に読み込むためのGoogleのヒントです。
1.画像の累積レイアウトシフト（CLS）を排除します
CLSとは、ページのコンテンツが読み込まれるときに、ある場所から別の場所に視覚的に移動または移動するインスタンスを指します。
この問題の原因は画像だけではありませんが、誤って使用すると問題の原因となる可能性があります。ほとんどの場合、CLSは読み込み中にページ上の動きを探すことで簡単に見つけることができますが、それを測定するためのツールがいくつかあります。
CLS、その測定方法、および修正方法の詳細については、包括的なガイドを参照してください。
2. 画像のサイズを正しく設定する
ファイルが大きいほどダウンロードに時間がかかるため、画像に適した幅と高さを選択してください。
サイトにアクセスする画面サイズと解像度の範囲が原因で、画像のサイズを正しく設定することは複雑になる可能性があります。
ブラウザが独自に画像を切り抜くと、ダウンロードサイズが必要以上に長くなり、下にドラッグするだけになります。
誤ったサイズの画像を検出する簡単な方法の1つは、PageSpeedInsightsレポートの[オポチュニティ]の下にある適切なサイズの画像セクションを使用することです。
必要以上に大きい画像を特定したら、レスポンシブ画像などの解決策で問題を解決できます。
3.最高の画像ファイル形式を使用する
PNG、JPEG、またはwebPファイルを使用するかどうかなど、画像のファイル形式について考えてください。
ファイル形式はファイルサイズに影響するため、適切な形式を選択するには慎重に検討する必要があります。
フォーマットごとに検討すべき長所と短所があります。 たとえば、JPEGとwebPのファイルサイズは小さくなる傾向がありますが、画質を犠牲にしてサイズを小さくすることができます。
ただし、買い物客は画質の低下に気付かない可能性があり、速度の向上はかなりのものになる可能性があります。
サイトで別の画像形式を使用することでメリットが得られるかどうかを検出するには、PageSpeedInsightsレポートの次世代形式の画像を提供するセクションを確認してください。 このレポートには、より効率的なファイル形式に変換できる画像が一覧表示されます。
4.画像を適切に圧縮する
画像に適切な品質係数を使用して、目的の画質を維持しながら効率的にエンコードします。
PageSpeed Insightsレポートの「画像を効率的にエンコードする」セクションを使用して、圧縮の最適化に適した画像を特定できます。 レポートには、ファイルサイズの節約の可能性も示されています。
満足のいく品質係数を見つけるには、さまざまな品質値を使用して複数の画像で選択した画像変換ツールを使用し、前後を比較します。
圧縮ありと圧縮なしの画像を比較する簡単な方法として、サイトSquoosh.appをお勧めします。
5.ブラウザに画像をキャッシュする
画像を安全にキャッシュできる期間をブラウザに通知します。
画像を返す場合、ブラウザが画像をキャッシュするのに推奨される期間など、キャッシュガイダンスを含むHTTP応答ヘッダーを返すことができます。ここでも、PageSpeed Insightsレポートを使用して、HTTP応答キャッシュヘッダーがサイトで適切に設定されているかどうかを検出できます。
効率的なキャッシュポリシーセクションを備えたサーブスタティックアセットは、キャッシュの改善から恩恵を受ける可能性のあるイメージを識別します。
サイトの問題を修正するには、プラットフォームまたはWebサーバーの設定を変更して、サイトの画像のキャッシュの有効期間を調整できるかどうかを確認してください。
画像を頻繁に変更しない場合は、キャッシュの有効期間を長く設定できます。
6.画像のダウンロードを正しく順序付けます
より高度なヒントとして、ダウンロードされたWebページリソースの順序を正しく並べ替えることをお勧めします。
次のダウンロード順序をお勧めします。
ページ上部のヒーロー画像
折り目の上の他の画像
折り目のすぐ下の画像
Webページ上の残りの画像は、遅延ロードできます。サイトが画像を効率的に読み込んでいるかどうかを検出するには、PageSpeedInsightsレポートを参照してください。 レポートの[オフスクリーン画像の延期]セクションには、他の画像の後に読み込むことができる画像のリストが表示されます。
SEOコンサルタントのまとめ
【画像最適化のヒント】[Search Engine Journal]
1.画像の累積レイアウトシフト（CLS）を排除します
2. 画像のサイズを正しく設定する
3.最高の画像ファイル形式を使用する
4.画像を適切に圧縮する
5.ブラウザに画像をキャッシュする
6.画像のダウンロードを正しく順序付けます
