読者です 読者をやめる 読者になる 読者になる

せかいや

いまいるここを、おもしろく http://sekai-in-the-box.appspot.com/

【Webサイト】サイトの高速化(JavaScript ファイルを末尾に。ローディング画面の追加)

 
自分のサイトを早くするよー。

ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール

ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール


この本を読んでるよ。

改修前の状態

f:id:sekaiya:20131017204945j:plain

 

ルール6:JSファイルは下に置く

このルールに素直に従えば
逐次ローディングが実行されてユーザー満足度は増す。
けど!
私のサイトは、頭にアニメがくるから逐次ローディングはむしろ困る。

今まではJSを頭に置くことで
(JSの読み込みでローディングが停止されるのを逆手にとって)、
アニメスタートまで要素が描画されることを防いでいた。

でも、本質じゃないなーと思ったので
JSを下において、代わりにローディング中画面を作ることに。

ちなみに、
正規の画面になる前に一瞬だけ画面が表示されてしまうことを
FOUC現象、といいます。

自分のサイトでは、背景は水色なんだけれど、
アニメーションのスタート時に白色に切り替えるから、
アニメーション実行前にレンダリングされると
一瞬背景が水色に点滅するような印象になってしまう。
これは良くない。

ローディング画面

といっても話は簡単で、以下の要素を追加するだけ。

<div id="loadingWrap">...loading</div>
#loadingWrap {
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  position: fixed;
  background: #ffffff;
  padding-top: 20%;
  padding-left: 45%;
}

documentロードが終わったタイミングで消せばいい。

$(".notanime").hide();

 
自分の場合は、FOUC現象を絶対に避けたいので、
消す前に背景色を白にする関数とかを呼び出しています。
非同期実行だけど、そんなに重い処理ではないので大丈夫かなと。

$(".notanime").hide();
$("body").css("background-color", "#ffffff");
$("#loadingWrap").remove();

結果は・・・?

■改修前
f:id:sekaiya:20131017204945j:plain

■改修後
f:id:sekaiya:20131017211730j:plain
start render の値が明らかに早くなってる。


自分のサイトみたいに
「リソースが全部落ちてきてから表示したい」というのは
逐次描画が出来ないから困る。
それに、Web計測が難しい。。


でも、アニメに関係ないjsや画像は
明示的に遅らせてローディングするともっと早くなりそう。

 
あと、DNSルックアップでも意外と時間を取っている。
このあたりも改善できそう。
f:id:sekaiya:20131017211953j:plain