空のブラウザー キャッシュから開始し、ページの html ファイルにインライン css と javascript がある場合とない場合があると仮定して、ページの読み込みと表示にかかる時間を短縮したいと考えています。ファイルがブラウザに送信される順序を変更すると、表示時間が短縮され、ページの読み込みが速くなるように見えますか?
たとえば、ページに .css、.js、.png ファイルなどがある場合、最初に css をロードすると表示が速くなりますか?
ファイルタイプをロードするための標準/特定の順序はありますか?
Web ページのパフォーマンスを最適化するためのいくつかの手順を次に示します。
cssを一番上に置きます。
一番下にjavascriptを入れます。
すべてをキャッシュします。
遠い将来の期限切れヘッダーを設定します。
適切な場合は 304 を返します。
css と js に一意の URL を使用して、変更を反映します。
それとは別に、ajax必要な場所で使用します。
HTTP接続が多すぎることに注意してください。HTTP接続の確立には時間がかかり、HTMLファイルに多くの要素がリンクされていると、読み込み時間が簡単に消費されてしまいます。
小さなアイコンやグリフなどが多数ある場合は、それらを組み合わせてスプライトにし、1つの画像のみが読み込まれるようにします。たとえば、Facebookはスプライト技術を利用しています。ロードされた画像を調べると、それがわかります。
CSSファイルを1つのファイルに統合することもできます-Javascriptファイルと同じです。
loadまた、ページの読み込み時にページのコンテンツに影響を与えるJavaScriptがある場合は、DOMの準備ができたときに通知するイベントを使用するようにしてください。たとえば、次のようなすべてのリソースまでトリガーされないbodyイベントを待つのではありません。画像、CSSファイル、JavaScriptなどが読み込まれます。
js ファイルは、実行されるまでページの読み込みをブロックします。可能であれば、本文を閉じる前にそれらを含めます
ページの読み込み時間を節約して、次のようないくつかのトリックを使用できます。-目的ごとにすべての画像を呼び出すのではなく、CSS画像スプライトこれにより、ウェブサイトのHTTPリクエストが最小限に抑えられ、 HTMLから不要なdivタグや不要なコードが削除されます-マークアップとCSS
CSSを通じて良い結果を得ることができるので、そこでJscriptsを使用するべきではありません。不遜なコードなしで常にクリーンなHTMLマークアップを作成する必要があります。
結合ファイルは、すべてのスクリプトを1つのスクリプトに結合し、同様にすべてのCSSを1つのスタイルシートに結合することで、HTTPリクエストの数を減らす方法です。スクリプトとスタイルシートがページごとに異なる場合、ファイルの結合はより困難ですが、リリースプロセスのこの部分を作成すると、応答時間が改善されます。
ソリューションはシンプルで、すべての異なるファイルを 1 つの大きなファイルに結合し、zip を使用してそのファイルを圧縮するというものでした。残念ながら、これを手動で行うと、メンテナンスの問題が発生します。その単一の圧縮ファイルは編集できなくなります。そのため、元のソース ファイルの 1 つを編集した後、それを他のファイルと再結合して再圧縮する必要があります。
最初に、ウェブホスティング業者に遅いサーバーがないことを確認してください。これは、非常に安価な共有サイトのウェブホスティング業者で発生する可能性があります。HTML出力から不要なものをすべて削除することを確認する必要があります。コンテンツが動的か静的かを確認できます。動的な場合は、静的コンテンツに変換してみてください。
場合によっては、CMS のキャッシュ機能を有効にするだけで、Web サイトのコンテンツをより速く送信することもできます。接続が遅い場合は、gzip を使用して出力ストリームを圧縮する方がよい場合があります。しかし、これには時間がかかります。サーバーとクライアントも圧縮/解凍する必要があります。それも確認する必要があります。
JavaScript を使用していて実行が遅れる場合は、readyイベントを使用して、document.onload イベントを使用するように、html ドキュメントがロードされた後に (すべての画像などではなく) JavaScript を実行することもできます。