見出し画像

Yahoo!ショッピングで実践!アプリでも表示速度カイゼン ~ vol1 〜

こんにちは!
Yahoo!ショッピングのひらやま(@rhirayamaaan)です!

以前、Yahoo!ショッピングの速度改善の記事を書いたのですが、みなさん読んでいただけたでしょうか?

多くの方にスキをつけていただいたり、Twitter でツイートしていただいたりと、多くの反響があって大変うれしいです!

ただ、この前の記事はウェブでどのように対応したらよいかのお話でした。

しかしわれわれは、アプリでもYahoo!ショッピングを快適にすごしていただきたいです!

アプリでも「表示が遅くてイライラしたなぁ!」と思ってほしくないのです!

スピード・イズ・ゴッド。スピード・イズ・ジャスティス。

こちらの記事で書かれているこの言葉を忘れずに、アプリでも速度をカイゼンしていきます!

その一例を、今日はお話したいと思います。

みなさんがYahoo!ショッピングを使うときの一般的な流れは、

1. 探したい商品のキーワードで検索する

2. 検索結果から商品を決める

3. 商品詳細ページでその商品を吟味する

だと思います。

2 から 3 に移動するときに、商品詳細ページの情報を新たに取得しないといけないわけですが、
われわれは、検索結果ページで、商品詳細ページの一部の情報を取得できてしまっていることに気づいてしまったのです!

検索結果ページで、

・商品画像
・商品名
・ポイント
・評価
・ストア名

の情報はすでに取得できているので、このデータを使って作れる範囲で商品詳細ページを作ってしまおうと考えたわけです。

つまり、検索結果ページのデータを、次のページである商品詳細のプリロードとして使っているというわけです!

検索結果ページのデータで商品詳細ページを作れるだけ作って、後から非同期で残りの商品詳細ページの情報を取得しに行くように作っています。

このようにすると、ページ上部の表示速度を上げることができるので、ユーザー体験が飛躍的に向上できました。

この対応は iOS アプリで実装済みなので、iPhone をお持ちの方は、ぜひその速さを実感してみてください!
※ iOS でも一部端末は対応されていない場合があります。ご了承ください。

iOS アプリも Android アプリも引き続き速度のカイゼンをしていく予定ですので、その際はまたこちらでお話できればと思っております。

今後ともYahoo!ショッピングをよろしくお願いいたします!