ブログページ表示の最初でもたつく事がある
SSL移行に関係する問題なのか、ブログ表示の最初に、以前に気にならなかった状態が一瞬表示されます。 表示される時間はアクセスした場合で異なります。 長い場合でも1秒足らずですが、下の様にヘッダーの背景画像がロードされず、みっともない感じです。
私のスキンのペースデザインは何年も昔のもので、ヘッダー部の背景に軽い画像を2個使う、「ロードの遅い環境」でも問題の出難いタイプのスキンデザインです。 現在は大きな(重たい)背景画像を使う公式スキンも珍しくないのですが、私は本文の画像を見易くするために、ヘッダーや背景などはシンプルな方が良いという方針のアレンジです。
それにもかかわらず、軽い背景画像のロードでもたつくのは問題です。 今後も改善しない可能性があり得るので、少し対策をしました。 重たい背景画像を使うスキンでロード待ちが気になる場合は、このページの対策が少しは参考になるかも知れません。
ブログページが表示されるまでのステップ
ブログページが表示されるまでのステップを細かく観察してみます。 一旦ページが表示された後、ページャーで移動する場合は、ブラウザのキャシュが機能しますから、あくまでも最初にページを開く場合を調べました。 これはスキンによっても異なる可能性がありますが、以下は私の環境を前提とした話です。
下は、ページを開く最初の1秒位のおおまかなステップです。
興味深いのはページャーと右メニューが最後に呼び込まれる事です。 私のスキンの場合、下部ブロックを「本文」と「右メニュー」が分割しているので、先に表示された「本文」が「右メニュー」で後から押されて幅変化します。 こういう変形は無い方がスムーズですが、今のところ改善方法がみつかりません。
背景画像がロードされるまで 背景色で時間稼ぎする
ヘッダー背景画像が遅れる場合、最も簡単な対処方法は、デフォルトの背景色を指定しておく事でしょう。
#HEADER {
background-color: #b8dcef;
background-image: url("//pds.exblog.jp/pds/xxxxxxxxx.gif");
上は一般例ですが、「
background-color: #b8dcef」という背景色の指定と、「//pds.exblog.jp/pds/xxxxxxxxx.gif」という背景画像の指定を同時に行っています。 後方に背景画像を指定しているので、背景画像が無い状態(未ロード)では背景色の方が表示され「間つなぎ」になり、背景画像がロードされると、それが優先表示されるという塩梅です。
「間つなぎ」の表示は下の様になります。
Htmlのヘッダーへの書き込みやスクリプト等を使えないエキサイトでは、この方法が妥当と思います。 立体感などはないですが、白い素のヘッダーに比べると本来の背景画像に似た色の背景色があれば、かなり印象が違います。
メニューをフェードイン表示する
実は、最初にページ全体のフェードインを試したのですが、これも効果があります。 背景画像が無い最初の表示をぼかしてしまうわけです。 しかし、このロード遅れは最初にページを開く時だけで、ページャー移動時などでは遅れがなくなります。 ところが、ぺージのフェードインはページャー移動でも常に実行されるので、ちょっと「余計」な印象で却下しました。 これは好みの問題ですが。
一方、右メニューの表示遅延、本文の押し戻しに関しては、ページャー移動時も毎回生じます。 そこで、メニューをフェイドイン表示してみる、ちょっと良い感じになりました。 メニューにはこのフェードインを採用する事に。
#R_MENU {
display: table-cell;
width: 180px;
animation: fadeIn .5s ease-out 0s 1 normal; }
@keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1} }
上は一般的なメニューの例ですが、太字の部分が「0.5sec」のフェードインをさせる指定です。 こういう指定を「body」等に指定すれば、ページ全体のフェードインになります。