スポンサーリンク

エンドユーザのレスポンスタイムの80%は、フロントエンドに費やされます。その時間のほとんどは、ページ内のすべてのコンポーネント(イメージ、スタイルシート、スクリプト、Flashなど)のダウンロードに拘束されています。コンポーネントの数を減らすことは、ページを表示するために必要なHTTPリクエストを減らします。

ページのコンポーネントの数を減らす1つの方法は、ページデザインを単純にすることです。速いレスポンスタイムを実現して、リッチなコンテンツのページを作る方法があるでしょうか?

リッチなページデザインをサポートしたまま、HTTPリクエスト数を減らすためにテクニックがあります。イメージマップは、複数のイメージを1つのイメージに結合します。全体的なサイズは、だいたい同じになります。しかし、HTTPリクエスト数減らすことによって、ページのスピードがあがります。イメージマップは、ナビゲーションのような、ページ内のイメージが隣接するところでだけ、利用できます。
イメージマップの座標の決定は、退屈で間違えを起こしやすいです。

CSS Spritesは、イメージリクエスト数を減らすための好ましい方法です。
あなたのページのイメージをすべて1つのイメージに結合し、望ましいイメージの部分を表示するために CSSbackground-imagebackground-positionプロパティを使ってください。

インラインイメージは、データを使います: 実際のページにイメージデータをはめ込むためのURLスキーム。これは、あなたのHTMLドキュメントサイズを増やすことができます。インラインイメージをあなたのスタイルシートに結合することは、HTTPリクエストを減らし、あなたのページのサイズの増大を避ける方法です。

結合ファイルは、すべてのスクリプトを1つにまとめたり、すべてのスタイルシートのファイルを1つのスタイルシートにまとめることにより、HTTPリクエスト数を減らすことができます。広く採用をみられなかった単純なアイデアです。U.Sトップ10ウェブサイトは、ページあたりに平均して7つのスクリプトと2つのスタイルシートを使っています。ページごとにスクリプトとスタイルシートが異なるならファイル結合は、よりチャレンジングです。しかし、あなたのリリースプロセスの部分を作ることは、レスポンスタイムを改善します。

あなたのページのHTTPリクエスト数を減らすことは、はじまりにすぎません。これは、最初の訪問のためのパフォーマンス向上のためのもっとも重要なガイドラインです。Tenni Theurerのブログで Browser Cache Usageについて説明されています - 1日あたりの訪問者の40-60%は、空のキャッシュであなたのサイトを訪れます。あたなのページをはじめて訪れる訪問者のためにページを速くすることは、よりよいユーザエクスペリエンスのための鍵になります。

原文
http://developer.yahoo.com/performance/rules.html#num_http


エヴァンジェリズム



スポンサーリンク
スポンサーリンク
 
いつもシェア、ありがとうございます!


もっと情報を探しませんか?

関連記事

最近の記事

人気のページ

はてなの人気のブックマーク

スポンサーリンク
 

過去ログ

2019 : 01 02 03 04 05 06 07 08 09 10 11 12
2018 : 01 02 03 04 05 06 07 08 09 10 11 12
2017 : 01 02 03 04 05 06 07 08 09 10 11 12
2016 : 01 02 03 04 05 06 07 08 09 10 11 12
2015 : 01 02 03 04 05 06 07 08 09 10 11 12
2014 : 01 02 03 04 05 06 07 08 09 10 11 12
2013 : 01 02 03 04 05 06 07 08 09 10 11 12
2012 : 01 02 03 04 05 06 07 08 09 10 11 12
2011 : 01 02 03 04 05 06 07 08 09 10 11 12
2010 : 01 02 03 04 05 06 07 08 09 10 11 12
2009 : 01 02 03 04 05 06 07 08 09 10 11 12
2008 : 01 02 03 04 05 06 07 08 09 10 11 12
2007 : 01 02 03 04 05 06 07 08 09 10 11 12
2006 : 01 02 03 04 05 06 07 08 09 10 11 12
2005 : 01 02 03 04 05 06 07 08 09 10 11 12
2004 : 01 02 03 04 05 06 07 08 09 10 11 12
2003 : 01 02 03 04 05 06 07 08 09 10 11 12

サイト

Vim入門

C言語入門

C++入門

JavaScript/Node.js入門

Python入門

FreeBSD入門

Ubuntu入門

セキュリティ入門

パソコン自作入門

ブログ

トップ


プライバシーポリシー