「ユーザーエクスペリエンス」が最も重要視されるインターネット時代において、Web ページが開くのが遅すぎて閉じてしまったことはありませんか? 多くの人が「はい」と答えるのではないでしょうか。高速インターネットの時代では、決して広東省のネットユーザーの忍耐力に挑戦しないでください。さもないと、ネットユーザーがあなたのウェブサイトから遠ざかるだけです。 Web ページの速度を上げる方法は多数ありますが、その 1 つは http リクエストを減らすことです。すべての Web サイトは画像を使用します。Web サイトに 10 個の個別の画像がある場合、Web サイトを閲覧するときに画像を読み込むためにサーバーに 10 個の HTTP リクエストが送信されることになります。画像リクエストを減らす方法をいくつか紹介します。 CSS スプライト: ほとんどのフロントエンド Web サイト開発者はこれを「CSS スプライト」と呼んでいます。共通の理解は、複数の小さな画像を 1 つの大きな画像に結合し、HTTP リクエストの数を減らして Web ページを高速化するというものです。以下では、Taobao を例に、CSS スプライトの実装方法を説明します。たとえば、Web ページに「今日の Taobao 活動」の画像を表示したいとします。 実装コード: <div style="width:107px; height:134px; background:url(sprites.gif) no-repeat -133px -153px"></div> width: 配置する画像の幅。 height: 配置する画像の高さ。 (CSS スプライトはコンテナのサイズを定義する必要があります。定義しないとエラーが表示されます) background: url (sprites.gif) 背景画像のパス。 no-repeat: 背景は繰り返されません。 -133px: X座標位置、-153px: Y座標位置。 -133px と -153px がどこから来るのか分からない人もいるかもしれません。これらの座標は、大きな画像内の小さな画像の x 座標と y 座標の左座標です。下の図に示すように、大きな画像内の赤い点の座標は、x 座標で 133px、y 座標で 153px です。 (座標は、50% 50% のようにパーセンテージで表すこともできます。座標は正数なのに、なぜ負数で表記するのかと疑問に思う人もいるかもしれません。背景画像がこのように定義されている場合、デフォルトの xy 座標は 0 0 だからです。下の図に示すように、今日の Taobao イベント画像の座標は 133px 153px なので、画像を正しく表示するには -133px -153px を使用してゼロにリセットする必要があります。 CSS スプライトの利点: HTTP リクエストの数を減らすことができます。たとえば、10 個の個別の画像は 10 個の HTTP リクエストを発行しますが、それらを 1 つの大きな画像に結合すると 1 つの HTTP リクエストのみが発行されるため、Web ページの読み込み速度が向上します。 CSS スプライトの欠点: 何事にも長所と短所があります。画像を変更するたびにコンテンツを追加する必要があり、画像の座標を非常に正確に配置する必要があるため、少し面倒なので、気に入る人もいれば、気に入らない人もいるかもしれません。座標の位置は絶対値に固定されるため、中心などの柔軟なプロパティが失われます。 CSS スプライトには長所と短所があります。使用するかどうかは、Web ページが読み込み速度を重視するか、メンテナンスの容易さを重視するかによって異なります。 元のタイトル: Web ページの高速化: CSS スプライトを使用して画像リクエストを減らす キーワード: ウェブページ、スピードアップ、使用、CSS、スプライト、削減、画像、リクエスト、ウェブマスター、ウェブサイト、ウェブサイトのプロモーション、収益化 |
<<: 2011 年にインターネット上で最も人気のある 20 のビジネス チャンスと起業コンセプトをご覧ください
>>: 謝文:3つの視点から、今後3~5年のインターネット業界について語る
先週、Qvodの元CEOである朱大新氏が個人的な理由で辞任し、CEOの地位は同社の創設者兼会長である...
垂直型電子商取引の存続と消滅に関する最近の話題はまだ収まっていないが、Vipshop は 2012 ...
月収10万元の起業の夢を実現するミニプログラム起業支援プランSEO プロジェクトの場合、SEO 担当...
現在のイースター期間中、ドバイの VPS 販売業者である layer.ae は、米国西海岸のワシント...
これまで、データ センターを構築した組織は、データをプライベートかつ安全に使用および保存できるオンプ...
123systemsは昨日、ロサンゼルス、ニュージャージー、シカゴの3つのデータセンターでOVZ V...
1. OpenVZ OpenVZ (略して OVZ) は、SWsoft の Virutozzo 仮想...
2016年12月に開催された2017年中央経済工作会議では、中国の経済発展は現在、需要の縮小、供給シ...
unestyはどうですか? unesty German VPS はどうですか? unesty.net...
2018年最もホットなプロジェクト:テレマーケティングロボットがあなたの参加を待っています情報化社会...
Burst の VPS クラウド 60% 割引コードが再び有効になりました。1 月 31 日まで有効...
ウェブサイトのトラフィックはほとんどのウェブマスターにとって大きな関心事ですが、どうすればウェブサイ...
1. 中国の共同購入サイトの数は2,919に減少し、毎日5.9サイトが消滅している。昨日、共同購入ナ...
「インターネットは、人、商品、情報、サービスの4つの要素に分解できます。各要素の接点は、巨人を形成す...
ガートナー社の最新の戦略的クラウド プラットフォーム サービスに関するマジック クアドラント レポー...