多くの人は、データに基づいてサイトを最適化する技術、つまり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/da​​tauri-1

Css Embed開発はスプライトの生成に使用されました。

その結果、すべてのスタイルとスプライトが1つの結果のcssファイルに含まれます。

結果



平均ダウンロード速度〜4.3秒
リクエスト数= 3

データURI CSS＃2

lab2.ravelrumba.com/data-uri/da​​tauri-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