一目でわかるWebスピードの最適化

インターネットは、人々の生活にますます欠かせないものとなっています。ajaxやflexなどのリッチクライアントアプリケーションによって、これまでC/Sでしか利用できなかった多くの機能を体験することができるようになったのです。例えば、Googleは最も基本的なオフィスアプリケーションをインターネットに移行する機会を得ました。もちろん、同じ時間の利便性は、ページの速度がどんどん遅くなっていることは間違いありません。私はフロントエンドの開発者は、パフォーマンスの面では、ヤフーの調査によると、バックエンドは5％、フロントエンドは、最大95％、そのうちの88％のものを最適化することができますを占めている。

上の図は、Web2.0ページのライフサイクルを表したものです。エンジニアは、これを妊娠、出産、卒業、結婚の4つのステージに図式化しました。単にレスポンスを要求するのではなく、ウェブリンクをクリックしたときのこのプロセスを意識すれば、パフォーマンスを向上させるための多くの詳細を明らかにできるはずです。今日、タオバオポニーさんの講演で、ヤフーの開発チームのWebパフォーマンス研究の話を聞き、得るものが多かったと感じたので、ブログで紹介したいと思います。

Webサイトのパフォーマンスを最適化する14のルールというのは、ご存知の方も多いかと思います。詳細はdeveloper.yahoo.comでご覧いただけます。

1. HTTPリクエストの数を最小限にする [コンテンツ] 2.
2.CDN（コンテンツデリバリーネットワーク）を利用する【サーバー
3. Expiresヘッダ（またはCache-control）を追加する [サーバー]。
4. Gzipコンポーネント[サーバー］
5. CSSスタイルをページ上部に配置する【css】。
6.スクリプトを下に移動する（インラインも含む）【javascript】。
7.CSSでのエクスプレッションの使用を避ける【css】。
8. JavaScriptとCSSを外部ファイルに分離する [javascript] [css] 。
9.DNSクエリーを減らす【コンテンツ】。
10. JavaScriptとCSSの圧縮（インラインも含む） [javascript] [css］
11.リダイレクトを避ける［サーバー］。
12.重複するスクリプトを削除する[javascript]。
13. エンティティタグ（ETags）[css]の設定
14. AJAXキャッシュの作成 

Firefoxの下にFirebugに統合されているプラグインyslowがあります, あなたは簡単にこれらの分野であなたのサイトのパフォーマンスを確認するためにそれを使用することができます.

<イグ

私のホームページ西風荘の評価でyslowを使用した結果ですが、残念ながら51点のみです。ああ。中国の主要サイトの点数は、測っただけで高くない、新浪と網易は、ともに31点です。すると、yahoo（米国）のスコアは、実に97点！。このあたりは、yahooの努力の跡が窺えます。彼らの14のルールの概要から、今新たに20点、我々は本当に考えていない多くの詳細があり、いくつかの慣行は、さらに少しquot;変態＆quot;です。

第一のルールは、HTTPリクエストの数を最小限にすること（Make Fewer HTTP Requests)

HTTPリクエストはオーバーヘッドなので、リクエストの数を減らす工夫をすれば、当然ながらページの表示速度は向上します。一般的な方法としては、css、jsのマージ（ページ内のcssとjsのファイルを別々にマージすること）、イメージマップやcssスプライトなどが挙げられます。もちろん、おそらくcssの構造や共有などを考慮して、cssやjsのファイルを複数に分割しているのだろう。その時点でアリババ中国のサイトはまだ別の開発であり、その後、バックグラウンドでjsに、cssのマージは、ブラウザのためにまだ要求されるように、開発はまだ、複数に減らすことができます簡単に管理を繰り返し参照します。ホームページは、あまりにも多くのアクセスであるため、そうすることも2つの要求の数を減らすことができます。そして、実際に中国の多くのポータルは、これをやっている。

また、CSSスプライトとは、ページ上の背景画像を1つに統合し、CSSのbackground-positionプロパティによって、彼の背景となるHoweverの値を定義するだけである。現在、中国の淘宝網やアリババのサイトがこれをやっている。もし興味があれば、あなたは淘宝網とアリババの背景画像を見ることができます。

http://www.csssprites.com/ アップロードされた画像を自動的に合成し、対応する背景-位置座標を与えるツールサイトです。また、結果はpngとgif形式で出力されます。

2つ目は、CDN（Content Delivery Network）を利用することです。コンテンツデリバリーネットワークを利用する

正直、CDNについてはよく知らないのですが、簡単に言うと、既存のインターネットに新しいレイヤーのネットワークアーキテクチャを追加することで、Webサイトのコンテンツをユーザーに最も近いキャッシュサーバーに公開し、DNSロードバランスの技術により、ユーザーソースがキャッシュサーバーに近いと判断して必要なコンテンツを取得し、杭州のユーザーは杭州近くのサーバーのコンテンツを訪問し、北京のユーザーは北京近くのサーバーのコンテンツを訪問するというものです。杭州のユーザーは杭州付近のサーバー上のコンテンツにアクセスし、北京のユーザーは北京付近のサーバー上のコンテンツにアクセスする。これにより、ネットワーク上のデータ転送時間を効果的に短縮し、高速化を図ることができる。ヤフーでは、静的コンテンツをCDNに配信することで、ユーザーへの影響時間を20％以上短縮しています。

CDN技術概略図。

CDNネットワーク構成図。

第3条 Expire/Cache-Controlヘッダを追加する。Expires ヘッダを追加する

昨今、ページ内に画像やスクリプト、CSS、Flashなどが埋め込まれることが多くなり、それらにアクセスする際には多くのhttpリクエストが発生することになる。Expireは、特定の種類のファイルがビューアにキャッシュされる期間を指定するヘッダーメッセージです。画像やフラッシュは公開後、頻繁に変更する必要がないものが多いので、キャッシュした後は、ブラウザはこれらのファイルをサーバーからダウンロードする必要がなく、キャッシュから直接読み込むことになるので、再びページにアクセスする速度が大幅に速くなる。典型的なHTTP 1.1プロトコルは、次のようなヘッダを返します。
http/1.1 200 OK
日付 1998年10月30日（金）13:19:41 GMT
サーバー Apache/1.3.3 (Unix)
キャッシュ制御: max-age=3600, must-revalidate
期限切れ。金曜日, 30 Oct 1998 14:19:41 GMT
Last-Modified: 月曜日, 29 Jun 1998 02:28:12 GMT
ETag: "3e86-410-3596fbbc"
コンテンツの長さ: 1040
Content-Type: text/html

これは、サーバーサイドのスクリプトでCache-ControlとExpiresを設定することによって実現できます。

例えば、phpで30日後のExpiresを設定する場合。

<! --pHeader("Cache-Control: must-revalidate");$offset = 60 * 60 * 24 * 30;$ExpStr = "Expires: " . gmdate("D, d M Y H:i:s", time() + $offset) . GMT" Header($ExpStr);--> は、サーバ自体の設定で行うこともできますが、これらもあまり明確ではありませんね。より多くの友人が参照することができます知っているしたい http://www.web-caching.com/

私の知る限り、現在のアリババ中国語サイトのExpires timeは30日です。しかし、特にスクリプトの有効期限については、慎重に検討しないと、対応するスクリプト機能が更新された後、クライアントがその変更を "感知" するまでに長い時間がかかるという問題があります。以前、[Suggest project]に携わっていた時にこの問題に遭遇したことがあります。ですから、何がキャッシュされるべきで何がキャッシュされるべきではないかを注意深く考えることは良いアイデアです。

その4、Gzip圧縮を有効にする。Gzipコンポーネント

Gzipの背後にある考え方は、転送する前にサーバー側でファイルを圧縮することです。これにより、ファイル転送のサイズを大幅に削減することができます。転送後、ブラウザは圧縮されたコンテンツを再圧縮して実行します。現在のブラウザはgzipに対応しています。ブラウザだけでなく、主要なクローラーも識別できるため、安心してseoができます。gzipの圧縮率は非常に大きく、一般的に85％、つまり、100Kページのサーバー側は約25Kに圧縮し、クライアントに送信することができます。特定のGzip圧縮原理は、csdn "gzip圧縮アルゴリズム"を参照することができます;この記事。Yahooは特に、html（php）、js、css、xml、txt...といったすべてのテキストコンテンツをgzip圧縮すべきであると強調している。これは、我々は我々のサイトによく行うものです、私たちのホームページは、JSに配置された広告コードの多くがあるため、Aではない前に、サイトのJSのこれらの広告コードの所有者は、また、我々のサイトを遅くするgzip圧縮を通過しませんでした。

上記3点は、ほとんどサーバーサイドの話であり、私もざっくりとしか理解していない。間違っていたら訂正をお願いしたいので、お任せします。

第5条、ページのトップにcssを置く（Put Stylesheets at the Top)

cssをページの一番上に置く、なぜか？cssが完全に転送されるまで、ieやfirefoxなどのブラウザは何もレンダリングしないからです。cssは、正式名称をCascading Style Sheets（层叠式表）といいます。カスケードとは、後ろのcssが前のcssを上書きでき、上のcssが記事の下のcssを上書きできる[css!important]ことを意味します。前のものは上書きできるので、ブラウザが完全に読み込まれた後にレンダリングするのは理にかなっています。IEなど多くのブラウザでスタイルシートをページの一番下に置くことの問題は、ページ内容の順次表示を無効にしてしまうことです。Firefox はこれを防いでいませんが、スタイルシートがダウンロードされるときに、一部のページ要素を再描画する必要があり、ちらつきの問題が発生する可能性があることを意味します。そのため、できるだけ早くCSSを読み込ませる必要があります

この意味のレイヤーに続いて、実はもっと細かく見ていくと最適化できる部分があるんです。例えば、このサイトの上に含まれている2つのcssファイル、<link rel="stylesheet" rev="stylesheet" href="http:// www.space007.com/themes/google/style/google.。 css" type="text/css" media="screen " /> and<link rel="stylesheet" rev="stylesheet" href="http: //www.space007.com/css/print.css" type="text/css" media="print" /> となります。mediaから、最初のcssはブラウザ用で、2番目のcssファイルは印刷用スタイルであることがわかります。ユーザーの動作からすると、ページを表示した後に印刷するという動作が発生するはずです。ですから、より良い方法は、ページが表示された後に、このページ用に動的にロードされること＋印刷デバイス用のcssをロードすることで、速度を少し向上させることができるはずです。(笑)

6つ目は、ページの一番下にスクリプトを置く（Put Scripts at the Bottom）ことです。

スクリプトをページの一番下に配置する目的は2つあり、1.スクリプトの実行がページのダウンロードを阻害することを防ぐためです。ページを読み込む過程で、ブラウザがjsの実行文を読むと、確かに次のような内容を読み取った後に、すべてを説明することになります。もし信じられないなら、jsのデッドループを書いて、次のようなものがページ上に出てくるかどうか確かめてみるといい。(setTimeoutとsetIntervalの実行は、適切な応答時間まで以下の内容をレンダリングし続けるという点で、マルチスレッドと多少似ている) ブラウザの論理としては、jsはいつでもlocation.hrefなどを実行して、ページの処理を完全に中断する可能性がある、つまり、当然、実行が終わるのを待ってから読み込むということになるのです。だから、ページの最後に配置され、効果的にページの可視要素の読み込み時間を短縮することができます。        2、スクリプトによって引き起こされる2番目の問題は、それが並列ダウンロードの数をブロックしていることです。HTTP/1.1の仕様では、ホストブラウザごとの並列ダウンロード数は2以下が推奨されています（IEは2まで、ffなど他のブラウザはデフォルトで2に設定されていますが、新しいie8は6に達することができます）。そのため、複数のマシンに画像ファイルを配布すれば、2以上の並列ダウンロードを実現することができます。しかし、スクリプトファイルがダウンロードされると、ブラウザは他の並列ダウンロードを開始しません。

もちろん、ページの最下部にスクリプトを置くことの実現性は、それぞれのサイトによって疑問があります。たとえばアリババの中国語サイトのページを見てみましょう。ページの表示に大きく依存するインラインjsが多く、非侵入型スクリプトという考えからはかけ離れていることは認めますが、"レガシー問題"が多く、そう簡単に解決できるものではありません。

その7：CSSでの表現を避ける（Avoid CSS Expressions）

しかし、これでは意味のないネストを2つ重ねていることになり、絶対によくありません。もっといい方法が必要です。

8つ目は、javascriptとcssの両方を外部ファイルに入れること（Make JavaScript and CSS External）

これはわかりやすいと思います。パフォーマンスの最適化だけでなく、コードのメンテナンスのしやすさを考えても、これはやっておくべきでしょう。cssやjsをページのコンテンツに書き込むと、リクエスト数は2つ減りますが、ページのサイズも大きくなります。cssとjsがキャッシュされていれば、2回の余分なhttpリクエストは発生しない。もちろん、先ほども言ったように、特殊なページ開発者の中には、今でもインラインのcssやjsファイルを選択する人もいます。

その9：DNSルックアップの削減

インターネットでは、ドメイン名とIPアドレスが1対1で対応しており、ドメイン名（kuqin.com）は覚えやすいが、コンピューターはそれを認識せず、コンピューター間の"認識"はIPアドレスに変換されなければならない。ネットワーク上の各コンピューターは、それぞれ別のIPアドレスに対応しています。ドメイン名とIPアドレスの変換は、ドメイン名解決と呼ばれ、DNSルックアップとも呼ばれる。DNS解決処理には20～120ミリ秒の時間がかかり、DNSルックアップが完了するまで、ブラウザはドメイン名の下にあるものをダウンロードすることはありません。そのため、DNSの問い合わせ時間を短縮することで、ページの読み込み速度を速めることができます。yahooでは、1ページに含まれるドメインの数をできるだけ2〜4個に抑えることを推奨しています。そのためには、ページ全体をうまくプランニングすることが必要です。現状ではこの点がうまくいっておらず、広告出稿システムのヒットポイントが多く、足を引っ張られています。

その10：JavaScriptとCSSの圧縮（Minify JavaScript）

jsとcssを圧縮することの右と左は明らかで、ページのバイト数を減らすことです。容量が小さければ、当然ページの読み込み速度も速くなります。そして、圧縮はサイズを小さくするだけでなく、左右を守る役割も果たすことができるのです。これは私たちがよくやっていることです。よく使われる圧縮ツールは、JsMin、YUI compressorなどです。のようなものもあります。 http://dean.edwards.name/packer/ は、非常に便利なオンライン圧縮ツールを提供してくれます。のjQueryのページで、圧縮されたjsファイルと圧縮されていないjsファイルのサイズの違いを見ることができます。

もちろん、圧縮の弊害として、コードの可読性がなくなってしまうことが挙げられます。多くのフロントエンドの友人がこの問題に遭遇していると思います：Googleの効果はクールですが、彼のソースコードを見るには、文字の圧縮の束であり、関数名さえ置換され、汗死！。自分のコードはまた、このような非常に不便を維持することではありませんです。すべてのアリババ中国語サイトは現在、jsとcssがリリースされたときに、サーバー側で圧縮の練習を使用しています。これは、我々自身のコードを維持するために非常に便利です。

第11条 リダイレクトを避ける

少し前にieblogで記事"Internet Explorerと接続制限"を見て、例えば、あなたがタイプするとき、あなたは、次のようになります。 http://www.kuqin.com/ サーバは自動的に301サーバリダイレクトを生成します。 http://www.kuqin.com/ これは、ブラウザのアドレスバーを見ればわかります。このリダイレクトも当然ながら時間がかかります。もちろんこれは一例に過ぎず、リダイレクトが起こる理由は他にもたくさんありますが、不変なのは、リダイレクトが増えるたびにWebリクエストが1つ増えるということなので、最小限にとどめておく必要があるのです。

第12条 重複するスクリプトを削除する

パフォーマンスの観点だけでなく、コード仕様の観点からも、言わなくても分かっていることだと思います。しかし、手っ取り早く修正するために、おそらく重複しているであろうコードを追加してしまうことが多々あるのは認めざるを得ません。cssフレームワークとjsフレームワークを統一することで、より良い問題解決になるのかもしれません。Piggyの指摘はもっともで、単に重複しないだけでなく、再利用可能であることが重要なのです。

第13条 ETagsを設定する (ETags )

これは私もよくわかりません(笑)。inforQの "Using ETags to Reduce Web Application Bandwidth and Load" に詳しい解説がありましたので、興味のある方はご覧ください。

第14回「Ajaxをキャッシュ可能にする

Ajaxのキャッシュはどうするのか？重要なのは、"asynchronous" は " instantaneous" を意味しないということです(It's important to remember that "asynchronous" does not imply "instantaneous".). AJAXが動的に生成され、1人のユーザーに対してのみ機能するとしても、キャッシュされる可能性があることを忘れないでください。