多くの人は、データに基づいてサイトを最適化する技術、つまりuriテクノロジーをすでに知っています。 最近、比較的新しい技術に対する関心がますます高まっており、開発者のグローバルコミュニティの関心が示されています。 インターネットでは、このトピックに関する多くの記事を既に見つけることができます。 クロスブラウザデータの開発について真剣に考えた最初の人の1人であるuri：「私たちの男」-Evgeny Stepanishchev aka bolk 。 まあ、それはそれについてではありません、それは物語のためにそうです...
私は「外国の」ブログwww.ravelrumba.comに出会いました 。その著者は最近、データの有効性の調査に積極的に取り組んでいます：uri css sprites。 彼の作品に関する多くの興味深い記事で証明されています。
CSSイメージとデータURI
CSSイメージのデータURI：より多くのテスト、より多くの質問
私はそれをサポートすることに決め、彼が開発したテストページのダウンロード速度の分析を行いました。
接続数とダウンロード速度を測定して、テストページを要求しました。
元のサイト
lab2.ravelrumba.com/data-uri/org
結果
平均ダウンロード速度〜4.8秒
クエリ数= 34
データURI CSS＃1
lab2.ravelrumba.com/data-uri/datauri-1
Css Embed開発はスプライトの生成に使用されました。
その結果、すべてのスタイルとスプライトが1つの結果のcssファイルに含まれます。
結果
平均ダウンロード速度〜4.3秒
リクエスト数= 3
データURI CSS＃2
lab2.ravelrumba.com/data-uri/datauri-2
スプライトを生成するために、オンラインサービスDuris.Ruが使用されました。
その結果、スタイルは基本とスプライトに分割されます。 スプライトは別のcssに配置され、ページの最後で接続されます。 また、32KBより大きい2つの画像はスプライトに含まれていませんが、メインスタイルファイルには残されています。
結果
平均ダウンロード速度〜2.6秒
クエリ数= 6
結論
- ページの読み込み時間-datauri2 <datauri1 <original
- クエリの数-datauri1 <datauri2 << original
- DOM対応-datauri2 =オリジナル<datauri1
データ：uriスプライトを使用すると、サーバーが接続数（この例では5x-10x）をはるかに簡単に処理できるようになります。
また、uri cssスプライトテクニックのデータを適切に使用すると、サイトの全体的な読み込みを大幅に加速できます。
リクエスト-自分と他の人を助ける
テストページに移動して、読み込み時間を確認します。これにより、より一般的な画像が得られます。 結果をコメントに書き込みます。 ダウンロード時間のみに関心がある場合は、チャネルのランダムな遅延をなくすために、一連のダウンロードを実行することを忘れないでください。 また、新しいダウンロードの前にキャッシュをクリアすることを忘れないでください。または単にCtrl + F5を押してください。
時間を節約するために、ブラウザのサポートなしで実験的なページが開発されました<IE8
habruzersによるテスト結果
GreLI o：3.47 d1：3.16 d2：2.96
art_linux Safari 4、Mac OS X 10.6-o：1.84 d1：1.20 d2：0.95
freemandigger FF 3.5、Linux（Ubuntu）x86_64-o：2.91、d1：2.22、d2：2.34
kolpeex Opera 10.10、Windows 7-o：2.66、d1：1.82、d2：2.03
TecHMeaT Vista、Chrome 4.0.266.0-o：5.03、d1 2.74、d2 2.38
SKYnv Opera 10.10、Windows 7-o：1.88、d1 0.65、d2 1.42