これは、ページが実際にレンダリングされる数ミリ秒前にDOMLoadedイベントが発生するために発生します。
一言で言えば、これはあなたがあなたのウェブサイトの速度を最適化する必要があることを意味します。これは、ダウンロードを高速化することを意味するものではありませんが、ブロックしない方法で正しい順序でダウンロードすることを意味します。
ステップ1:マークアップ
1)マークアップを最適化するためにできることはたくさんあるようです。まず、スタイルシートとJavaScriptの順序を最適化できます。CSSファイルが非同期でダウンロードされるようにするには、外部JavaScriptファイルの前に常に外部CSSを含める必要があります。style.css
JavaScript呼び出しの一部またはすべての後にダウンロードされます。
外部CSSファイルと別のリソースの間のヘッドに1つのスクリプトブロックがあります。並列ダウンロードを許可するには、インラインスクリプトを外部CSSファイルの前、または次のリソースの後に移動します。
2)メインのJavaScriptファイルはマークアップ内でインラインです。これにより、スクリプトのダウンロードが完了するまでページのダウンロードがブロックされるだけでなく、コンテンツの前にページのダウンロードがブロックされると、おそらく白いフラッシュが発生します(または追加されます)。
スクリプトを非同期でヘッドにロードするのが私の好みの方法です。次に、DOMの読み込みが完了したときにスクリプトをトリガーする必要があります。または、bodyタグの下部にスクリプトを配置することで同じ結果を得ることができます。
ステップ2:ブラウザの機能を活用する
1)httpヘッダーを見ると、ブラウザーにキャッシュされていない28個のアイテムが個別のHTTP呼び出しとして提供されています(htmlページ、jpg画像、スタイルシート、JavaScriptファイルを含む)。
これらのアイテムは明示的にキャッシュできません。これは、Webサーバーの構成を編集することで簡単に修正できます。
2)gzip圧縮を有効にします。ほとんどのWebブラウザ(はい、IEでも)はgzip解凍をサポートしており、ほとんどの(すべてではないにしても)Webサーバーはgzipを使用した圧縮をサポートしています。やり過ぎて、代替の軽量HTTPプロトコル(ChromeとFirefoxでサポートされている)であるSPDYを調べることもできます。
ステップ3:コンテンツ配信
ドメインから提供されている個別のアイテムは約30あります。まず、このリクエスト数を減らす方法を検討してください。ページビューごとに30のHTTPリクエストがたくさんあります。次の方法を使用してこれと戦うことができます。
1)複数のホスト名にまたがる並列ダウンロード。ブラウザは現在、単一ドメインへの同時接続の数を制限しています。別のドメイン(たとえば、img.bigtim.ca)から画像を提供すると、他のコンテンツと並行して画像を提供できます。
2)複数のアイテムを1つに結合します。ダウンロードされるアイテムの多くは、ロゴやメニュー要素などの純粋なスタイルコンテンツです。これらは、単一の画像(1回だけダウンロード)に結合し、CSSを使用して分割できます。これはCSSスピリッティングと呼ばれます。StackOverflowはこれを行います:ここを見てください。
3)ダウンロードが必要なアイテムの量を減らすことができない場合は、Cookieのないドメインから静的コンテンツを提供することで、サーバー(およびクライアントのブラウザー)の負荷を減らすことができます。Stack Overflowは、画像、スタイルシート、スクリプトなどのすべての静的コンテンツでこれを行います。
ステップ4:独自のコードを最適化する
あなたのウェブサイトの速度を助けるためにHTTPとブラウザ技術ができることはたくさんあります。この最後のステップはあなた次第です。
1)jqueryを自分でホストすることを選択した理由はありますか?Jqueryのダウンロードページには、キャッシュされたスクリプトを迅速にダウンロードするためにポイントできる複数のCDNが表示されます。
2)現在、スタイルシートには20を超える未使用のCSSルールがあります(これは、CSSファイル全体の36%です)。本当に必要なものを再考してください。
3)JavaScriptのメインチャンク(bodyタグの上部)は、処理を高速化するためのハックのようですが、おそらく何の役にも立ちません。
ページがまだフェードインしているかどうかを指定するためにCookieが設定されています。JavaScriptを使用して、CSSで問題なく実行できる遷移を実行しているだけでなく、スクリプトの半分以上がCookieの読み取りと書き込みの機能を定義するために使用されています。
このようなものを見る$("body").css ("background-image", "url('images/background.png')");
と、$("#website").show ();
通常は「関心の分離」について怒鳴りますが、この答えは今では十分に長いので、同じコードにスタイルと機能を混在させるのは悪い習慣であることがわかるといいのですが。
補遺:コードを見ると、実行していることを実行するためにjqueryはまったく必要ありません。ただし、繰り返しになりますが、実行していることを実行する必要はないため、JavaScriptをまったく使用しなくても実行できる可能性があります。