Web表示スピード研究会

【事例・アスクル株式会社】ボトルネックの課題発見で、SpeedIndexが3.0秒改善

BtoB通販でお馴染みのアスクル。そのアスクルは現在売上高3,800億円の企業に成長しており、同社のBtoC向けの通販サービスとなるのが、別ブランドの「LOHACO(ロハコ)」だ。

LOHACOでは、Webサイトのパフォーマンス改善のために、2017年よりSpeedCurve(時系列計測&改善ツール)を導入している。このツールのおかげでパフォーマンス改善は飛躍的に向上したというという。SpeedCurveは、どのように活用され、Webサイトは改善されたのか。レポートをしてみた。

LOHACOのサービスが立ち上がったのは2012年、いまから7年前のことだ。

当初は、システム領域のサイト開発・運営はベンダーに外注していたが、2015年からは、内部でテクノロジーチームが編成されるようになり、今ではほぼ内製でまかなっているという。やはり、ECを含めたITサービスにおいては、社内にエンジニア体制があることが、お客様にスピードよく価値提供できることに繋がるのだろう。4年前のサイト改善策といえば、UI/UXなどの改善やマーケティングツールの利用などがメインであったそうだが、2017年からは、パフォーマンス改善に注力するようになったという。

左から、小谷侑哉氏(EC グロースエンジニアリング・マネージャー:LOHACOの技術チームマネージャー)、李河榮氏(お客様向けフロントエンド担当)、石黒隆矢氏(ECグロースプラニング UXデザイン・マネージャー)

エンジニアチームで主体的に、始められることからやろう!

「すでにアメリカなどの理論から、サイトスピードを上げれば売上げは向上するとわかっていました。 パフォーマンス改善にようやく手を付けられるようになってきたのが2年前になります。」

当時、エンジニアチームが独自に「自分たちでやれるサイト改善はなんだろう?」というテーマで始めた取り組みの1つがパフォーマンス改善だったと小谷氏はいう。

よく言われることが、マーケティング施策とパフォーマンス改善は相矛盾することが多く、「水と油」のような関係に例えられる。同じように、マーケティング側とエンジニア側では、時には対立構造となることはたびたび聞かれてきたことだ。

しかしLOHACOでは、こうしたことはほぼなかったという。良い形での連携策がとられてきたようだ。そこには、主体的に動いた「エンジニアチームの努力」というのがあったようだ。

まず、行われたのは広告・マーケティングサービスなどのサードパーティタグのチューニングや、購入導線の見直しを行う改善作業だったという。2018年にはステージが上がり、5名による「高速化プロジェクトチーム」が結成され、本格的なパフォーマンス改善がスタートした。

「いっきにリリースするのではなく、部分的なA/Bテストを繰り返し、効果検証をしながら徐々に結果を出し、それから対応範囲を広げて、スピードアップをしたという感じです」(小谷氏)

定点観測をするために、SpeedCurveを導入を決定

パフォーマンスは環境に左右されることが多い。速いときもあれば遅い時もある。それを調べることが重要だ。例えば、PSI(page speed insight)では、通信環境を通していないので、Webの構造分析だけになっている。またLighhouseやWebpagetestでは、通信環境を通すものの、ある一定の時点での計測しか過ぎない。

「あるポイントだけの計測では、本当のことがわかりません。売れ行きが高まる昼休みだったり、夜の20-23時の状況、またメルマガやLINEなどのキャンペーン時点でのWebの状態こそ大事なのですが、それが把握できないのです」(小谷さん)

多くの他ツールは人の手を介してマニュアルで計測する。その多くは午後の時間だったりして購入が落ち着いてる静置点だ。一番大切なのは、もっとも販売のピークを迎える時点こそWebの性能固めされるというわけだ。

当初は部分的にしか使われなかったSpeedCurveだったが、2018年からは本格導入が始まり、その利用範囲が広がっていったという。現在、LOHACOのパフォーマンス評価は、SpeedIndexという指標では4.5秒前後(Google基準では4500点前後)だ。つまり5秒以内に表示ができており、Googleなどが推奨する5秒内の基本ラインをクリアしている。また、Backend 0.6秒、Start Render 1.4秒と、まずまずの数値となっている。

「いままでは第一段階なので、数値的な向上よりも、サイトを表示した際のもっさり感を減らすなど、体感的な向上を目指してきました」(小谷氏)という。これらの改善はまだ通過点に過ぎず、今後は、4秒以内、3秒以内とより高い水準を目指して改良をしていきたいという。

トップページのSpeedIndexは、4.16秒。ファイル容量、リクエストともに大きめのページだが、Backend、Start Renderともに速い。それほど大きな波形がないことも、配信状況が安定していることを表しています。

ベンチマークは日経の電子版!

「やはり通販サイトのデータは、気になるのでみていますよ。SpeedCurveでは自社サイトとデータ比較が簡単です」(李氏)

「WEBエンジニアとして目標としているのは、日経電子版さんです。あそこは憧れですね。いろんなところでWEBサイトスピードに関する評価を耳にしていますが、LOHACOもいつかは日経電子版さんに追いつきたいと思っています」(小谷氏)

SpeedCurveは「課題を可視化できる」

さて、それではSpeedCurveの魅力とはなんだろうか?

定番としてよく聞く、無料計測ツールの「PageSpeedInsight(PSI)」や「WebPageTest」だが、SpeedCurveとの違いを尋ねてみた。

「いままでのツールですと、自分から能動的に計測をしないと、その時々のコンディションはよくわらなかった。しかしSpeedCurveだと、時系列に計測できます。

またそのデータを元にした比較評価や改善ポイントが把握しやすいのです。」(小谷氏)

「時系列計測がオートマッチで行われますから、一時的なサーバーの負荷による遅延もそうですが、リリース後に流入負荷がどのように影響するのかがわかるので、助かっています。」(李氏)

「また、Coversation機能によるサポートがいいですね。困った時に本国から直接、しかもすばやく回答が来ます」(李氏)

あとで説明させていただいたが、SpeedCurveのサポートチャットは、グローバルでも有名な錚錚たるパフォーマンスコンサルタントが直接回答してくれる。これは利用者にとって大きな魅力のようだ。

(ただし英語なので、苦手な方は、ぜひ気軽に日本語のサポートも利用してください)

パフォーマンス改善したら「ネガティブなご意見」が大きく減った

SpeedCurveには、さまざまな遅延原因を提案する仕組みがある。「ここが怪しいですよ」と教えてくれるサジェスション機能だ。その1つに「サードパーティ」のコンディションを分析できるツールがある。LOHACOでもまず最初に取り組んだのが、あるマーケティングサービスの「サードバーティタグによる遅延」の改善だった。

「これはすぐにサービス提供側に相談して、タグマネージャーをチューニングしてもらいました。その結果、サイト表示スピードを40%くらい改善しました。

またトップページの対策では、サーバーサイドレンダリングからクライアントサイドレンダリングに変えて(動的から静的へ)高速化を図り、またファーストビューの表示完了に注力して改善を進めました。その結果、SpeedIndexが3.0秒(一般指標では3000)短縮することができ、現在売上げ効果を検証中です。また「お客様からのネガティブなご意見も大幅に減りました。これは大きな効果です」(小谷氏)

売上げ向上もあるが、「ネガティブなご意見を減らす」ということも、リピーターの増加やユーザーのロイヤリティを高めるためには大切な対策項目だ。

SpeedCurveによるフィルムストリップ Startrenderは現在3.2秒に。今後はさらにチュ−ニングを実施展開。

多くのECサイトでは、パフォーマンス改善が思ったように進んでいないのが大半だ。しかし、傾向として内部エンジニアチームがいる会社では、当たり前のように高速化に取り組むケースが多い。

LOHACOには、エンジニアチームが主体的に、チャレンジするというカルチャーがある。今後は、より高い目標に向けて努力していただき、日本をリードするパフォーマンスカルチャーのある企業とサービスを目指していただきたいと思う。

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