すると読み込み時間は減るのか?テストしてみた結果...ツイートシェアはてブLINEPocketはるかすこんにちは、はるかす(@mametyralove)です。レスポンシブデザインには欠かせないdisplay:none。多用したいのですが、要素を増やしすぎて読み込みが遅くなることはできるだけ避けたいものです。表示速度」で検索してみると、display:noneにしても見えなくなるだけで読み込み時間は変わらないと書いてありました。僕はネットの情報は鵜呑みにしないようにしています。テストしてみることが大切であると考え、実際にツールを使って試してみました。今回試すのはこのWebサイト。僕が現在製作中のWEBアプリです。気にしないでください。今回はヘッダーとメインコンテンツの場所をdisplay:noneにしてやります。その前に現在の読み込み速度を測ってみます。Googleが提供しているこちらのサイトで検証してみます。5秒か...少し遅いような気がしますが趣旨と違うので飛ばしましょう。ちなみに何度かテストしても検証結果が変わらなかったので正確であると考えています。display:noneを施したサイトの外観はこんな感じ。画像データがほとんど消えたので多少は表示速度が速くなりそうな気がしています。読み込むんだったら変わらないですがね。テスト結果はこんな感じ。2秒も普通速くなるか?正直驚いています。画像データが多大な影響を及ぼしているのかわかりませんが、確かにdisplay:noneを施すだけで読み込み速度は上がりました。それでも2秒って何があったんだろう。display:noneにすると読み込まれないだろうという予想はつきましたが流石に速くなりすぎじゃないか?何か知っていることがあれば教えていただきたいです。コメントをキャンセルメールアドレスが公開されることはありません。*サイトFloatで親要素を飛び出した子要素を一発で解決してくれるCSS【初心者向け】S3にモデルと関連付けてアップロードした画像をサイトから削除する方法RECOMMENDこちらの記事も人気です。趣味:プログラミング思いついたことを淡々と書き記していきます。プロフィール画像はかなり特徴的ですが、金髪でもないし、サングラスもかけてないし、マスクもしてません。友人に描いてもらったので使っています。