0

パフォーマンスを向上させるために、Web サイトの画像を Webp に変換することに取り組んでいます。

通常、次の HTML を使用して表示しています。

<picture>
    <source srcset="/img/about/image.webp" type="image/webp">
    <source srcset="/img/about/image.jpg" type="image/jpeg">
    <img src="/img/about/image.jpg" alt="alt text">
</picture>

Chrome の Dev Tools の Lighthouse 監査機能とページ速度のインサイトを使用すると、 Webp形式の画像が利用可能であるにもかかわらず、画像を次世代形式で提供できるとのことでした。

この問題は一部の画像でのみ発生し、その他は webp バージョンを使用しています。これに対する私のテストは、開発ツールのimgタグにカーソルを合わせるだけです。src

画像1

問題のページでは、Algolia の InstantsearchJS を使用して、結果を表示する前に取得しています。これは、上記と同じ HTML を使用して画像を出力する他のページとは異なり、おそらく問題の原因である可能性があります (理由はわかりませんが)。

ページ上のすべての画像ではなく一部の画像に対して Chrome が Webp をレンダリングすることを選択する明確な理由はありますか?

4

1 に答える 1

0

これが解決策であったかどうかはわかりませんが、アプリケーションと Chrome で多くのキャッシュをクリアした後、サイトにレコード (ブログ投稿) を保存 (更新) しました。これにより、レコードを更新するために Algolia への呼び出しがトリガーされ、魔法のように、すべての画像が webp として表示されていると報告されるようになりました...

于 2020-01-07T10:46:12.587 に答える