リテイラー（小売り業者）のためのパフォーマンスガイド
目的：オンラインショップの場合は、表示スピードは売上げに直結する重要な要素です。そこで、４つの改善ポイントをまとめみました。
Tammy Everts 2017年9月28日
リテイラーを成功に導く前提条件は「顧客を幸せにすること」です。
オンラインショップにおいて、高速表示というエクスペリエンスを提供すれば、コンバージョン、収入、ブランド認知・維持など、リテイラーにとって関心あるすべての指標を向上できることが証明されています。（この分野では多くの研究があります。私は自分の本「Time is money」でまとめました。またWPO Statsには、多くの研究レポートがあります）
優れたオンラインショップの体験を提供する2つの質問をします。
- 自社ページを遅く見せているものは何か？
- それに対して、何ができますか？
何が私のページを遅く見せているか？
遅くしている原因のほとんどは、ページ上にあります。小売サイトにおいてパフォーマンス課題の概要と、課題を追跡し修正する方法を説明しましょう。私は、過去数年間に数百件のオンラインショップのページを分析しました。その経験からパフォーマンス課題のほとんどは、4つが原因です。
- トラッカーやアナリティクスなどのサードパーティ（計測タグ）
- スタイルシート（CSS)
- カスタムフォント（Webフォント）
- ページサイズ、特にイメージサイズ
1.サードパーティタグ
最近の典型的なオンラインショップのページには、トラッカーやアナリティクスのビーコンなどの75以上のサードパーティタブが含まれている場合があります。サードパーティタグは、ビーコンをターゲットにしてコンバージョンを増やし、アナリティクスタグではユーザー行動をさらに理解できるようにしました。そのため、サードパーティタグが無くなることはありません。しかし、ページのレンダリングには間違いなく影響し、遅延を発生させます。
できること：サードパーティタグを監視する
サードパーティタグが原因となるパフォーマンスへの影響を把握することから始めましょう。ただし、測定しないものを修正することはできません。SpeedCurveでは、サードパーティタグのウォーターフォールチャートを作成し、これによりパフォーマンス影響をひと目で確認できます。
参考記事
・Case study > Marks & Spencer revolutionized performance by focusing on third party content （英語）
・Live demo account > SpeedCurve Third Party Dashboard （リンク？）
2.スタイルシート
スタイルシート（CSS)は、最新のウェブページには大きな恩恵をもたらしています。スタイルシートはブラウザの互換性、設計のメンテナンスや更新まで、膨大な設計上の問題を解決します。スタイルシートがなければ、レスポンシブweb デザインのような発明はありませんでした。しかし、不適切に実行されたスタイルシートは、パフォーマンスの問題を引き起こす可能性があります。たとえばダウンロードや解析に時間がかかりすぎるスタイルシートや、ページ後半がレンダリングされない不適切に配置されたスタイルシートなどです。
できること： どのスタイルシートがレンダリングをブロックしているか？
繰り返しますが、測定しないものは修正できません。そのため、ページにCSSやJavaScriptなどの重大なブロックリソース問題があるかどうかを簡単に見つけられるようにしました。下のチャートは、サイトダッシュボードで利用でき、問題をすばやく見つけることができます。
参考記事
Read > Measuring blocking resources
Live demo account > SpeedCurve Site Dashboard
3.カスタムフォント（Webフォント）
カスタムフォントを使えば、デザイナーはデザイン書体をうまく制御できます。このフォントを使いたい気持ちは、カスタムフォントの人気の高まりを表れです。2010年には、1000以上のウェブサイトのうちカスタムフォントの使用はわずか1％でしたが、今日は65％に増加しました。
しかし、この人気はパフォーマンスバジェットに影響しています。いくつかのフォントは膨大なCSSコードを必要としますが、他のフォントは重いJavaScriptを持っているか、または外部でホストされています。これらはページレンダリングを極端に遅くしている可能性があります。
あなたができること：フォントのレンダリングの速さを追跡する
SpeedCurveのHero Rendering Timesは、ページ上の最も重要なコンテンツがブラウザでのレンダリング終了時間を表す指標です。H1 Renderはこれらの指標の1つです。これは、最初のH1要素がレンダリングを終了したときを測定します。サイトがカスタムフォントを使用している場合、カスタムフォントは、H1にコピーされている可能性が高く、この指標はカスタムフォントのレンダリングスピードを測定する最適な方法です。
↑小さいのに時間がかかっている
Read > Hero Rendering Times: New metrics for measuring UX
Case study > NerdWallet used the H1 Render metric to help improve font loading by up to 30%
Live demo account > SpeedCurve Site Dashboard
4.画像とページサイズ
私は何年も前から「ページの肥大化」についてレポートしてきました。ページサイズは必ずしもUXの良し悪しと関係はありませんが、ほとんどは影響します。巨大で最適化されていない画像が常習犯です。中には、最大5MBのヒーローイメージを含むページを発見しました。これは重たすぎます。
あなたができること：パフォーマンスバジェット（予算）を作成する
パフォーマンスバジェットは、ページの肥大を管理する上で最適な方法です。パフォーマンスバジェットは、チームの人々（マーケティング、デザイナー、デベロッパー）が、ユーザーエクスペリエンスに対する原則とウェブサイトのスピードに合意することから始まります。
JavaScriptの合計サイズ、イメージ画像数、ページレンダリングの開始タイミングなど、各指標のバジェット（予算）を定義します。予算を定義すると、SpeedCurveは監視を開始し、目標予算を超過した時に警告のアラートを通知します。
参考記事
Read > Performance budgets in action
Case study > How Zillow became bigger, faster, and more engaging while on a budget
Live demo account > SpeedCurve Site Dashboard
あなたができること（パート2）：ヒーローイメージのスピードを追跡する
SpeedCurveでは、ヒーローイメージのレンダリングの速さもひと目でわかるようにしました。たとえば、Largest Image Render指標は、表示領域内で最大のイメージがレンダリングを終了した時間を表します。この指標は、トップページ、商品詳細ページ、キャンペーンのランディングページ（LP)などのヒーローイメージが重要な小売サイトに関係します。
参考記事
Read > Hero Rendering Times: New metrics for measuring UX
Live demo account > SpeedCurve Site Dashboard
始めましょう
オンラインショップのユーザーに、速く快適な体験を提供することが、今ほど大切だったことはありません。SpeedCurveユーザーであれば、多くの方法を駆使して、自社のサイトをより速くさせることができます。
