Webサイト(人気サイトや画像が沢山あるページなど)を開き、画面をスクロールさせて行くと、一部の画像が | | | | | | | | って感じにタテ伸びした感じで表示される現象、

正常な画像
▲こんな風に表示される画像が

段々に表示されたり
▲だんだんというか、ガタガタに表示されたり

||||||||って画像。
▲| | | | | | | | って感じにタテ伸ばしに表示されたり。

こういう現象が発生する条件が分かったのでメモ。

管理しているレンタルサーバーの設定を変更して遊んでる時に気が付きました。

原因:サーバーが応答していない

サーバーにブラウザが接続要求を出しても、その応答が帰ってこない間は上記の様に表示途中の画像が乱れるようです。

もう少し詳しく書くと、ページのHTMLファイルは受信出来たけど、そのページに含まれる「画像やブログパーツ、JavaScriptなど」の、「どれか一つ」が「応答も無くまったく受信できない状態」の時に、この現象は発生するようです。

解決方法(サイト管理者の場合)

多くの場合が、応答の鈍いブログパーツや、外部APIを利用したツール類が原因になっていると思います。
なので、Webサイトやブログを運営していて上記現象に悩まされている人は、それらを外すだけで改善する場合がほとんどでしょう。

画像の表示が原因と思われる場合は、画像様に別サーバーを利用する必要があるか、1ページに表示する画像の数を減らす必要があります。

大手ブログサービスを利用している場合は、サーバー全体で接続が不安定な時もありますよね。そういう場合は暫く待つしか方法はありません。

 

解決方法(閲覧者の場合)

ブラウザの設定で「同時接続数」に大きな数値を設定していると、この現象が発生しやすくなります。同時接続数は2~5程度で十分です。

また人気サイトや画像・ブログパーツ類がてんこ盛りのページでは、この現象は非常に発生しやすいので、ある程度画面の読み込みが終わるまではスクロールしないようにしましょう。

あとがき

自前のサーバーで遊んでて、「サーバーの応答は1秒に1回まで」とかの設定を行って表示テストをしている時に発見。
他にも原因はあるかもしれませんが、とりあえず今回発見したのは上記一個のみ。他の原因をご存知の方がいらしたら、コメント欄やTwitterで反応頂けると嬉しいです。