ウェブサイトアドレス | 画像サイズ (KB) | ページサイズ (KB) | 割合 (%) | 画像の問題 |
https://www.baidu.com (Baidu ホームページ) | 27.9 | 162 | 17.2 | 合計 4 枚の写真が Baidu ホームページにロードされ、そのうち 2 枚は img タグでロードされ、他の 2 枚は背景プラス でロードされます。画像写真 2 枚、ロゴ用 1 枚、サイズ 7.7KB、サイズ 270*129 ですが、通常のサイズは 540*258 です。おそらく Retina スクリーンの下で表示するためのものなので、サイズは *2 になります ( qq.com または taobao.com のロゴ (画像セット経由)?ただし、この方法では は通常の画面では冗長になり、Tencent の Zhitu ツールで圧縮すると、サイズは 66.2% 減少し、 別の画像として使用されます。 pjax の検索結果ページで、将来使用される可能性のあるこの画像がロゴの後に優先される理由がわかりません。個人的にはこういう絵も背景画像に取り入れるべきだと思います
|
2100 | 2600 | 80.8 | があるようですTieba ホームページにはたくさんの写真があります。圧縮後、ほとんどの写真は同期的に読み込まれます |
img タグ形式 (104 枚の写真)、カルーセル中にのみ表示される写真や最初の画面に表示されない写真も直接追加されます (最も基本的なものでも、画像が遅延読み込みなのかプレースホルダー画像なのかわかりませんか?)投稿バー先頭のバナー 部分の画像サイズ: (98+24.4+53.6)+ (18.6+33.2+8.3)+ (87.9)+ (26.5+39.6) = 390.1KB Tieba の選択したモジュール内: 252+71.8+164+29.3=517.1KB (画像はそれほど大きくする必要がありますか?) Tieba の画像が圧縮され遅延ロードされている場合、控えめに画像サイズは 2100KB から 400KB に削減できると推定され、全体のページ サイズは 900KB に削減されます。
ホームページの Two Sessions をクリックしてください。ページ上部の Two Sessions の背景画像には衝撃を受けるでしょう (http://tb1.bdstatic.com/tb/cms/ngmis/file_1425371814749. jpg): サイズは493KBです。この画像を圧縮すると、サイズを 100KB 未満に減らすことができます。 Tieba 開発者は、すぐに変更してください。
| Http: //zhidao.baidu.com (Baidu は知っています)
2400 | 87.5 | はポストバーに似ており、ポストバーよりも深刻です。合計 | 4 枚の写真が使用されました: 172+93.3+173+146=584.3KB、3 枚の 69*69 枚の写真、 当初の合計使用量は 60KB でしたが、最終的には 450*450 の写真が使用されました。 400KB、これも酔ってます。これは最も深刻なことではありません。「ユーザーを知る」モジュールがあります。 ページ上の最大の画像 (282KB) http://hiphotos.baidu.com/album/pic/item/9f2f070828381f30 cb52405aa9014c086f06f0fe。 jpg ここから来ていますが、視覚的なサイズはわずか 55*54 です。 このモジュールの他の写真にも、小さな用途の大きな写真という問題があります ご存知ですか?
| http://wenku.baidu.com (Baidu Wenku) |
2000 | 75.0 | Wenku の写真にも大きな問題がありますが、ほとんど使用されず、画像圧縮率が低い。しかし、問題は大きくありません。中央の | バナー http://img.baidu.com/img/iknow/wenku/704X272xhjzy.jpg の 2 番目の画像が少し大きい (311.6KB) ことを除けば、 )、Tencent のスマートフォンを使用 画像 http://zhitu.tencent.com/ 圧縮後、わずか 38.8KB になります
| http://baike.baidu.com (Baidu Encyclopedia) |
1600 | 68.8 | Lazyload は画像に使用されておらず、カルーセル画像の次のページのコンテンツはオンデマンドで読み込まれません | さらに、ページの先頭にあるカルーセル機能をクリックする速度が速すぎると.. . カルーセルモジュールである必要があります。カルーセル中にロックがないため、より便利なカルーセルコンポーネントに変更してください
http://music.baidu.com (Baidu Music) | |
2100 | 81.0 | 同様: | 1. 大きな画像はほとんど役に立ちません (「推奨リスト」が最も深刻です) | 2. 画像圧縮率が十分ではありません。 .lazyload はあまり良くありません 4. カルーセル画像は直接ロードされます
http://image.baidu.com (Baidu Picture) 461 | 621
少し大きい (240KB) ですが、その他は問題ありません | http://news .baidu.com (Baidu News) | 1200 | 1600 | |
右側のカルーセル領域の写真それらのうちの 3 つはサイズが約 200 KB で、特に | robin | による最初の画像 http://a.hiphotos.baidu.com/news/q%3D100/sign=b09ec35e82183 | 67aab897bdd1e728b68/08f79052982272 0e0c3cec8d7fcb0a46f31 fabd2.j ページ、サイズは 227KB に達します、圧縮すれば間違いなくもっと小さくなります
ところで、カルーセルエリアで使用されているローディング画像について文句を言いたいです http://news.baidu.com/iphone/img/loading_3.gif 存在しないので、302にジャンプしますhttp://www.baidu.com/search/error.html
さらに、ニュースの多くの Lazyload 画像のソースは空であり、プレースホルダー画像さえもありません。 IE のバージョン、http:// がリロードされます。エクスペリエンスも良くありません
|
の読み込みを最小限に抑えるか遅らせるにはどうすればよいでしょうか。ユーザー エクスペリエンスを確保しながら画像リソースを活用するには、帯域幅のプリエンプションと、ページ上の他のリソースの全体的な帯域幅使用量に注意を払う必要があります。