レスポンシブWebデザインで表示が遅い時の確認ポイントは、非表示領域の実装でした

このサイトをリニューアルして数ヶ月経つが、リニューアル後からレスポンシブWebデザインに対応している。レスポンシブWEBデザインというのは、ざっくり言えば、

従来PC用/モバイル用とWEBページを分けるのが主流だったが、一つのWEBページをスクリーンの幅に合わせてデザインを柔軟に切り分けるというもの。技術的にはCSS（スタイルシート）を使用する。

といった感じだと思う（デザインは専門外なので多少の誤りはご勘弁を）。で、このレスポンシブWEBデザインにしてから悩みがあった。それはスマホとかで見るとサイトがやたらと重いこと。この原因が最近ようやく分かって、対策出来たのでご紹介。

この記事の掲載内容は、2020年12月24日時点の情報です。現在の情報とは異なる場合がございますので、あらかじめご了承ください。

本ページはアフィリエイトプログラムによる収益を得ています。

当サイトのデバイス別表示

まずはこのサイトがどんな感じになっているかを紹介してみる。
PCでトップページを表示するとこんな感じになる。

この状態でブラウザの横幅を狭めていくと、、、

サイドバーが消える。簡単に言えばこれがiPhoneなどのスマホでアクセスした画面になる。

これがiPhoneで表示した画面。正確にはApple風メニューも消えるのだが、これはまた別の方法で切り替えている（この辺は後日紹介しようかと）

当サイトでの問題点とその原因

PCで見てもらえば分かるのだが、サイドバーにはAdsence広告、カテゴリーなどと合わせて、はてブ人気エントリー・ zenbackなどの外部サービスを呼び出していた。これが問題だった。スマホ版のCSSはこんな感じで定義していて、

@media screen and (max-width : 620px) {
    #page {
        padding: 0 5px 20px;
    }
    #main {
        width: 100%;
    }
    #content {
        width: 100%;
    }
    #page .widget-area {
        display: none;
    }
}

「#page .widget-area」って部分がサイドバーに該当していて、「display:none;」で非表示にした。この「非表示」というのは本当に表示されないだけなんですね。なので画面に表示されなくても読み込みは行われる。

これが罠でした、、、

表示される事のないコンテンツ、しかも時間のかかる外部サービスが回線スピードの遅いスマホでアクセスしても読み込まれるのでやたらと重く感じたわけだ。外部サービスは大抵ページが表示されてから読みに行くので、画面が表示されたのに、なんかまた通信が発生して重いみたいな状況になっていた。