「ユーザーエクスペリエンス」が最も重要視されるインターネット時代において、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年のインターネット業界について語る
最近、Baidu に表示されるクライアントのウェブサイトのタイトルと説明が他人のものでした。この問題...
旧正月が過ぎた後、インターネット仲間のほとんどは2008年に再び奮闘を始め、2008年に夢のために懸...
1. 91人の外国人教師の口頭英語製品の位置づけに問題がある91人の外国人教師によって発売された1対...
onehosting は、2009 年に設立されたシンガポール企業 Shana Web Servic...
[[335642]]序文日々の開発では、ロックが必要な状況に必然的に遭遇します。たとえば、製品在庫を...
WeChat Momentsに広告を掲載するには?最近、多くの友人からWeChat Moments広...
11月27日より、contaboはブラックフライデーセールを開始します。米国およびドイツのデータセン...
検索業界全体を見てみると、比較的トラフィックの多いキーワードは、基本的に一部の有名な中規模・大規...
Hotiis の日本 cn2 gia VPS とアメリカ cn2 gia VPS が Hostcat...
コンテンツ ページの最適化に関しては、ほとんどのウェブマスターの友人がその重要性を理解していると思い...
SEO に取り組んでいる期間によって、SEO に対する理解は異なります。たとえば、この業界に入ったば...
11月のシドニーの春は突然寒くて湿気が多くなり、私が到着した最初の日の晴れた明るい天気とは対照的でし...
個人的には、Baidu Webmaster Platform の以前のウェブサイト検証方法は少し面倒...
昨日、百度ウェブマスタープラットフォームの李氏は「外部リンクの判断について」を発表しました。外部リン...
2013年末以来、タオバオに小規模な販売業者を締め出すよう求める声がますます大きくなっており、最近で...