2011-06-26 10 views
2

大きなヘッダーグラフィックとdivを持つPHPベースのランディングページを、Twitter、Stumpleupon、Facebookなどの一般的なJavaScript共有ボタンで実行します。これらのボタンは、以下のすべてのためにローディングプロセスを遅くしています。PHP - ローディングプロセスの最適化

私は、ウェブサイトの重要な部分が最初に表示され、あまり重要でない部分が最後に読み込まれるように思っています。

アーカイブするにはどうすればよいですか? ありがとう マイケル

+0

あなたのページへのリンクや、見ているかもしれないコードの一部(head要素のようなもの)を提供してください。 –

答えて

5

最も簡単な方法は、すべてのJavaScriptコードをドキュメントの一番下に移動することです。何らかの修正が必要な場合(つまり、DOM機能をdocument.writeの代わりに使用する場合)、またはスタイルを変更することはできますが、これらのガジェットが完全に読み込まれる前にサイトを使用可能にします。 async and deferを設定することは、エレガントで複雑な代替方法です。

複数のJavaScriptドキュメントを連結すると、同時接続数が少ない古いブラウザで特に効果的です。グラフィック(主にアイコン/ロゴなど)をCSS spritesと組み合わせることもできます。刃先では、data: URLsは、HTML文書のソースに画像を埋め込むことができます。これらのテクニックの詳細についてはYahoo Best Practicesをご覧ください。

HTML文書とCSS文書をgzipすることで、さらに高速化できます。 JavaScriptファイルも圧縮することができますが、縮小(たとえばYUI compressor)はさらに大きな利益を上げる傾向があります。静的リソースには、キャッシュ・ディレクティブも指定する必要があります。

サーバ側では、実際にAPCのようなphpバイトコードキャッシャーを使用する必要があります。 GoogleにはPHPのベストプラクティスにはadditional tipsがあります。

総合資源:

2

グレート質問、および私が山に書かれているよりも、より良い作家。実際、この記事はYahoo!スタッフショット - それは、件名に決定的な文書だ、とフォローするのは簡単:

http://developer.yahoo.com/performance/rules.html

もう一つの答えは、ページの一番下にあなたのJavascriptを動かす示唆しています。これは助けになる可能性がありますが、あなたの問題をすべて解決するわけではありませんし、画像の読み込みにはあまり役に立ちません。 Yahoo!のガイドでは、CSSスプライトシートに含まれている単一の画像に対して多数の小さな画像を扱い、HTTP要求のオーバーヘッドを削減し、すべてのコンテンツのキャッシュを有効にすることを確実にしています。

重要なものだけをドキュメントに入れて、ページの下部にあるjavascriptを使ってAJAXを使用して「エクストラ」に動的に読み込むような(巧妙で)トリッキーなものを行うこともできます初期荷重が完了する。 Spiffy!

0

javascript at the bottomのように他の人が言っているようです。たぶんheadjsライブラリは、この作業を少し簡単にしますか?

+0

特にStumbleUponボタンが遅く、読み込みプロセスがブロックされます。コードは次のようになります: ''私はそれをJavaScriptにしていませんが、私は推測しますあなたが上にそれを使用したいのであれば、底にそれをロードすることはできませんか? – Michael

+0

@Michealそうです。ブロックしているタグ