私は非常に大きなサイトを持っており、読み込みにかなり時間がかかります。約120秒かかります。私がやろうとしているのは、サイトの最初の半分を最初にロードすることです。その後、ユーザーは他のパーツがロードされている間にサーフィンをすることができます。
私がやろうとしていることは以下です。
私の知る限りでは、Google PageSpeed がそうしているので、はい。しかし、問題は、PageSpeed を使用する場合、DNS サーバーの設定などを変更する必要があることです。これを自分で行いたいと考えています。
ページに.php拡張子があり、PHP 言語で記述されているとします。
遅延読み込みの概念を使用できます。
ロード中に必要なコンテンツのみをロードしてから、jqueryとajaxを使用して残りのコンテンツをロードできます。
このようにして、ユーザーは、他の部分が非同期でロードされている間に、すでにロードされている部分を簡単にサーフィンして操作できます。
jQueryのajaxまたはpostメソッドがこれに役立ちます。
簡単な例は、
ページにコンテンツの5つの部分がある場合、2つをすぐにロードする必要があります
ページには2つのパーツが読み込まれるため、5つのパーツを読み込むよりもかなり時間がかかりません。
ドキュメントがロードされたら、ajaxを使用して残りの3つのパーツをロードします。Ajaxは、いくつかのパラメーターを使用してWebサイトの特定のページ（AjaxRequestHandler.phpという名前の場合もあります）にリクエストを送信します。このページはリクエストを処理してHTMLを生成し、メインページに送り返します。返されたhtmlとこれはすべて非同期で発生するため、ユーザーは最初にロードされた2つの部分と通信できるようになります
また、Webテクノロジーを初めて使用する場合でも、遅延読み込みを実現するには、少なくともajaxや非同期呼び出しなどの知識が必要だと思います。
編集 ：
あなたのこの質問のために
AJAXを除いてこれを回避する方法はありますか？
役立つことがあれば、iframeを試すことができると思います。
ページの読み込み後にメインコンテンツをiframeなしで読み込む一方で、他のコンテンツをiframeに読み込む。
このjsFiddle
jsfiddle.net/cGDuV/
スタックオーバーフローのこの投稿で言及されている、iframeでの遅延読み込みを理解するのに役立ちます。
jqueryを避けたい場合は、同じようにjavascriptを使用できます。
早期にフラッシュするように出力バッファーを操作して、質問に投稿したスクリーンショットで後のことを実現できます。 http://www.stevesouders.com/blog/2013/01/31/http-archive-adding-flush/
すべての画像をレイジーロードできます。これは簡単に実行できるjqueryプラグインです http://www.appelsiini.net/projects/lazyload
すべてのjsを1つのファイルにまとめることができます。cssファイルと同じです。これは速度を上げるのに役立ちます。
キャッシング、期限切れヘッダー、gzip/deflate圧縮を組み込むことができ ますhttps://github.com/h5bp/html5-boilerplate/blob/master/dist/.htaccess
サードパーティのjavascriptウィジェットのガベージ（Google+ボタン、ボタンのようなファブブック、ソーシャル、Twitterのもの）をノンブロッキング非同期でロードして、最初にページの速度が低下しないようにすることをお勧めします。 http://css-tricks.com/thinking-async/
可能な限り画像を最適化します。 http://kraken.io/
CDNを使用する http://www.maxcdn.com/
最後に、サイトをテストして、大きなボトルネックがどこにあるか、速度を最適化するためにサイトをどこで改善できるかを確認します。ウォーターフォールチャート機能を使用する http://www.webpagetest.org/
できることの1つは、ページの重要な部分（上半分）をすべて正常にロードしてから、javascript/ajaxを使用してページの後半をロードすることです。これは非常に一般的な手法です（画像の読み込みによく使用されます）。
これは、jQuery for Designersの優れたチュートリアルであり、ページの読み込み後にjQueryを使用して画像を非同期で読み込む方法を説明しています。http://jqueryfordesigners.com/image-loading/
そうは言っても、2分のロード時間は非常に長すぎるようです。たぶん、サーバーの速度を低下させる可能性のあるものがあるかどうかを確認する必要があります。
サイトの読み込みが遅い理由を特定する必要があります。送信するデータのサイズは？Google と Firefox には、負荷がかかりすぎる要素を特定するのに役立つ Web 開発者ツールがあります。犯人を特定したら、最悪の違反者を非同期でロードしてみてください。
aync リクエストに関するこの記事をご覧ください: https://segment.io/blog/how-to-make-async-requests-in-php/
私の意見では、無限のスクロール ソリューションが必要です。つまり、「ページ」ごとに一定量のコンテンツを用意します (推定で 1500 ピクセル相当の高さになる可能性があります)。ユーザーが設定された量だけ下にスクロールすると、jQuery を使用して別の「ページ」をロードします。
本当にすべてのコンテンツを無条件に読み込みたい場合は、同じアプローチを使用して、ドキュメントの準備ができたら、次のページの読み込みをトリガーします。全体がロードされるまで、ページローダーをループします。そうすれば、最初の「ページ」をロードし、「スクロールせずに見える範囲」のコンテンツを後続のリクエストに任せることができます。
リソースのプリフェッチWeb ページの読み込みに大きなファイルが必要な場合、サーバーから要求されるファイルの順序を変更すると、多くの場合、メリットが得られます。場合によっては、必要になる前にファイルをダウンロードして、要求されたらすぐに利用できるようにすることが理にかなっていることがあります。ページに必要なリソースを事前にロードできる場合、ユーザーが認識するそのページのネットワーク遅延を大幅に削減するか、またはなくすことさえできます。Google pagespeed Insights を実行して結果を確認すると、Web サイトの問題がどのように修正されているかがわかります。
サイトをより速く読み込むためのヒント:
Web ページをロードするときにもう 1 つ、php を smarty で使用している場合は、このプラグインを使用して、サーバーへの http リクエストの数を減らし、すべての js および css リソースのリクエストを 1 つの HTTP リクエストに結合することでサイトの読み込みを高速化できます。 .
あるいは、これらのプラグインを探しているかもしれません。
あなたが望むのは Facebook がBigpipeを行うことであり、ここに関連する SO 投稿があります: Facebook Bigpipe Technique Algorithm
あらゆる種類の Javascript を含む他のソリューションがありますが、PHPが必要であり、Facebook がPHPを使用しているため、Bigpipe を読む必要があります。Juho には PHP で記述された例もあるため、PHP の要件を満たす必要があります (ただし、AJAX ではなく js が必要です)。
さて、アイデアは、上記のPawanNogariyaによって説明されたものとほぼ同じです。ビューとデータを非同期でフェッチしてから、これらを表示する必要があります。ただし、これは、他のページにリダイレクトしたり投稿したりすることはなく、ajazを介してすべてのビューを取得することを意味します。これにより、GmailのようなアプリケーションSPA（シングルページアプリケーション）になります。そして、これはまた、何が再調整され、何が再調整されていないかを追跡する必要があることを意味し、混乱したままになります。したがって、すべてを自分のやり方で行う代わりに、それを可能にする開発された人気のあるフレームワークがすでに利用可能ですが、それらはそれをSPAにします。つまり、アプリケーションはリダイレクトのようにサーバーに「投稿」しませんが、すべてがAjaxを使用して実行されます。
Backbone（Backbone.js）、Knockout（Knockout.js）などを使用して、これを実現できます。これらはjavascriptベースのフレームワークであり、あなたが今尋ねたことを達成するのに役立ち、例証することができ、チュートリアルも簡単に利用できます。比較的大規模なアプリケーションでC＃（MVC）を使用しているため、どの言語でも使用できます。
これは醜いでしょう！最初のコンテンツ ステージがロードされた後、 ajax呼び出しを使用してページ フラグメントをロードすることを検討する必要があります。これは、ほとんどすべての既知の Web 標準を破ることになりますが、Web サイトを部分的にレンダリングする可能性があります....
これが言われている：これは醜いものです
まず、あなたのウェブサイトのタグを取り除き、タグを使用しないこと<html>から始めてください。
グループの各終了タグの後に（またはなど）使用して、ロードしたい順序で（最初に）HTMLコードを送信します<head><body>echo ...</table></div>flush(); ob_flush();これにより、すべての既知のコンテンツがブラウザにすぐに送信されます。ブラウザーは、既知のコンテンツをレンダリングできるかどうか、および (ブラウザーの仕様とユーザー設定に基づいて) レンダリングできるかどうかを決定しますが、例外はほとんどありません。body-tag の終了を待つブラウザもあれば、html の終了タグ (safari afair) まで待つブラウザもあるため、これも削除しました。エコー フラッシュ シナリオを賢く使用すると、ほとんどのブラウザでエラーなしで表示されるレンダリング可能な部分にページを分割できるはずです。
繰り返しますが...このようにしないでください..それは悪く、醜く、どのWeb標準にも近くありません
しかし、あなたはそれを求めました。
この質問に対して
AJAXを除いて、これを回避する方法はありますか?
役立つ場合は、iframes を試すことができると思います。
ページがロードされた後にiframeに他のコンテンツをロードしながら、iframeなしでページロードにメインコンテンツをロードします。
このjsFiddle
jsfiddle.net/cGDuV/
stackoverflow のこの投稿で言及されている iframe での遅延読み込みを理解するのに役立ちます。
jquery を避けたい場合は、同じように JavaScript を使用できます。
ブラウザーはドキュメントを受信時にレンダリングしませんか? ファイルの先頭に置くものはすべて、最初にクライアントによって受信されるため、最初に表示されます。たとえば、非常に大きな画像ファイルをオンラインで表示しようとすると、上から下に読み込まれます。同じことが Web ページにも当てはまります。最初に読み込みたいコンテンツをページの上部に配置するだけです!
質問 1 への回答: はい 質問 2 への回答: 上記 質問 3 への回答: 何もありません。ページを正しい順序に並べるだけです。
これらはすべて同じページにある必要がありますか? コンテンツを複数のページに分割することは理にかなっていますか? その人がそれを要求するまで、その一部を遅らせることはできますか? タブにグループ化できますか? たとえば、非表示のタブは遅延ロードされる可能性があります。
他の方法でコンテンツを再構築することを真剣に検討してください。問題を単純化する別の方法を思い付くことができるかもしれません。
上記のすべてを念頭に置いて、data/html コードの一部を memcache やその他の可能な方法でキャッシュして、毎回その生成をスキップすることを考えるかもしれません。もちろん、これはデータが変更される頻度に大きく依存します。
純粋なPHPで？スマートではありません。
$(function() {
$('#body').delay(1).fadeOut();
});
フィドルの例: http://jsfiddle.net/r7MgY/