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

開発ノウハウ
SPONSORED LINK

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

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

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

SPONSORED LINK

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

まずはこのサイトがどんな感じになっているかを紹介してみる。
PCでトップページを表示するとこんな感じになる。
ScreenSnapz118
この状態でブラウザの横幅を狭めていくと、、、
ScreenSnapz1181-1
サイドバーが消える。簡単に言えばこれがiPhoneなどのスマホでアクセスした画面になる。
IMG_0931
これが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;」で非表示にした。この「非表示」というのは本当に表示されないだけなんですね。なので画面に表示されなくても読み込みは行われる。

これが罠でした、、、

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

まとめ

レスポンシブWebデザインは一つのデザインを使い回せるという意味で便利だが、以下のような流れで考えて作らないとユーザービリティを著しく低下させてしまうのかなぁと。

  • 端末毎に表示/非表示とするコンテンツをまずはまとめる
  • 各コンテンツのロード時間は?テキストなら軽いが画像・外部サービスは重い
  • 特に外部サービスは本当に必要なのか、全端末で表示する必要があるのかを判断
  • いる場合、なるべく全端末で表示される領域に配置(読み込みに時間がかかるにしても、見えないものの読み込みに時間がかかるよりはマシかなと)
  • いらない場合、非表示とする端末では読み込みすら行わない方がよい。User-Agentとかで判断して読み込み処理すらスキップさせる

とりあえず当サイトではこんな感じで対処してみた。
スマホでしか見てないって方も、読み込みがだいぶマシになったんじゃ無いかと思う(他にもご要望があれば遠慮無く教えてください)。

PHPの開発ノウハウ

【PHP】PHPで非同期処理を実現する方法のサンプルコード

2011年8月4日

【PHP】PHPでSOAP通信を行う方法のサンプルコード

2011年8月5日

【PHPサンプルコード】Zipファイルを作成し、ブラウザからダウンロードさせる方法

2012年7月5日

WordPressについて

ブロガーにお勧め!WordPressテーマ「アルバトロス」の魅力を語ります(スマホ対策も万全)

2015年7月29日

WordPressテーマ「ハミングバード」の作者矢野ヨシキさんのデザイン!2016年リニューアルについて

2016年3月24日

MacでWordPressを動かす方法。WordPressの開発環境構築方法・手順を初心者向けに解説します

2012年6月10日

【WordPress】子テーマを作成・設定する方法。使うメリットはメンテナンス性の向上です

2012年7月3日

【WordPress】メニュー表示をApple風にするCSSサンプルコード

2012年6月18日

あわせて読みたい

SPONSORED LINK