display:none でページが軽くなるわけではありません

PC(パソコン)とSP(スマートフォン)とで、一部レイアウト及びデザインをUXのために変更しよう、と思った時, デバイスによって不要となる方を display: none; で非表示にする、というのはよく使われる手法です。

ところがですね、これについて勘違いをされている方が非常に多かったりするんです。
display: none; で非表示にすればページの読み込みが速くなります
みたいな。それは 誤解・勘違い です (´・ω・｀)

見えないからといって読み込みが行われないわけではない

displayプロパティのnoneという値は、存在する要素を視覚的に見えないようにする というだけですので、ローディングされないわけではないんです。ですから決して負荷が軽減するということではない。例えば大量に高画質画像を貼り付けて、それらを全てdisplay: none; に指定しても、フツーに表示するのと同じだけの負荷がかかっていますのでスクロールがなかなか始められなかったり、例えばGoogle Chromeなどの拡張機能に「ダブルクリックでタブを閉じる」といったようなものがありますが、ローディング中だと閉じられません(笑)
そういうサイト、みなさん出くわしたことありませんか (´・ω・｀)
ファーストビューだけやたら速いのにスクロールができない… みたいなの。でもまぁ、ファーストビューの確保が出来ているのは良いことだと思いますけれど。
これは display: none; とは関係なかった

display: none; はSEO的に悪？

これは場合によると思います。最近のGoogle botはとってもかしこですので、色んなことを見破ります。見破るっていうか…(笑)
例えばその display: none; が UXのためのものなのかそれとも単なる 意義のよくわからない隠し要素であるのかこれらは看破されると思った方が良いですね。

具体例で行くと、FC2ブログのトップページが全文表示タイプだとします。通常は「続きを読む」「Read more」とされるリンクから個別記事(パーマリンク)へ遷移することになります。が、一部テンプレートでは個別ページに飛ばずともその場で 折りたたみ展開 をすることで、現在ページに滞在したまま読めるようになっているものもあります。私のテンプレートにもあります(GirlOnWire など)
で、botはそれが「展開されるものである」ということはちゃんと理解してくれます。つまり UXのための非表示であろう と解釈してくれる。しかしそれが展開しないもの、単純に非表示になっているだけで展開させるためのボタンやJSが含まれていない場合。これは文章内容の「隠しテキスト」、リンクが含まれていれば「隠しリンク」、あるいはbotへ渡す情報と実際に閲覧者が目にする内容がかけ離れている「クローキング」と判断されることもあるかと思います。

クローキングという判定はもう絶対避けなければいけないですね。例えSEO操作目的でないとしても、それはGoogle様の腹一つです。

display: none; の使い所を間違ってはいけないよ、というのもありますが、話しを戻して 展開型追記 のテンプレートの場合。追記を個別記事へ移動して読んでもらうタイプよりもローディング負荷は高くなります。初期の見た目がすっきりしているからといって、内容が存在していることに変わりはありません。この点はよくよくご理解頂いてから使用を検討された方が良いと思います。

また、よく見かけるのですが、「○○ブログはコメントを折りたたむようにした。それはページを軽くするためだ。」これはですね、そのコメント欄が ajaxを利用した非同期通信 を行うものであれば正解です。ただ単に折りたたみ展開型になっているだけならば不正解。寧ろそれ用のCSSなりJSなりを組んでる分若干重くなってるんじゃないか(笑)
不正解の場合たぶんそれは「SPの時のスクロール量を減らす努力」かもしれませんね。負荷軽減目的ではなく。それはそれで大切。だから無意味ではないと思いますよ。それこそまさしくUXです。

まとめ

というわけで display: none; はページを軽くするために使えるわけではない、というお話しでした。