レスポンシブWebデザインとPCサイトの表示速度差

質問

レスポンシブWebデザイン（以後、RWD）のデメリットとして、１ソースで制作しているのでスマホサイトの表示が遅めである、ということがよく言われますが、
これは、従来のPCサイトをスマホで読み込む場合はPCサイトのデータ"だけ"を読み込むのに対し、RWD仕様のサイトをスマホで読み込む場合は、PCサイトだけでなく、スマホサイト用のデータも読み込むからなんでしょうか？

PCサイトだけしかないサイトがあるのですが、これをRWD化するか検討していますが、
RWDは表示が遅くなるのでやめるべきかと考えていましたが、よく考えると、PCサイトだけのサイトをスマホで表示させるのと、RWDされたサイトをスマホで表示させのとで、差がないのであれば、「表示速度後退」にはならず、「現状と同じレベル」となるので、こう考えれば１ソースマルチデバイスの利点の方が大きいと考えられるかなと思いました。

宜しくお願い申し上げます。

回答No.3

神崎 渉瑠（@taloo） · ベストアンサー

ふと思いついた方法ですが、
pictureタグのエミュレートとして、HTMLの<img src="">の部分だけをブラウザ振り分けを行い、
それ以外（CSSファイル）はRWDよろしく、共通ファイルを使用するというのであれば、比較的簡単にできるかもしれません。

HTMLタグの出力を切り替えると処理が大変（HTMLファイルではなくCGI系の出力が必須）なので、
画像ファイル（拡張子.jpg、.png、.gifなど）にアクセスしてきた場合、
「ユーザーエージェントがスマホなら、専用ディレクトリに保存した同名の小さなファイルにリダイレクトする」事で分岐できそうです。

お礼

アイデアまでありがとうございました！
imgソースだけを分岐するのですか。
WordPressでCMSして、かつRWDにしたいのですが、投稿やページからコンテンツをド素人がアップすることになるのですが、できるかな。ド素人がアップしても勝手にそうなる、ということが必要なので、少なくとも画像を投稿する場合、自動的にWPの方で」スマホなどの小サイズ用に自動でリサイズされてサーバにアップロードされなければなりません。できるなら最高です。

何がともあれありがとうございました。

回答No.2

神崎 渉瑠（@taloo）

>RWD仕様のサイトをスマホで読み込む場合は、PCサイトだけでなく、スマホサイト用のデータも読み込むからなんでしょうか？

言ってる事は同じですが、考え方が逆ですね。
スマートフォンでPCサイト用のデータを読み込むから遅くなります。
もちろんCSSファイルが大きくなるぶんだけ処理に時間がかかるでしょうけど、体感できる物ではないと思います。

RWDサイトがスマートフォンで遅い主な原因は、画像サイズにあります。
PCサイトではアイキャッチ、スライドショーなどで幅1000px程度の画像もよく使われますが、
画面幅320pxしかないのにそんな大きな画像をダウンロードしても無駄です。
しかも、スマホは3G～LTEという、PCに比べて圧倒的に細い回線を使いますから、データサイズの影響は顕著に現れます。

<img style="width:320px">とするのであれば幅320pxの画像を用意する方が良いですが、
これはCSSで解決できる問題ではありません。
（JavaScriptを使う方法もまれに使われるようです。
また、<picture>というHTMLタグが検討中です。 http://www.w3.org/TR/html-picture-element/ ）

ですから、速度を優先するのであれば、RWDではなくスマホ専用サイト（ページ）を作って、画像もスマホ用に小さなファイルを用意するのがベストな方法です。

それをふまえて、
>PCサイトだけしかないサイトがあるのですが、これをRWD化するか検討していますが、
>（略）
>こう考えれば１ソースマルチデバイスの利点の方が大きいと考えられるかなと思いました。

PC用デザインを見せるくらいなら、RWDにする制作コストと訪問者のメリットのバランスが取れていると思います。

>No.1お礼
>ならば逆にRWDを極めたら強いですかね？？　存在価値高くなるでしょうか？

制作者の場合は、、、、、料金次第？

回答No.1

poyopoyo111

レスポンシブウェッブデザインでは、１つのソースでＰＣとスマホの両方を実現します。両方を実現するためにCSSが大きくなることがあり、そのために「スマホのみのページと比較して遅くなる」と言われています。

しかし、実際にはCSSデータはスマホにキャッシュされるため体感速度としては、スマホ専用ページと比較してあまり差はありません。

Googleなどの検索エンジンサービス会社は、閲覧者が他の人へURLを知らせるなどの利便性から、１ソースでマルチデバイス対応することを推奨しています。このためレスポンシブウェッブデザイン化するのは正しい方向性です。

ただし、HTMLの１箇所を修正すると、複数のデバイスで正常に表示されているか検証しなければならず、運用の手間が増加することも否めません。

ただ、いまはスマホとPCの両方をブラウザのブックマークで共有したりする時代になっていたり、SNSで「いいね！」して、友達が様々なデバイスで同じＵＲＬを参照することになっているため、レスポンシブウェッブデザイン化は自然な流れかとおもいます。

ただし、CSSに関する知識が深くないとうまく制作することかできず、上級のウェッブデザイナーでなければ、うまく制作することがでないのが現状です。このため、ウェッブデザイナー泣かせであるため、批判艇なブログが結構あります。

しかしながら、世の中の流れはレスポンシブウェッブデザインに向かっています。

お礼

> ただし、CSSに関する知識が深くないとうまく制作することかできず、上級のウェッブデザイナーでなければ、うまく制作することがでないのが現状です。

その通りなんですよね・・・
再質問して済みませんが、ならば逆にRWDを極めたら強いですかね？？　存在価値高くなるでしょうか？