web-dev-qa-db-ja.com

Webページのプリローダーはありますか？

Flash | swfファイル用のプリローダー、画像用のプリローダー、レイジーローダーを見つけました。しかし、完全なWebページには何もありません。

私のようないくつかのサイトには、大きなヘッダーとフッターがあります。これにはプリローダーが必要です。提案してください。

javascript
3
Amit Kumar Gupta

完全なWebページをプリロードしますか？少年、完璧な解決策がありますか！

Firefoxは link prefetching をサポートします。これはHTML 5の一部であり、今後数か月でより多くのブラウザがサポートします。

HTMLドキュメントの<head>セクションに次のようなものを貼り付けるだけです。

<link rel="prefetch" href="http://url.goes.here/" />
<link rel="prefetch" href="http://url.goes.here/images_work_too.jpg" />

詳細についてはこちらをご覧ください。

3
Anirvan

プリローダーの意味がわかりません。既にヒットしているページで再利用されたり、予想して以前のページでロードされたりしない限り、ページにアクセスする前にページに何もロードできません（これはお勧めできません）。

JavaScriptを使用して、IDを持つすべての空のタグをヘッダーとフッターに読み込み、後でJavaScriptでそれらを読み込むことにより、ヘッダーとフッターを遅延読み込みできます。一般に、多くの余分な作業が追加され、ページが大きくなる可能性があるため、これを行うことはお勧めしません。 JavaScriptが追加され、実際には何も得られませんでした。

私がお勧めするのは、画像がページの大部分を占めるように見えるため、JavaScriptで画像を遅延ロードすることです。また、Fire Foxでページを試して、FirebugとYSlowをインストールしてください。これは、ページが遅い理由を確認するのに役立ちます。

以下に、特に気づいたいくつかのことと、すぐにできることを示します。

  1. CSSファイルを組み合わせて縮小します。あなたは今6を持っています。ロードするファイルごとにオーバーヘッドがあります。
  2. ブラウザのキャッシュを使用して、サイトで使用される画像をキャッシュします。そうすれば、人々は1ページしかロードできません。その後、画像はキャッシュから取得されます。
  3. すべての画像の幅と高さを指定します。これにより、ロード時間が短縮されます。
  4. HTMLを縮小する
  5. 画像を縮小します。必要なサイズよりも11％大きくなっています。
  6. Cookieのないドメインに画像を置いて、画像の読み込みを高速化します。
  7. 繰り返し使用する小さな画像をスプライトします。これにより、各ページの読み込みに必要なhttp呼び出しの数が削減されます。

最後に、あなたがあなたを助けることができるかもしれないもう一つのことは、あなたのサーバーに物事をキャッシュすることです。サイトにほとんどまたはまったく変更されないコンテンツのデータベースクエリが多数ある場合は、クエリの結果をサーバーキャッシュにキャッシュします。これにより、サーバーの処理時間が短縮されます。 Facebookのような企業は、コンテンツの99％がサーバーキャッシュにあるまでこれを行います。

6
Ben Hoffman

ヘッダーとフッターは非常に大きく、合計202 KBです。画像を保存するときにJPEGの品質パラメーターを下げると、品質を著しく低下させることなく、おそらく150 KBまたは100 KBまで下げることができます。

別のオプションは、ヘッダーを2つの部分に分割することです。1つは水に飛び散るサイコロのような詳細なグラフィックがあり、もう1つは「無地」ブロックがあります。 2番目の部分をPNGとして保存すると、節約できます。可能であれば、256色に減らします（ほぼ確実にフッターでこれを行うことができます）。

また、ヘッダー/フッターがapplication/octet-streamとして提供されていることに気付きました。 （ 画像を直接開くと ダウンロードするように求められます。）これが違いを生むかどうかはわかりませんが、使用してみてくださいimage/jpegなどの適切な画像MIMEタイプ。ブラウザーがファイルの種類を正確に知る前に、ファイル全体をダウンロードしている可能性があります。

これがすべて失敗した場合、Javascriptトリックを使用して画像を最後に読み込むことができます。背景画像のCSSルールを2つの別個のCSSクラスに移動しますが、HTMLには追加しないでください。 （ページが読み込まれると、画像は表示されません。）ページが読み込まれたら、Javascriptを使用してこれらのクラスを追加します。

1
DisgruntledGoat