レスポンシブ Web サイト開発のチュートリアルでは、display:noneCSS プロパティを使用してモバイル ブラウザーでのコンテンツの読み込みを非表示にし、Web サイトの読み込みを高速化することが推奨されています。これは本当ですか?display:noneモバイル ブラウザーでは画像が読み込まれないのでしょうか、それともコンテンツが読み込まれるのでしょうか? モバイル ブラウザーで不要なコンテンツが読み込まれないようにする方法はありますか?
ベストアンサー1
ブラウザはますます賢くなってきています。現在、ブラウザは（バージョンによって異なりますが）画像が役に立たないと判断された場合、画像の読み込みをスキップすることがあります。
画像にはdisplay:noneスタイルがありますが、そのサイズはスクリプトによって読み取られる可能性があります。親が非表示の場合、Chrome v68.0 では画像が読み込まれません。
こちらから確認できます:http://jsfiddle.net/tnk3j08s/
ブラウザの開発者ツールの「ネットワーク」タブを見て確認することもできます。
ブラウザが小規模な CPU コンピュータ上にある場合、イメージをレンダリングする (およびページをレイアウトする) 必要がないため、レンダリング操作全体が高速化されますが、これが今日実際に意味のあることかどうかは疑問です。
画像が読み込まれないようにしたい場合は、ドキュメントに IMG 要素を追加しない (または IMGsrc属性を"data:"またはに設定する"about:blank") だけです。
画像が最初の画面にあり、遅延ロードされていない場合、「display: none」は機能しません。画像はロードされますが表示されません。