Web表示スピード研究会

【事例・キユーピー株式会社】マヨネーズキッチン

高速化で表示時間も滞在時間も40%アップ

キユーピー株式会社 藤木功二様
キユーピー

キユーピー株式会社 広報部
Webコミュニケーションチーム 課長 藤木功二様

増え続ける主婦層を見据えてレスポンシブWebデザインにしたところ問題が

「キユーピーでは、WEBサイトの目的を、お客さまが興味を抱く情報(健康志向やレシピなど)をお届けすることで、最終的に商品にたどり着いていただけることとし、より多くの接触機会が得られるように食の旬やイベント事の食卓を考えて運用を行っています」(広報部 藤木氏)

同社の分析では、2012年は主婦層のスマホへの変更意向は依然として低かったといいます。しかし、今後の時代の流れとともに「モバイルは確実に増加する」と判断が下され、2013年の春に開設したマヨネーズ情報サイトでは、モバイル対応も考慮したレスポンシブWEBデザインで構築が行われました。レスポンシブWEBデザイン(RWD)は、PCでもスマホでもタブレットでも、同質の情報を管理掲載できる新しい手法です。

レスポンシブWebデザインのネガを消し高速表示させる

レスポンシブWEBデザインとは、デバイスに依存せず、どのスクリーンでも1つのURLを維持できるWEB構築の方法のひとつで、米Googleでもこの構築方法を推奨しています。

しかし、レスポンシブWEBデザインの優れた特性の一方で、遅い回線域では、表示に時間がかかるという問題がありました。もちろん速い回線域では問題はありませんが、全国レベルでいうと、まだまだ遅い回線域が主流です。1Mbps(3G回線)という遅い領域では、表示のために30秒以上かかる場合もありました。

そこで、「モビファイスピード」を導入し、サイト自体のファイル容量を40%ほど軽量化し、そのために表示時間は以前と比べて半分近くも短縮されました。

「モビファイ」はクラウドで実現するマルチデバイス対応の変換ツールであり、Googleのマルチスクリーンベンダーとして認定されています。

表示崩れも完全に解消され、滞在時間も40%ほど増加

「また、回線速度の遅さによって、時々引き起こされていたメニュー部分の表示崩れ、つまり動作不具合が解消されたとみています」

これは、遅い回線帯域において、メニューのスクリプトが正しく読み込まれず、動作が不安定になっていましたが、ページ全体の軽量化により、スクリプトの読み込みタイミングも正常に行われるようになっためです。

「さらにユーザー一人当たりのサイト滞在時間も、導入以前と比べて、導入後は約40%ほど延びています。滞在時間の拡大は非常に満足できるものです」これらは、お客様がページを閲覧にストレスを感じなくなったためだと判断しており、「UX(ユーザーエクスペリエンス)が向上した結果だろう」と、藤木さんは判断されています。

高速化はまだまだ追求することが可能です。現時点では、4段階のうちのひとつの「画像の最適化」を行っているだけです。残る3つの高速化の機能「Javascriptの削減」「スタイルシートの軽量化」「HTMLの軽量化」などを実行してみることができます。このアプローチでさらなる高速化を図り、アクセス数、滞在時間、コンバージョンアップなど、よりお客様の満足度を考えているとのことです。


■実例紹介
キユーピー 株式会社様 『マヨネーズキッチン』

キユーピー マヨネーズキッチン

URL : http://www.kewpie.co.jp/mayokitchen/
※PCと同一URLでリンクしますので、スマートフォンでご覧ください。

PSI、表示スピード、コアウエブバイタル INPの各対策については