人気ブログランキング | 話題のタグを見る
Studio TA Subsite の案内とお知らせ

最初のページ表示の瞬間をデザインする / エキサイトブログ

2018年 02月 18日

ブログページ表示の最初でもたつく事がある


SSL移行に関係する問題なのか、ブログ表示の最初に、以前に気にならなかった状態が一瞬表示されます。 表示される時間はアクセスした場合で異なります。 長い場合でも1秒足らずですが、下の様にヘッダーの背景画像がロードされず、みっともない感じです。

最初のページ表示の瞬間をデザインする / エキサイトブログ_a0349576_14471562.png

私のスキンのペースデザインは何年も昔のもので、ヘッダー部の背景に軽い画像を2個使う、「ロードの遅い環境」でも問題の出難いタイプのスキンデザインです。 現在は大きな(重たい)背景画像を使う公式スキンも珍しくないのですが、私は本文の画像を見易くするために、ヘッダーや背景などはシンプルな方が良いという方針のアレンジです。

それにもかかわらず、軽い背景画像のロードでもたつくのは問題です。 今後も改善しない可能性があり得るので、少し対策をしました。 重たい背景画像を使うスキンでロード待ちが気になる場合は、このページの対策が少しは参考になるかも知れません。



ブログページが表示されるまでのステップ


ブログページが表示されるまでのステップを細かく観察してみます。 一旦ページが表示された後、ページャーで移動する場合は、ブラウザのキャシュが機能しますから、あくまでも最初にページを開く場合を調べました。 これはスキンによっても異なる可能性がありますが、以下は私の環境を前提とした話です。

下は、ページを開く最初の1秒位のおおまかなステップです。

最初のページ表示の瞬間をデザインする / エキサイトブログ_a0349576_15105822.png

興味深いのはページャーと右メニューが最後に呼び込まれる事です。 私のスキンの場合、下部ブロックを「本文」と「右メニュー」が分割しているので、先に表示された「本文」が「右メニュー」で後から押されて幅変化します。 こういう変形は無い方がスムーズですが、今のところ改善方法がみつかりません。



背景画像がロードされるまで 背景色で時間稼ぎする


ヘッダー背景画像が遅れる場合、最も簡単な対処方法は、デフォルトの背景色を指定しておく事でしょう。

#HEADER {
background-color: #b8dcef;
background-image: url("//pds.exblog.jp/pds/xxxxxxxxx.gif");

上は一般例ですが、「background-color: #b8dcef」という背景色の指定と、「//pds.exblog.jp/pds/xxxxxxxxx.gif」という背景画像の指定を同時に行っています。 後方に背景画像を指定しているので、背景画像が無い状態(未ロード)では背景色の方が表示され「間つなぎ」になり、背景画像がロードされると、それが優先表示されるという塩梅です。

「間つなぎ」の表示は下の様になります。

最初のページ表示の瞬間をデザインする / エキサイトブログ_a0349576_16052213.png

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」等に指定すれば、ページ全体のフェードインになります。



by Ataron2 | 2018-02-18 16:16 | ブログスキンのアレンジ