Lazyload SEOを傷つけることなく画像

Question

私たちのウェブサイトに製品詳細ページがあり、製品の大きな画像のプレビューがあります。問題は、大きすぎて高解像度であるため、ページにロードしてレンダリングするのに時間がかかります。今ではイメージアップスケーリングと呼ばれるものについて読んだことがあります。イメージアップスケールと呼ばれるものについてはもう読んだことがあります。したがって、コンセプトは、ファイルサイズとイメージディメンションのサイズが非常に小さく、大きなイメージを生成し、それをイメージの初期プレビューとして設定することです。次に、大きな画像の元の寸法と同じ大きさにします。だからそれは伸ばされ、彼らはそれをぼかします。大きな画像が読み込まれるのを待ってから、小さい方の画像を読み込んだら置き換えます。私はこれを複数のブログやニュースサイトで見てきましたが、これは非常に良い解決策のようです。しかし、私の懸念は、これは私たちのページのSEOに影響を与えるかどうかです。もしそうなら、私たちのページのSEOを傷つけることなくこの種の行動を実装する方法はありますか？

Answer 1

SEOの場合は、私の答えのためにgooglesの基準に行きたいと思っています。

遅延読み込みは帯域幅に役立ちますが、SEO googleは全ページの読み込み時間であなたのウェブサイトを判断しません。

あなたの画像を圧縮することをお勧めします。それはすべての違いになります。

画像がある場合は、20枚の画像をロードして、より多くの画像を読み込み、そこから怠惰な読み込みを行うことができます。 これは、今あなたのウェブサイトの半分を読み込むように大きなSEOのブーストになります。

Answer 2

画像の最適化に問題があることをご理解いただきました。これを解決するために、私はあなたが以下の手法を適用することをお勧めします。

• img要素にsrcset属性を追加します。 srcset属性は、img要素の機能を拡張します。ブラウザーがsrcset属性をサポートしていない場合、デフォルトでsrc属性を使用してイメージファイルがインポートされます。ブラウザーがsrcset属性をサポートしている場合は、要求が受信される前に、イメージ・ソースおよび条件のリスト（カンマ区切り）を指定できます。その結果、デバイスのパラメータと一致するイメージのみがダウンロードされて表示されます。要素と応答画像内
• アート方向画像。デバイスの特性（アートディレクション効果）によってイメージを変えたい場合は、要素pictureを使用してください。 picture要素は、デバイスのさまざまな特性（サイズ、解像度、宛先など）に応じて、同じイメージの複数のバージョンを提供する宣言型ソリューションを指定します。上記の例で

<picture> 
 
    <source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x"> 
 
    <source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x"> 
 
    <img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood"> 
 
</picture>

ブラウザの幅が800ピクセル以上である場合、head.jpgまたはヘッド2x.jpg形式になりますブラウザの幅が450〜800ピクセルの場合、フォーマットはです。head-small.jpgまたはhead-small-2x.jpg（これはscの値によって異なります）装置の解像度）が適用される。450ピクセル未満の画面幅と下位互換性のあるデバイスについては、画像要素はサポートされません。この場合、ブラウザはimg要素を使用して画面に画像を表示します（有効にする必要があります）。

• 相対的な寸法の画像。最終的な画像サイズが不明である場合、画像源の画素密度記述子を選択することは困難である。これは、特に、ブラウザの幅に比例して伸び、それに応じてサイズを変更する画像を指します。この場合、固定された画像サイズと画素密度は示されません。代わりに、幅にハンドルを追加することで、処理中の画像のサイズを判断することができます。これにより、ブラウザは自動的に最適なピクセル密度を計算し、ロードする正しいイメージを選択することができます。

<img src="lighthouse-200.jpg" sizes="50vw" 
 
    srcset="lighthouse-100.jpg 100w, lighthouse-200.jpg 200w, 
 
      lighthouse-400.jpg 400w, lighthouse-800.jpg 800w, 
 
      lighthouse-1000.jpg 1000w, lighthouse-1400.jpg 1400w, 
 
      lighthouse-1800.jpg 1800w" alt="a lighthouse">

この例では、（viewportを適用する際にサイズが=「50vw」）ビューポートの幅の半分を取る画像を示しており、ブラウザの幅に依存し論理ピクセルと物理ピクセルの比。その結果、ブラウザは、任意のサイズのウィンドウ内に正しく表示される画像を選択することができる。

はJPG、JPEG形式の画像がPNGより約50％少ない量を持っていることに注意してください。したがって、ロードがより簡単で迅速になります。画像フォーマットを変更して画像のサイズを変更するには、このツールPhoto Editor Onlineを使用します。画像を圧縮するには、JPEG and PNG compressorsを使用できます。

Accelerated Mobile Pages AMPの使用が最適です。 image要素の実装では、srcset属性も使用されています。

Original source ++ Use Cases and Requirements for Standardizing Responsive Images ++ Responsive images of MDN。

あなたはメタ プリロード、例えばと現在のウェブページの画像をプリロードするために使用することができます

：<link rel="preload" href="//examples.com/images/img1.jpg" as="image"> はPreload of W3C ++ Preloading content with rel="preload" of Moz続きを読みます。