こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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

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

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


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

投稿日時 - 2013-09-04 11:13:02

QNo.8249027

困ってます

質問者が選んだベストアンサー

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

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

投稿日時 - 2013-09-04 22:14:57

お礼

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

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

投稿日時 - 2013-09-05 14:40:47

ANo.3

このQ&Aは役に立ちましたか?

2人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.2

>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化するか検討していますが、
>(略)
>こう考えれば1ソースマルチデバイスの利点の方が大きいと考えられるかなと思いました。

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


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

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

投稿日時 - 2013-09-04 18:08:10

ANo.1

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

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

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

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

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

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

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

投稿日時 - 2013-09-04 12:24:50

お礼

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

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

投稿日時 - 2013-09-04 13:46:28

あなたにオススメの質問