display:none にすると読み込み時間は減るのか?テストしてみた結果…

はるかす
こんにちは、はるかす(@mametyralove)です。

レスポンシブデザインには欠かせないdisplay:none。正直多用したいのですが、要素を増やしすぎて読み込みが遅くなることはできるだけ避けたいものです。

「display:none 表示速度」で検索してみると、display:noneにしても見えなくなるだけで読み込み時間は変わらないと書いてありました。

しかし、僕はネットの情報は鵜呑みにしないようにしています。テストしてみることが大切であると考え、実際にツールを使って試してみました。

 

今回試すのはこのWebサイト。僕が現在製作中のWEBアプリです。特に気にしないでください。

今回はヘッダーとメインコンテンツの場所をdisplay:noneにしてやります。

と、その前に現在の読み込み速度を測ってみます。Googleが提供しているこちらのサイトで検証してみます。

こんな感じ。5秒か…少し遅いような気がしますが趣旨と違うので飛ばしましょう。ちなみに何度かテストしても検証結果が変わらなかったので正確であると考えています。

 

そしてdisplay:noneを施したサイトの外観はこんな感じ。

画像データがほとんど消えたので多少は表示速度が速くなりそうな気がしています。ただ、読み込むんだったら変わらないですがね。

テスト結果はこんな感じ。

え…? 2秒も普通速くなるか?

正直驚いています。画像データが多大な影響を及ぼしているのかわかりませんが、確かにdisplay:noneを施すだけで読み込み速度は上がりました

 

それでも2秒って何があったんだろう。とりあえずdisplay:noneにすると読み込まれないだろうという予想はつきましたが流石に速くなりすぎじゃないか?

何か知っていることがあれば教えていただきたいです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です