WebPの表示速度について

Question

お世話になります。

弊社本店スマホサイトの画像の表示速度対策で、WebPを試験的にページに掲載しています。

▼スマホサイト
https://www.4860.jp/sp/

▼WebP画像
https://www.4860.jp/contents/images/webp/sale-25.webp

googleブラウザのデベロッパーツールの「Network」で画像の表示速度を確認した所、
WebPの表示までの速度が、JPG画像より遅い表示でした。

WebPの表示速度が適正に確認ができる方法をご存知でしたら、
ご教示のほど、よろしくお願い致します。

Answer

ECマスターズの伊藤です。

> WebPの表示速度が適正に確認ができる方法をご存知でしたら、
> ご教示のほど、よろしくお願い致します。

頂いておりますご質問についてですが、
担当より、明日以降に回答させていただきます。

恐れ入りますが、ご回答まで今しばらくお待ちくださいますよう
お願いいたします。

Answer

ECマスターズの田中です。

デベロッパーツール「Network」タブでは、
「Disable Cache」にチェックを入れることで、
キャッシュ（過去に読み込み、PCに保存されたデータ）を
利用せずに、ページやファイルの再読み込みができますので、
チェックを入れて、表示速度をご確認願います。
https://www.it-swarm.dev/ja/google-chrome/971389201/

質問と回答の意図が異なっている、などございましたら、
詳しい状況を添えて、改めてご返信願います。

たとえば、
ページ全体の画像をJPG/WebPで統一したページで速度を比較した、
１つの画像ファイルに対して、JPG/WebP各形式で速度を比較した、
など、どのように速度の比較を行われたのか、
お知らせいただきますようお願いします。

Answer

ECマスターズの田中様、
お世話になります。

ご連絡、ありがとうございます。

複数枚、WebP形式にしているのですが、
1つの画像ファイルの表示速度の比較になります。

添付の画像のWebPの画像より、上部に表示している画像は、
WebPより、表示速度が早いのでしょうか。

表示されている順番について、
ご教示お願いできますでしょうか。

すみませんが、よろしくお願い致します。###HR######IMG09699da2613712fda4434c2e9e3fd54df.jpegIMG0###

Answer

ECマスターズの田中です。

いただいたスクリーンショットでは、
確かに、読み込み順に並んでおり、
webp画像よりも上の画像ファイルが
先に読み込まれてはおりますが、

上の画像ファイルが2〜5kBに対して、
webpの画像は約32kBと、
データ容量に6〜16倍程度の差があるのに対し、
読み込みにかかった時間は
いただいた画像の最上にある224msとwebpの287ms、
約1.3倍程度の差となっております。

大きさが全く異なる画像同士では
形式としての比較を行うことができませんので、

１つの画像ファイルに対して比較を行う場合は、
まったく同じ画像をJPG形式にした画像ファイルを
ご用意いただき、
１つのページで隣同士に設置いただいたり、
可能であれば、JPG/WebP形式、２つの画像だけが掲載されたWebページを
ご用意いただく形で、
なるべく対等な条件にて比較を行っていただきますようお願いします。

Answer

ECマスターズの田中様、
お世話になります。

ご連絡、ありがとうございます。

早速、同じデザインの画像をWebPとJpg画像にし、設置しました。
「Network」での内容の画像を添付致しました。

すみません、読み込み順について質問です。

サイト内で、ページ下層部に設置していても
WebP形式でも読み込みの順番が早くなることはありますでしょうか。###HR######IMG0cdcea2c2cf335a72bd196660f66f61f2.jpegIMG0###

Answer

ECマスターズの伊藤です。

> すみません、読み込み順について質問です。
> 
> サイト内で、ページ下層部に設置していても
> WebP形式でも読み込みの順番が早くなることはありますでしょうか。

HTMLは、上から順に読み込まれるため






と記述されていた場合、
a > b > c > d
の通り表示されます。

ですが、aの画像の容量が大変重い場合など、
読み込み順は変わりませんが、
表示順序は
b > c > a > d
などのようになる場合がございます。