CSSを使用して多くの画像を(<div>
の背景として)配置しますが、この方法では非常にゆっくりとロードされることがよくあります。それらはロードする最後のもののようです。このように表示するには、小さな小さなアイコン画像でも時間がかかります。ブラウザに画像の優先度を伝える方法はありますか?または、CSSファイル内の画像をより早くダウンロードして、より早くレンダリングするように取得しますか?
CSSはコンテンツではなくスタイリング用です。ブラウザは(当然)スタイルを追加する前にコンテンツを表示しようとするため、スタイルシートの画像が通常最後にダウンロードされるのはそのためです。 contentにとって画像が重要な場合は、標準のHTML <IMG>
タグを介して画像を追加します。
スタイルシートの絶対URIを使用し、IMGタグの画像をページ上の非表示の<div>
に追加します(これは、すべてのページで同じ画像、理想的にはすべてのページ呼び出しですべてロードおよびキャッシュされるようにフッターに配置します)。
ページ上の画像が優先され、画像がキャッシュされると、後続のページ要求ですぐにレンダリングされます。
データURIタイプをサポートするブラウザーの場合(情報については http://en.wikipedia.org/wiki/Data_Uri を参照)、CSS自体に画像を含めます。
ただし、これにはいくつかの欠点があります。
CSSスプライト を使用します(特にアイコンの場合)。
画像をできるだけ小さくします。 smush.it を使用して、不要なバイトを削除できます。
現在のところ、最初にダウンロードするファイルを指定する方法はありません。参考までに、CSSファイルで背景画像として指定された画像はlastでダウンロードされるため、おそらくブラウザはコンテンツを表示せず、優先度が低いため、すぐに読み込む重要な画像には使用しないでください。