高性能なウェブサイトのための14のテクニック

オリジナル: http://developer.yahoo.com/performance/rules.html
2007.3.20 スティーブ・サウダーズ
マスクによる翻訳
2004 年から、私は Yahoo のアウトライヤーパフォーマンスグループで働き始めました。私たちは、Yahoo 製品の品質検査と改善を専門とする非常に小さなチームです。私は現在、バックエンドエンジニアとして、フロントエンドのコード最適化プロジェクトに取り組んでいるため、これは改善のための絶好の機会だと考えています。私の目標はユーザーエクスペリエンスを向上させることだったので、さまざまな帯域幅でブラウザーの応答時間を測定し、http://yahoo.com からの http トラフィックを示す次のグラフを作成しました。

上記のアイコンの最初のラベルは html で、これは html ドキュメントで最初に読み込まれるものです。この例では、html コードの読み取りは、応答時間全体の 5% しか占めていません。この結果は、ほとんどの Web サイトに当てはまります。米国でサンプリングされた上位 10 の Web サイトのうち、5% を超えているものの 20% 未満の Web サイトは 1 つだけです。残りの 80% の時間は、Web ページ上の他のコンテンツ、つまりフロントエンド (元のテキストがフロントエンドであり、これは html コードを除く残りのコンテンツで、画像、スクリプト、フラッシュ、ビデオなど、さまざまなものになります) の読み取りに使用されます。これが、表示速度を向上させるためにこれらのことに重点を置く必要がある主な理由です。
フロントエンドから始めるべき主な理由は 3 つあります。

ここには改善と強化の可能性があります。サイズを半分に縮小できれば、応答時間を 40% 短縮できます。フロントエンドの改善には、バックエンドの改善よりも必要な時間とリソースが少なくて済みます。 (バックエンドを改善するには、アプリケーション計画、コードの再設計、コードの最適化方法の検討、ハードウェア構成の追加または変更、分散データベースなどが必要です。) フロントエンドの改善は、私たちの仕事で実証されています。Yahoo には、最高のパフォーマンスルールに従ってユーザー側の応答時間を 25% 以上改善したチームが 50 あります。
私たちの黄金律は、まずフロントエンドのパフォーマンスを最適化することです。これは、ユーザー側の応答時間の 80% を占めるからです。
1. http リクエストの数を減らす<br />画像、CSS、スクリプト、フラッシュなどにより、http リクエストの数が増加します。これらの要素の数を減らすと、応答時間が短縮されます。
CSS Spritesテクノロジーは、画像リクエストの数を減らし、散らばった小さな画像をまとめ、background-positionを使用して背景画像の位置を変更することができます。 HTML要素の幅と高さが事前に定義されていることが前提です。実際、それはマスクのようなものです。背景を動かすと、さまざまなシーンが見られます。
埋め込み画像は、data: URL スキームを使用して画像コンテンツコードを HTML コードに直接埋め込むため、HTML コードのサイズが大きくなります。改善された方法は、埋め込み画像を CSS に埋め込むことです (CSS はキャッシュされます)。これにより、HTML のサイズを増やすことなく、HTTP リクエストの数をより効果的に減らすことができます。
多くのユーザーはキャッシュが空の状態でサイトにアクセスするため、初回の速度は重要です。
最初のルールが最も重要です。

前のページ1 2 3 次のページ続きを読む

<<: XHTML の珍しいが便利なタグ

>>: AngularJSループオブジェクトプロパティで動的列を実装するアイデアの詳細な説明