2011-01-26 14 views
3

ページ読み込み速度を向上させるための一般的な方法(LAMP、.NET、Ruby、mySqlなどに特化したものではない)とベストプラクティスは何ですか?一般的なWebページの読み込み速度とパフォーマンスのベストプラクティス

私は、キャッシング、HTTPヘッダ、外部ファイルの縮小(CSS、JS)など

に関するヒントについては、とGoogle PageSpeedやYahoo YSlowのような良いツールを探しています。

"忘れてはいけないこと"(モデレートされており、ここですべてのウィザードによって更新されている)の "最終的なリソース" wikiスタイルのチェックリストは最終目標です。だから、人々は、件名の古くなったブログ記事を無限にGoogleの周りに持っている必要はありません。 ;)

私は "主観的な"改造者が私に簡単に行くことを望む、私はこれが少し開いていることを知っている。 およびsimilarquestionsがこれまでにここで尋ねられています。 この素材はServerFaultWebmastersのドメインと重複しています。しかし、本当にこれをカバーする中央の "wiki"という質問はないので、私はそれを始めることを望んでいます。このようなgreat questionsがありますので、私はいつも参考にしています!おかげ

答えて

4
  • ページコンテンツのキャッシング
  • ロードjavascriptのページの一番下に
  • 縮小化のCSS(とJavaScript)
  • CSSやJavaScriptは、自分の[外部]にする必要がありますファイル
  • 可能であれば、すべてのjsまたはcssファイルを1つのタイプにまとめて(サーバーリクエストを保存する)
  • GoogleのjQueryjQuery UIローダーを使用します。 nコンピューター)
  • Gzip圧縮
  • イメージマークアップのように、幅と高さと同じサイズでなければなりません(リサイズ避ける)
  • 用画像スプライト時に適切な(しかし、オーバーそれをしない)
  • HTML要素の適切な使用。​​以上の人気を避けヘッダ
  • ため<H#>タグを使用して、今UL-ITIS)のjavascriptすなわち、できるだけ多くのセレクタ
  • フォーカス。 $( 'h1.titleは')$よりもはるかに高速です( 'タイトル')
+0

適切なタグを使用すると、読み込み速度が向上しますか?そして、より速いロードとレンダリングのためにDOMツリーのサイズを縮小することについては、「div-itis」ということがありますか? – thaddeusmt

+0

ページ要素タグとフォーカスjqueryセレクタを適切に使用すると、パフォーマンスが向上します。 (私は新しい点を追加しました)すべてがdivで、$( 'div.title')を使用した場合、実際には利益はありません。 – RDL

+0

彼が意味するのは、CSSセレクタはできるだけ具体的でなければならないということです(jQueryを使用)。しかし、これはCSSでは常にそうとは限りません。ディープCSSセレクタは、スタイルのレンダリングを遅くする可能性があります。たとえば、 ".my-div h1"と書かれた場合、 "html body .my-div ul li h1"は速くレンダリングされます。 –

2

あなたの動的なコンテンツがより静的ください。

あなたは、あなたがプロキシをお手伝いします静的コンテンツとして公開ページをレンダリングキャッシュ、リバースプロキシ、Webアプリケーションアクセラレータ & DDOSのようなものは、インフラストラクチャを防止することができます。

これはいくつかの方法で実行できます。 キャッシュヘッダーを処理することによって、もちろん、実際の静的ページと動的コンテンツをフィードするためのajaxクエリを考えても、確かにこれらの2つのソリューションのミックス、キャッシュヘッダーを使用して、ほとんどのブラウザとリバースプロキシでは、

静的なajaxソリューションを主な欠点として、SEO、ボットには動的コンテンツが表示されません。ボットにこの動的なデータを送る方法(および検索エンジンのURL、大きな地獄からこのデータにアクセスするユーザーを処理する方法)が必要です。したがって、アンチパターンは、ajaxの動的コンテンツではなく、静的なページに重要なSEOデータを持ち、ユーザーエクスペリエンスに対するajaxのファンシーなユーザーインタラクションを制限することです。しかし、コンポジットページのユーザーエクスペリエンスは、検索エンジンのボットエクスペリエンスよりも動的かもしれません。つまり、毎分最新のボットを毎分交換するということです。

セッションクッキーが時期尚早に使用されないようにする必要があります。ほとんどのプロキシキャッシュは、Cookieを含むHTTP要求をキャッシュすることを避けます(これはHTTPの公式な仕様です)。この問題は、多くの場合、すべてのページにログインフォームがあり、ログインフォームのPOSTに既存のセッションが必要なアプリケーションです。これは、別々のログインページ、またはログインPOSTの詳細なリダイレクトによって修正できます。リバースプロキシキャッシュでのクッキーの処理は、ワニスのような最新のプロキシキャッシュでも処理されます。

編集:リバースプロキシページの一つの高度な使用方法は本当に便利です。ESI、ワニス-ESIと、たとえば。 ESIリバースプロキシが識別するHTMLのレンダリングタグを置くことができます。これらの特定された領域のAchは、異なるTTL - を持つことができます - (ページ全体で1日、最新の新しいブロックで10分、チャットブロックで0としましょう)。そして、リバースプロキシは、これらのブロックを満たすために、独自のキャッシュまたはバックエンドにリクエストを行います。

ウェブが存在するので、プロキシとキャッシュは常にユーザーをだますための主要なテクニックでした。

+1

興味深い点がいくつかあります。フラットページを提供することは、すべてのコンテンツを生成するためにDBを叩くよりも迅速です。 – thaddeusmt

+0

特にそれを提供しないと、あなたと最終的なブラウザとの間のリバースプロキシキャッシュのチェーンがあなたのために長い間それを行います。 – regilero

関連する問題