CSSスプライトでサイトをスピードアップ

スプライトマスターウェブ

私はこのサイトでページ速度についてかなり書いていますが、それは私たちがクライアントのサイトに対して行う分析と改善の重要な部分です。 強力なサーバーに移行し、次のようなツールを利用する以外に コンテンツ配信ネットワーク、平均的なWeb開発者が使用できるプログラミング手法は他にもたくさんあります。

オリジナルのカスケードスタイルシートの標準は、現在15年以上前のものです。 CSSは、コンテンツをデザインから分離したため、Web開発における重要な進化でした。 このブログやその他のブログを見てください。スタイルの違いの大部分は、添付のスタイルシートにあります。 スタイルシートは、ブラウザ内のキャッシュにローカルに保存されるため、重要です。 その結果、人々があなたのサイトにアクセスし続けると、彼らは毎回スタイルシートをダウンロードするのではなく、ページのコンテンツだけをダウンロードします。

十分に活用されていないCSSの要素のXNUMXつは CSSスプライト。 ユーザーがWebサイトにアクセスしたときに、そのページに対してXNUMXつの要求を行っているだけではないことに気付かない場合があります。 彼ら 複数のリクエストを行う…ページ、スタイルシート、添付されたJavaScriptファイル、そして各画像のリクエスト。 境界線、ナビゲーションバー、背景、ボタンなどの一連の画像を含むテーマがある場合、ブラウザはWebサーバーから一度にXNUMXつずつ要求する必要があります。 これに数千の訪問者を掛けると、サーバーに対して数万のリクエストが行われる可能性があります。

これにより、サイトの速度が低下します。 A 遅いサイトはエンゲージメントとコンバージョンに劇的な影響を与える可能性があります あなたの聴衆が作ること。 優れたWeb開発者が使用する戦略は、すべての画像をXNUMXつのファイルにまとめることです。 スプライト。 ファイルイメージごとにリクエストを行うのではなく、XNUMXつのスプライトイメージに対してXNUMXつのリクエストを行うだけで済みます。

あなたが読むことができます CSSスプライトがCSSでどのように機能するか-トリック or SmashingMagazineのCSSスプライト 役職。 私のポイントは、それらの使用方法を示すことではなく、開発チームがそれらをサイトに確実に組み込むようにアドバイスすることです。 CSS Tricksが提供する例は、10個のリクエストで合計10Kbの20.5個の画像を示しています。 単一のスプライトに集められたとき、それは 1kbの13つのリクエスト! 9枚の画像の往復要求と応答時間がなくなり、データ量が30%以上削減されました。 これにサイトの訪問者数を掛けると、リソースを大幅に削減できます。

グローバルナビ  Apple ナビゲーションバーは良い例です。 各ボタンにはいくつかの状態があります…ページ上、ページ外、またはボタンの上にマウスを置いているかどうか。 CSSはボタンの座標を定義し、正しい状態の領域をユーザーのブラウザーに提示します。 これらの状態はすべてXNUMXつのグラフィックにまとめられていますが、スタイルシートで指定されているように地域ごとに表示されます。

開発者がツールを愛しているなら、彼らを助けることができるたくさんのツールがあります。 コンパスCSSフレームワーク, RequestReduce ASP.NETの場合、 CSS-Spriter Rubyの場合、 CSSSpriteスクリプト Photoshopの場合、 スプライトパッド, SpriteRight, スプライトカウ, ゼロスプライト, ProjectFondueのCSSスプライトジェネレーター, スプライトマスターWeb、 そしてその SpriteMe ブックマークレット。

のスクリーンショット スプライトマスターWeb:
スプライトマスターウェブ

Martech Zone テーマ全体で背景画像を使用していないため、現時点ではこの手法を展開する必要はありません。

2のコメント

  1. 1

    待ってください…コレクション全体が「画像」(または「平面」)であり、各サブ画像(またはアニメーションまたはインタラクティブに変更される画像の場合は画像のサブグループ)が「スプライト」ではありませんか?

    前回この種の処理を行ってから名前が変更されたのかもしれませんが、スプライトは、プルされたビッグデータテーブルではなく、最終的に表示される要素であると誓うことができました。

    (「スプライトテーブル」…それでしたね?)

    • 2

      マークというXNUMXつの異なることを話しているのかもしれません。 CSSを使用すると、基本的に、座標を使用して表示する画像ファイルの「部分」を指定できます。 これにより、すべての画像をXNUMXつの「スプライト」に配置し、CSSで表示する領域をポイントするだけで済みます。

どう思いますか?

このサイトはAkismetを使用して迷惑メールを減らします。 コメントの処理方法を学ぶ.