ウェブサイトの速度を部門横断的に修正する

ウェブサイトの速度最適化プロジェクトをより成功に導くために、他の部門と協力してできること。

Lina Hansson 氏

サイトの速度に関するよくある誤解は、サイトの速度は開発チームの責任であるというものです。実際のところ、高速サイトには複数の部門のサポートが必要です。開発者がどれほど優秀であっても、一人で問題を解決することはまず不可能です。では 同僚と協力してスピードを 固定するにはどうすればよいでしょうかこの記事では、ウェブ デベロッパーとして、サイトの速度を優先し、最適化を行いながらさまざまな部門のサポートを受けるよう説得する方法、最適化プロジェクトの成功に対する認知度を高める方法について説明します。

ビジネス ステークホルダーと協力して速度を改善

多くの企業は消費者行動の破壊的な変化の真っ只中にあります。消費者の実店舗ではなくデジタル プラットフォームで購入する消費者が増えていることから、企業は迅速な調整が必要であり、収益の減少に直面するリスクがあるということがわかります。これには、新しい組織プロセスと考え方、関係者からの強い賛同が必要です。

共通の課題

企業による組織の編成方法は、おそらく複数のレベルで変える必要があるでしょう。まず、収益の増加が見込めるスピード プロジェクトは、デベロッパーに時間をかけずに実施するのは困難です。リソースの割り当ても行う必要があります。関係者や経営幹部が優先プロジェクトであることを示せば、マーケティングやウェブ デザイナーなどの他の部門とのコラボレーションは多くの場合、スムーズになります。

この運用レベルとは別に、ステークホルダーが現在 2 つの変化があることを理解することも重要です。

つまり、デジタル プラットフォームの専門家の情報に基づいて経営幹部の意思決定を行う企業は、優位性を持つことになります。したがって、ビジネス上の意思決定が行われる会議にデベロッパーを 1 人招待し、最初からサイトとその制約を考慮し、売上増加を確保することをおすすめします。

関係者に提案書を送信する

一般に、売上の約 10% はデジタル プラットフォームで発生しますが、調査によると、実店舗での売上の 85% は、最初にデジタルの影響を受けています。主要なデバイスになりつつあるモバイルを中心に、優れたパフォーマンスを発揮するサイトを持つことは、当社のビジネス収益にとってきわめて重要です。Google は、サイトのコンバージョン増加を支援し、サイトに影響を与える決定が行われる前に技術チームの分析情報をより有効に活用できるように、サイトのコンバージョンを促進するためのスピード プロジェクトを提案します。

関係者とのミーティングの準備をする

関係者とのミーティングの前に、自社のウェブサイトと競合他社のサイトのデータ、提案している変更に対して高い費用対効果を示すデータを用意しておいてください。スピードの重要性に関するデータを収集する最適なシナリオは、会社の収益に関係している場合です。これには次のような方法があります。

  • 相対的なモバイル コンバージョン率を計算します。 分析チームと連携して、スピードの価値で説明されている分析を実施します。読み込みに時間がかかった期間（少なくとも 2 ～ 3 か月）があり、その期間を同じ長さの他の期間よりも大幅に長くしていた場合、サイトの速度の低下は通常、モバイル コンバージョンに大きく影響しています。分析により、速度が悪かった期間に企業が失った収益を計算し、速度の価値を実証できます。読み込み時間がほぼ同じレベルに留まっていると、分析が難しくなり、以下の選択肢のほうが多くの回答を得られる可能性があります。
  • 統計モデルから速度の値を推定する。Google の TestMySite を使用すると、テストを実施して、サイトの速度向上がビジネスに与える影響を計算できます。必要なのは、1 か月の平均訪問者数、コンバージョン率、平均注文額に関するデータのみで、分析チームのサポートを受けられます。
  • ベスト プラクティスの事例紹介を提供する。サイトを高速化し、その効果を実感した他社のユースケースも参考になります。 ページの読み込み時間がコンバージョン率に与える影響: 12 の事例紹介でいくつかの例を紹介しています。
  • モバイルの重要性を示す。 分析チームに依頼して、モバイルとパソコンからのトラフィックの割合に関するデータを提供する。
  • 料金について調べます。 上記の計算は、速度による収益の増加の可能性を関係者に示すためのものですが、関係者が意思決定を行うには ROI を知る必要があります。そのため、推定コストを用意しておくと、経営陣の意思決定をより迅速に行うことができます。そのためには、最初に重点を置いたスピード プロジェクトの所要時間とその後のメンテナンスにかかる時間を評価します。たとえば、先進的な思考: TUI がサイロを解消してサイトを高速化するでは、開発者は作業時間の 20% をバックログとキャンペーンから解放し、プロジェクトのスピードアップなどのサイト改善のための方法に充てることができました。

関係者とのミーティング

  • モバイルとパソコンからのトラフィック量、および過去数年間のモバイルからのトラフィックの増加を示します。これは、優れたモバイル エクスペリエンスを作成することの重要性を示しています。
  • 速度が会社の収益にどのような影響を与えるかについて調査結果を提示します。
  • スピード重視で継続的に作業する時間があれば、モバイル ビジターからの収益向上に貢献できるデベロッパーであることを関係者に伝えます。
  • 開発チームの 1 人をエグゼクティブ ミーティングに招待し、サイトに関する意思決定を行うように提案します。今ではデジタルプラットフォームで 販売しています勝者となるのは、自社のデジタル エキスパートとのコミュニケーションを開始した企業です。現代の企業では、部門間、ステークホルダーとデベロッパー間のコミュニケーション ストリームを確立する必要があります。Harvard Business Review の調査によると、6 つの IT プロジェクトのうち 1 つは費用が 200% 超過しています。その一例が Kmart です。Kmart は、2000 年に 14 億ドル規模の IT モダナイゼーション プロジェクトを開始した Walmart と Target に、競争上の地位を失っていました。コミュニケーションとメンテナンスを早期に設定することで、サイロを解消し、知識の共有が競争上の優位性になる可能性があります。

マーケティング チームのサポートを得て速度を改善

共通の課題

マーケティング チームは、情報に基づいた意思決定を行うために広告とデータを処理するためのツールを必要としていますが、ほとんどのツールはウェブサイトの処理速度を低下させ、多くの場合、レンダリングをブロックするスクリプトを使用して実装されているため、サイトにアクセスしたユーザーが画面に何かが表示されるまで待つ必要があります。マーケティング部門にはデータとツールが必要ですが、サイトの直帰率が低く、コンバージョン率を高めるには、マーケティングの費用対効果を高められるよう、サイトの速度を速くする必要があります。

バランスを取るには、スクリプトを慎重に扱う必要があります。

  • ほぼ同じものを測定する重複を避けます。
  • 使わなくなったツールを削除する。
  • 「あったらいい」ものは測定しない。ビジネスに不可欠な要素のみを測定する。

開発者はマーケティング部門が何に依存しているかを把握することが困難であり、マーケティング部門はサイトにとってどのツールが特に重いかを把握していない場合があるため、協力する必要があります。

マーケティング チームに提案書を送信する

トラッキングや広告用のツールでは、多くの場合、ユーザーがサイトにアクセスしたときにコンテンツが表示されるまでの時間をブロックしています。広告に対して料金を支払って関心を持ち、クリックしても待たなければならなくなるため、マーケティングへの投資の価値が下がります。ユーザーがイライラして立ち去る危険性があります。ある研究によると、速度指標の操作可能になるまでの時間が 0.15 秒から 0.3 秒に増加すると、コンバージョン率が約 50% から約 35% に減少することがわかっています。必要なツールとサイトのパフォーマンスのバランスを取り、マーケティングの投資収益率を高めるために、この問題の解決に協力してもらえますか？

マーケティング チームとのミーティングの準備をする

  • サイトに実装するスクリプトのリストを作成します。
  • リストをマーケティング部門に送信し、事前に内容を確認して 3 つのバケットに分類するよう依頼します。
    • ビジネス クリティカル。これらのスクリプトはそのまま残す必要があります。
    • あると良い。使用頻度を下げられる、または削除される可能性があるスクリプト。たとえば、ヒートマップや画面の録画を収集する企業もありますが、データのレビューの頻度が低く、対策やコンバージョンの増加につながらない場合があります。このような場合は、ツールを（たとえば）2 週間だけ実行し、分析用の分析情報を収集して、次の集中的なデータ収集期間になるまでスクリプトをクリーンアップすることをおすすめします。
    • 未使用または未所有。これらは削除する必要があります。
  • スクリプトを使用した場合と使用しない場合のサイトの速度を比較して、各スクリプトがサイトの処理速度をどの程度遅くしているかを確認します。 WebPageTest では、[詳細設定] の [ブロック] タブでこれを設定できます。または、Chrome DevTools でネットワーク リクエストをブロックできます。

マーケティング チームとのミーティング

  • スクリプトのリストを確認し、各スクリプトについての見解を示します。たとえば、あると良いスクリプトがサイトのパフォーマンスに悪影響を及ぼしていないか、などです。推奨事項を受け取ることで、マーケティング チームが優先順位付けを行いやすくなり、ビジネス クリティカルなことが何であるかを聞くことで、チームの視点を理解しやすくなります。
  • 次のトピックについて話し合います。
    • 収集されたデータのメリットが、サイトの速度低下による減少を上回るコンバージョン増加につながるか。データは意思決定の指針になります。
    • 市場で最速のツールを使用するプロバイダを選択しているか。マーケティング部門は、ビジネス クリティカルなツールをより高速な代替ツールに置き換えることができるかどうかを調査するために、デベロッパーの支援が必要になることがあります。
    • サイト上のスクリプトに代わるものはありますか？たとえば、ヒートマップを使用する代わりに、ユーザビリティ テストを開始すると、ユーザー行動の背後にある「理由」を知ることもできるため、多くの場合、より詳細な分析情報を得ることができます。

次のステップについて合意する

  • 今後のプロセスを決定する。マーケティングでは、新しいツールを導入する前に、ツールがスピードに及ぼす影響を確認するよう常にデベロッパーに依頼すべきでしょうか？あるいは、マーケティングはパフォーマンス バジェットを獲得し、速度の確認方法を学び、速度目標を達成している限り、使用するツールに優先順位を付けることができますか？

ウェブデザイン チームの支援でスピードアップ

ウェブのパフォーマンスに関する最大の課題の 1 つは、多くの地域で接続速度は向上しているものの、ウェブサイトの負荷が増加し、結果的に速度が低下することです。この問題を解決するために、デベロッパーはウェブ デザイナーと協力する必要があります。

共通の課題

結局のところ、収益の創出でもそれ以外の目的でも、通常は社内のすべての部門がコンバージョンにつながったサイトに依存しています。ただ、読み込みに時間がかかりすぎてユーザーが見つからなければ、ウェブページがどれほど美しいかは関係ありません。

しかし、スリムなウェブページは共有責任です。デベロッパーは、さまざまな画像最適化手法を使用して、画像の読み込みを高速化できます。ウェブ デザイナーは、ページの太さを合意したレベル以下に抑えるページを作成できます。

ウェブデザイン チームに提案書を送信する

調査によると、画像や要素が少ないページはコンバージョンが多いことがわかっています。たとえば、Google と SOASTA の調査では、ユーザーがコンバージョンに至ったセッションは、至らなかったセッションと比べて画像が 38% 少ないことがわかっています。速度目標を達成するために協力し、サイトでのコンバージョンを増やすための協力関係を作ることは可能か？たとえば、品質と速度のバランスを保ちながら適切な画像圧縮レベルを見出すことや、複雑なレイアウトや機能を削減することで、サイトの表示速度が遅くなりがちな結果を減らすことなどが、Google と共同で実現できます。

ウェブデザイン チームとのミーティングの準備

  • サイト内で読み込み時間が最も長く、ページウェイトが最も大きいページをトラッキングする。たとえば、e コマースサイトを扱っている場合は、ホームページだけでなく、キャンペーン ページ、最大規模のカテゴリページ、商品ページ、購入手続きフローもチェックしてください。
  • デザイナー向けのパフォーマンス バジェットの提案を準備します。代替策の一つとして、できる限りシンプルなページのウェイトを設定し、すべてのページのターゲットを 1 MB（コンバージョンにとってブランディングが非常に重要な場合は 1.5 MB）を設定するという方法もあります。
  • 最終的に目標ページ重量を超えるページのリストを作成します。

ウェブデザイン チームとの打ち合わせ

  • 画像圧縮、レスポンシブ画像、画像のサイズ変更、遅延読み込み、キャッシュ保存、サーバー最適化など、さまざまな画像最適化手法によって開発チームが画像をより迅速に配信する方法を調査します。
  • さまざまな画質とサイズの画像を公開するテストページを作成し、さまざまな画面のパフォーマンスと品質のバランスを取るレベルに合意します。モバイル ユーザーのセッション時間が短いことが多いため、ある調査によると、モバイル セッションの半分以上が 30 秒以下であることがわかっています。このようなユーザーは画像を詳細に調べることができず、サイトの表示が速いほうが好まれる可能性があります。
  • ウェブ デザイナーがすべてのウェブページのページ ウェイトを 1 MB 未満（または最大 1.5 MB）に抑えるパフォーマンス バジェットを提案します。

分析チームと連携して速度を改善

何に重点を置くべきかを理解し、意思決定の基礎を得るために、企業はデータを必要としています。しかし、サイトの速度の重要性と収益や売上とのつながりについて多くの人が語っていますが、技術チーム以外でも、週次レポートに速度を記載していない企業は依然として多く存在します。開発者が分析チームと共同作業を開始すると、これは変更される可能性があります。

共通の課題

実際、レポートされていないものが重視されない、というのが現実です。ビジネス関係者向けの週次レポートや月次レポートにサイトの速度が含まれていないと、その値は忘れられがちで、リソースの獲得に苦労することになります。ただし、分析チームにはトラッキングの速度に関する経験があまりないことが多いため、デベロッパーのサポートが必要になります。また、速度を改善した場合の収益への影響を計算するには、分析チームの支援が必要です。これらの部門は、一見は想像もつかないほど、各部門に依存しています。

分析チームに提案書を送信する

サイトの速度が収益や直帰率に及ぼす効果は、多くの事例紹介で実証されています。社内のサイト速度トラッキングを共同で設定し、関係者に送付されるレポートの一部として速度を上げて、より多くの賛同を得ることは可能でしょうか。

分析チームとのミーティングの準備をする

  • 速度を定期的にトラッキングする。おすすめの方法の一つは、Lighthouse CI、PageSpeed Insights、WebPageTest などのツールで API を使用することです。これにより、管理されたラボ環境で定期的に統計情報を収集し、さまざまな期間にわたるベンチマークを簡単に実施できます。
  • スピードの価値を分析チームに転送し、分析の実施を求めます。これにより、ミーティングでグラフを分析する準備が整います。

分析チームとのミーティング

  • 速度の値から作成されたグラフを確認します。モバイルの相対コンバージョン率は、速度の影響とサイトの改善状況をトラッキングする方法の 1 つです。分析チームに、この状況の追跡を開始してもよいかどうかを尋ねます。
  • Google アナリティクスの読み込み時間の指標が、ビジネス レポートの簡素化に十分なものであるかどうかを判断します。 速度の値ではこの指標が使用されます。多くのデベロッパーがご存じのとおり、これは多くの重要な速度指標の 1 つにすぎず、Google アナリティクスで使用されるため、ラボデータではなくフィールド データでもあります。とはいえ、ビジネス レポートを簡素化する目的であれば、これで十分でしょうか？上記の分析で得られた結果を確認し、読み込み時間が 2 ～ 3 か月以上続くとモバイルの相対コンバージョン率が低下し、読み込み時間が 2 ～ 3 か月続いたときに相対モバイル コンバージョン率が上がるかどうかを確認します。読み込み時間がかなり安定している場合、速度を大幅に改善するまで、分析が機能しているかどうかを知ることは困難です。該当する場合は、次の代替手段に進みます。
  • デベロッパーが使用する速度指標のグラフを表示する。それらを分析チームに説明し、コンバージョン率または相対的なモバイル コンバージョン率との相関関係が見つかるかどうかを確認します。
  • 分析チームが収益に関連する計算で速度を使用する方法と、関係者に報告する方法を検討する時間を与えます。多くの場合、これは彼らにとって新しいトピックです。その後またミーティングを行い、ご自分が納得できるアプローチを試してください。通常どおり、適切なものが見つかるまでデータ収集を修正する必要がありますが、これがコラボレーションを開始する方法です。

次のステップ

スピード プロジェクトが大きな改善につながった後、分析チームに、スピードの価値で説明した分析を行うよう依頼してください。これにより、獲得したコンバージョン数と収益がどれだけ増えたかが示され、貴社のチームと協力したすべての部門に報酬がもたらされます。これは関係者への週次レポートに記載できるため、プロジェクトは 1 回限りの取り組みではなく、継続的に管理されます。