CSSの読み込みのタイムラグ

CSS,JS初心者のものです。

http://mydesign.mods.jp/trip_newyork.html

上記ページにて、右のサイドメニューにマウスオンで、斜線の入ったグレーの背景に、文字が白になるようにCSSにて設定しているのですが、キャッシュのない最初のページ読み込みの際に、背景分のCSSが効くのが数秒遅れます。

このページには、
・サイドメニューにスクロールで固定するjquaryを使用している
・大きい画像をクリップしてサムネイルにするjquaryを使用している

ので、何かとバッティングして読み込みが遅れているのでしょうか？
またサムネイルの表示も遅いので何か対策はあるのでしょうか？

解決策があればご教授いただきたいです。
よろしくお願いいたします。

No.1 ベストアンサー 回答者： ORUKA1951 回答日時： 2016/04/21 18:58

チェックしてみましたが、大きな原因は画像のサイズが大きすぎる・・に尽きるようです。

CSS自体のファイルサイズは画像に比較するととても小さいのですが、ブラウザは、どれから先に読みに行くかはわかりません。
　画像を全て小さいサイズにする。それで全く同じ動作にできます。
　また、CSSで可能なものは、javascriptを使用しない。

この回答へのお礼

ご教授ありがとうございます。
画像の大きさはそのままに、容量を最適化してみたのですがダメみたいです。。

お礼日時：2016/04/22 22:43

No.2 回答者： ORUKA1951 回答日時： 2016/04/23 18:01

＞画像の大きさはそのままに、容量を最適化してみたのですがダメみたいです。

。
　意味が分かりませんが・・
　大きな画像を小さくして表示しているは無理だと・・
　表示する画像は小さなサムネイルにして、スタイルシートで必要な時読み込むようにすればよいです。