議論されるレスポンシブWebデザインの読込速度

最近いただく相談の中で、「レスポンシブWebデザインで構成されたサイトの読込は遅いのか？」ということをいただきます。

確かにレスポンシブWebデザインはブラウザの横幅やデバイス等に対応するため、それに伴うサイト制作をしなければなりません。またソースの記述も多くなります。そのことが影響することは確かに否めません。

しかしながら、サイト制作・・・特にECサイト制作では特に気にしなければならないことがあります。

以前、『1秒の遅れでCVRが7%ダウン！読込速度の改善で快適なWebサイト構築を』でも取り上げましたが、サイト制作は表示速度に考慮しながら構築しなければなりません。

「遅い」とされるの要因の1つに、「リクエスト数」があります。

例えば表示しているページの画像点数です。よく画像容量の大きさは目が届きますが、この画像点数等は見落とされがちです。結果、非常に多くの画像を使うことでリクエスト数が上がりサイトの表示速度を遅くしてしまうことになるのです。

※Chromeのデベロッパーズツールで以下のように確認できます

リクエスト数削減のテクニック「CSS Sprite」

HTTPリクエスト数を削減するテクニックの1つに「CSS Sprite」というものがあります。これは、アイコンやナビゲーションなどのいくつかの画像を1つにまとめ、全体のリクエスト数を削減するというものです。

実際にサイトの読込検証なども実施されていますので、記述方法などの詳細は下記サイトを参考ください。

参考：身につけておきたいWebサイト高速化テクニック #6｜HTTPリクエスト数削減テクニック02：CSS Sprite編

ついついサイトやページの見栄えを良くしようと凝ったデザインや画像を多用してしまいがちです。確かに見た目には華やかで制作者側の満足は満たされるでしょう。

しかしながら、特にECサイトでは本来の目的はなんなのでしょうか？そう、売上を上げるのが目的です。サイトの見栄えに力を入れ過ぎた挙句、表示速度が遅くなり、購入者にフラストレーションを与えた結果、売上が下がる。これでは本末転倒です。

レスポンシブWebデザインが遅いという前に、もう一度そのような視点でサイトやページを見直していくべきではないでしょうか。

昆