ホームページ > ウェブフロントエンド > htmlチュートリアル > Baidu Web サイトに関するいくつかの問題について苦情を申し立てる photos_html/css_WEB-ITnose

Baidu Web サイトに関するいくつかの問題について苦情を申し立てる photos_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 11:48:47
オリジナル
1405 人が閲覧しました

http://tieba.baidu.com (百度ティエバ) があるようですTieba ホームページにはたくさんの写真があります。圧縮後、ほとんどの写真は同期的に読み込まれますHttp: //zhidao.baidu.com (Baidu は知っています) 2100http://wenku.baidu.com (Baidu Wenku) 1500200075.0http://baike.baidu.com (Baidu Encyclopedia) 1100 1600 68.81700 同様: 1. 大きな画像はほとんど役に立ちません (「推奨リスト」が最も深刻です) 62174.2少し大きい (240KB) ですが、その他は問題ありません http://news .baidu.com (Baidu News) 1200160075.0
ウェブサイトアドレス 画像サイズ (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

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 開発者は、すぐに変更してください。

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 です。

このモジュールの他の写真にも、小さな用途の大きな写真という問題があります

ご存知ですか?

Wenku の写真にも大きな問題がありますが、ほとんど使用されず、画像圧縮率が低い。しかし、問題は大きくありません。中央の バナー

http://img.baidu.com/img/iknow/wenku/704X272xhjzy.jpg

の 2 番目の画像が少し大きい (311.6KB) ことを除けば、 )、Tencent のスマートフォンを使用 画像 http://zhitu.tencent.com/

圧縮後、わずか 38.8KB になります

Lazyload は画像に使用されておらず、カルーセル画像の次のページのコンテンツはオンデマンドで読み込まれません さらに、ページの先頭にあるカルーセル機能をクリックする速度が速すぎると.. .

カルーセルモジュールである必要があります。カルーセル中にロックがないため、より便利なカルーセルコンポーネントに変更してください

http://music.baidu.com (Baidu Music)
2100 81.0

2. 画像圧縮率が十分ではありません。 .lazyload はあまり良くありません

4. カルーセル画像は直接ロードされます

http://image.baidu.com (Baidu Picture)

461

右側のカルーセル領域の写真それらのうちの 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:// がリロードされます。エクスペリエンスも良くありません

の読み込みを最小限に抑えるか遅らせるにはどうすればよいでしょうか。ユーザー エクスペリエンスを確保しながら画像リソースを活用するには、帯域幅のプリエンプションと、ページ上の他のリソースの全体的な帯域幅使用量に注意を払う必要があります。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート