画像のサイズ変更は、Google Page Speedのスコアが高くなりますが、ページの読み込み時間が遅くなります

Question

私は外部画像を使用するウェブサイトを所有しています。それらはAPIの一部であり、私は別のサーバーに画像を保存するつもりはない。私のページの1つに、一連のサムネイルがあります。

Googleのランキング内でサイトの掲載結果を改善する方法を検討しています。

現在のところ、ブラウザはイメージの縮尺を調整していますが、GT Metricsレポートを実行すると、縮尺の変更されたイメージを表示することでスピードを向上させることができます。

ここには2つのオプションがあります。それ以上のものがなければ私は考慮していない。

1. フルサイズの画像をブラウザで続けて縮小します。
2. 外部画像のサムネイルを動的に作成するため、処理時間がかかります。私が知っているPHPを使用していますが、画像を処理する最速の方法ではありません。

私は助けるために実験をすることにしましたが、最良の選択肢がわからなくなってしまいました。

私は、ページAがFlikrの3つの画像を表示し、ブラウザのページBがphyを使ってダイナミックに拡大縮小された同じ画像を表示するというテストを行った。

ページAは0.6秒のページの読み込み時間と、GTメトリクスを使用して、Googleのページスピードのためにスケーリングされた画像と22％全体的にサービスを提供するために非常に悪い0％を獲得しました。

ページBはGTメトリックを使用して、Googleのページスピードのためにスケーリングした画像や92％全体的にサービスを提供するために、100％を獲得したが、1.6秒の長いページの読み込み時間を持ちます。全体的に長く続きます。

画像を動的に拡大すると、画像の処理に時間がかかることがありますが、Googleは自分のページをより品質の高いものと見なします。一度に多すぎる画像処理を防ぐためにlazyload機能を追加しました。

私の質問は良いです。より速いページまたは私のページのスピードに関するGoogleの見解は？

Answer 1

GTmetrixスコアは主観的なもので、Googleとは関係ありません。

0.6は1.6よりも優れていますが、これは完全な画像ではありません。

私はWebPageTestに慣れています：http://www.webpagetest.org/

GTmetrixは、ページの読み込み時間を与えています。ページがロードされると、ブラウザがページをレンダリングするための作業がまだまだあります。

ページが読み込まれると、ブラウザはページレイアウトを開始し、写真を引き続き検索する必要があります。

最初のペイントまたは開始レンダリングまでの時間は、ページの速度を向上させるために焦点を当てる必要があります。 0.6は良いですが、あなたはより良くすることができます。

あなたは次の時間を見てみたい：

TTFB  
DOM Loaded 
First Paint 
Start Render  
Load Time 
Rendering 
Fully Loaded  
Visual Complete 

限り写真の検索およびレンダリングを改善するように、私はあなたがロードする写真を決定する方法を理解する必要があると思います。

私の意見では（誰も実際には分かっていません）、Googleは低い直帰率を支持します。それがあなたが結果にリストされている方法で、何人が間違ってあなたをクリックして直ちに戻るボタンを押すかです。ページ・アナリティクスとGoogleのために

あなたはおそらくGoogleのページスピードの洞察にも得点してみてください：https://developers.google.com/speed/pagespeed/insights/

あなたはGTmetrixから滝の画像を投稿したり、WebPageTest場合、私はより多くを伝えることができます。