画面が白いまま表示されない問題とサイト高速化 

このサイトの初回表示時に、5秒くらい画面が真っ白で、何も表示されない状態が続く問題が、ず~っと起こっていました。
何故か、表示が異常に遅いときがありました。

1回表示すると、次からは普通に表示されますが、30分くらい置いて表示すると、
真っ白問題が再発。

謎な現象でしたが、たぶん解決。


ブラウザのキャッシュを削除して表示しても、普通に表示されるのでキャッシュの問題でもなく。

ほんとに30分かどうかは謎ですが、30分って時間がGoogle Analyticsのセッションをカウントする時間なので、Google Analyticsを外してみたり。
DNSのキャッシュが保持されている時間が、意外に短いらしいので、IPアドレス変換に時間がかかってるのかと疑ってみたり。


このサイトは、シンプルながら、遊びで実は結構いろいろなコンポーネントを組み込んでいます。その辺が問題なのかとも思い、1つずつ機能を外してみました。

結局のところ、とあるJavaScriptが原因でした。
プログラムソースコードを、行番号付きで表示するっていうSyntaxHighlighterの読み込みに、異常に時間がかかることがあるらしい。

実のところ、なんで時間がかかるのかは、よく分かっていないんだけれども
SyntaxHighlighterを読み込む位置を、HTMLの下に移動して、通常画面を表示した後にロードするように変更。

これで、読み込みは発生しているけれども、見た目は表示されているはず。




問題を調べている間に、単純にサイトが重いからだろうと思っていた時期もあり
サイトを軽くする方法を、何個かついでに実装しています。

WEBで検索すると結構ヒットする、14のルールっていうのがおもしろい。
元ネタは本で出版されています。

ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール
この中で、cssを上にまとめるのと、表示に関係のないJavaScriptを下にまとめるのが、簡単な上に効果が大きい。
また、cssとJavaScriptをgzip圧縮すると、格段に軽くなりますが、こっちはちょっと
ひと手間必要。

gzipって書いてあったので、zip圧縮すればいいのかと思ったら読み込んでくれない。
tarのtgz圧縮のことでした。
***.css.gzとか***.js.gzというファイル名になります。

また、gzipに対応していないブラウザがあるらしく、対応したブラウザの場合はgzip版を、未対応の場合には通常のcssやjsを読み込むという分岐が必要になります。
.htaccessに
  
RewriteEngine On  
RewriteBase /  
RewriteCond %{HTTP:Accept-Encoding} gzip  
RewriteCond %{REQUEST_FILENAME} "\.(css|js|html?|xml)$"  
RewriteCond %{REQUEST_FILENAME} !"\.gz$"  
RewriteCond %{REQUEST_FILENAME}.gz -s  
RewriteRule .+ %{REQUEST_URI}.gz [L]  
  
と記述すると、判別してくれるらしい。
  ↑ 噂のソースを綺麗に表示するコンポーネント。(たまにうまく表示されない)

この辺は本には載っていないけれど、
元ネタサイトは忘れてしまったけれど、検索すれば引っかかるはず。

 



 

投稿されたコメント[1] 

やっぱりね。
俺もその辺が原因ではと思っとったわ。

でも、ここアメリカでは、その真っ白な現象は、まだ見たことがありません。



コメントをお願いします 

Name:   ※必須(ニックネームでOK)
 名前を記憶
コメント:(HTMLタグは使用できません)