モバイルページの速度が遅いためにコンバージョン率が低下している
公開: 2017-03-21グーグルの最近の調査によると、クリック後のランディングページのデザインが悪いと、PPC予算の少なくとも半分が犠牲になる可能性が高いとのことです。
検索エンジンの巨人からのデータは、2人に1人以上のモバイルインターネットユーザーが3秒以内にロードされない場合にWebページを放棄することを示しています。 また、2017年2月の時点で、平均的なモバイルのクリック後のランディングページの読み込みには、恥ずかしい22秒かかります。
計算をやめた場合は、読み込みの遅いページが収益にどれほど悪影響を与える可能性があるかをおそらく理解しているでしょう。
月に5,000人のモバイルポストクリックランディングページ訪問者を生成し、それらの5％を変換すると、年間で1,500回の変換を逃すことになります。 読み込みに3秒以上かかる場合、訪問者の半数（この仮定では、月に2,500人）は、バウンスする前にクリック後のランディングページ全体を見ることさえありません。 さらに悪いことに、PPCの予算は毎回使い果たされます。
クリックしてツイート
しかし、おそらくあなたのページは3秒で読み込まれません。 多分それは5秒、または6秒、または10秒でロードされます。 その場合、グーグルからのデータはあなたがさらに多くを失っていることを示しています。
新しいモバイルページ速度ベンチマーク
あなたのページはどのようにウェブ上の他のページと重なりますか？ 読み込み速度の新しいベンチマークを確立するために、Googleは2017年の初めに126か国で900,000件の広告のモバイルポストクリックランディングページを分析しました。
彼らが見つけたのは、彼らの仮説の確認でした。モバイルページは要素が多すぎて「肥大化」しています。
その中で、自動車、小売、テクノロジーの各セクターのページは、平均してロードに最も時間がかかります。 ただし、業界に関係なく、いくつかの衝撃的なデータは、モバイルのクリック後のランディングページが全体として多くの要望を残していることを示しています。
たとえば、分析されたページの70％は、折り目のすぐ上にコンテンツをロードするのに7秒かかりました。 それらの同じページで、折り目の上下にビジュアルコンテンツをロードするのに合計10秒以上かかりました。
別のGoogleの調査では、SOASTAの高度なアルゴリズムの助けを借りて、ページの読み込み速度を、コンバージョンやバウンス率などのより意味のある主要業績評価指標に関連付けました。 ブログ投稿で、研究者は詳しく説明しています。
2つの機械学習モデルを構築しました。1つはコンバージョンを予測するためのもので、もう1つはバウンス率を予測するためのものです。 各モデルは、モバイルeコマースサイトの大規模なサンプルからの実際のデータを使用し、画像形式から多数のスクリプトまでの93の異なるページメトリックの影響を相関させました。 簡単に言えば、2つのモデルは、モバイルサイトの要因によって買い物客が購入またはバウンスする原因となるものを探しました。 変換モデルの予測精度は93％で、バウンスモデルはさらに正確で96％でした。
機械学習モデルは、ピンポイントに近い精度で、ページの読み込み時間が1秒から3秒に増加すると、モバイル訪問者がバウンスする確率が32％増加することを発見しました。 そこから、グラフィックが示すように、事態はさらに悪化します。
調査によると、バウンス率に加えて、ページの読み込み時間が遅いとコンバージョンが減少する可能性があります。 それで、犯人は何ですか？
研究者は、いくつかの主要なモバイル設計の欠陥を特定しました。
最大のモバイルポストクリックランディングページスピードキラー
スピードは、コンバージョンと有料広告予算を損なうだけではありません。 これは、Googleの検索エンジンのランキング要素の1つでもあります。 ページが推奨される3秒より速く読み込まれない場合は、お金を無駄にしていて、見つからないことになります。 次の問題のいずれかが原因である可能性があります。
1.ページ要素が多すぎます
今日、平均的なWebページのデータサイズは、従来のビデオゲーム「Doom：」と同じです。
2.3MBで、それは不要な要素のヒープに成長します。 そして、その設計者はBSO（「明るい明るいものを追いかける症候群」）を持っています。ソフトウェアエンジニアのRonanCreminは次のように示唆しています。
ウェブがその厄介な10代を経るにつれて、私たちは忍び寄る特技を定着させ、最終的には雑然としたものが私たちを良くしてくれました。 新しいJavaScriptギャラリーモジュール？ もちろん？ 新しいWebフォントはここでは見栄えがしますが、そこにいる間に別の分析ツールを追加してみませんか？ この6,000ピクセルの画像のサイズを変更する必要がありますか？ いや、ブラウザにやらせてください、私のために働きます。
グーグルは、クレミンが言うように、「featuritus」がロード速度に劇的な悪影響を与える可能性があることを発見しました。 現在、平均的なページには、数十のサーバーに保存されている数百から数千の要素（見出し、画像、ボタン）が含まれています。 これらの要素が最適化されていない場合、結果は「予測不可能」で「不安定な」読み込みエクスペリエンスになる可能性があります。
研究者は、コンバージョンの最も正確な予測因子として、ページ上の要素の数を特定することさえしました。 彼らは、少ないほうが多いと主張している。 ページの要素が400から6,000に増えると、訪問者を変換する確率は95％低下します。
クリックしてツイート
データによると、インターネットのトップデザイナーは、2014年以降、そのことを知っています。ほとんどのWebサイトの平均ページサイズは着実に増加していますが、トップ10はコーナーを曲がっています。
彼らにとって、ページの「重み」（データサイズ）は過去数年間で減少しています。 他のすべては、どうやら、featuritusの犠牲者です。
Googleによると、テストしたページの70％は1MBを超え、36％は2MBを超え、12％は4MBを超えていました。 その結果、訪問者が長く立ち往生する可能性はほとんどありません。 高速3G接続（世界中のほとんどのセルラー接続の速度）を介して、1.49MBのロードには約7秒かかります。
問題の解決
重みの大きいページの場合、最善の解決策は防止です。 幸いなことに、予防はGoogleが「パフォーマンス予算」と呼ぶものを設定するのと同じくらい簡単です。 ページの作成を開始する前に、ページの読み込み速度（「予算」）を決定します。 次に、予算の範囲内でページをデザインします。
「それが設計基準の一部である場合、何かを迅速に提供する方がはるかに効率的です」とロレアルのハカン・ニザムは言います。 「開発者の帯域幅が解放されます。 これにより、開発者はコンバージョン率に影響を与えている他の要因に集中することができます。 他の差別化要因に進むには、スピードの会話を解決する必要があります。」
Googleのブログ投稿で、ジェイソンコーエンは、予算を他の創造的な制限に例えています。
設計プロセスの一部として速度を含めることは、他の創造的な媒体の制限を説明することと同じです。 デザイナーは、白黒の印刷物用に4色の広告を作成したり、15秒のスロット用に30秒のビデオを作成したりすることはありません。 メディアの制限内でデザインしないと、悪い経験になります。
モバイルがデスクトップインターネットトラフィックを追い抜いているにもかかわらず、ほとんどのユーザーエクスペリエンス指標では、チャネルは依然としてデスクトップに遅れをとっています。 設計者は、モバイルを後付けとして扱うのをやめる必要があります。 それはそれ自身の媒体であり、ユーザーエクスペリエンスはそれを反映する必要があります。
もちろん、「予算編成」手法は、ゼロから始めることを前提としています。 すでに低迷しているクリック後のランディングページを最適化しようとしている場合、研究者は要素の監査を実施し、サードパーティのスクリプトを監視して、その重みに最も貢献しているものを見つけることをお勧めします。 次に、スケールダウンしてそれに応じて最適化します。
2.画像が多すぎます
彼らの調査では、ある特定の画像がGoogleテスターの注目を集めました。 それはなんと16MBの重さでした。 何度も何度も、彼らはページを詰まらせる画像を見つけ続けました。
「ファビコン、ロゴ、製品画像などのグラフィック要素は、ページの総重量の最大3分の2（つまり、数百キロバイト）を簡単に構成できます」と研究者は警告しました。
彼らは、機械学習モジュールの助けを借りて、コンバージョンの2番目に正確な予測因子がページ上の画像の数であることを発見しました。 訪問者を正常に変換できなかったページと比較して、38％少ない画像を掲載できたページ。
問題の解決
ページの速度を大幅に向上させる最も簡単な方法の1つは、画像をすばやく最適化することです。 頑張って…
- 不要な画像を削減
あなたは本当にあなたの製品の6つの異なる角度を紹介する必要がありますか？ そのストックフォトは、クリック後のランディングページに本当に付加価値をもたらしますか？ 画像内のテキストをエンコードする必要がありますか、それとも選択したフォントをGoogleFontsまたはAdobeTypekitと統合できますか？ 答えが「いいえ」の場合は、デザインからいくつかの画像を切り取ることを検討してください。
- 必要な画像のサイズを小さくします
これらすべての画像が必要な場合は、いくつかの異なるツールと戦略が帯域幅の節約に役立ちます。 まず、画像ファイルの形式を確認します。 PNGをJPEGに置き換えると、サイズを大幅に節約でき、ひいては速度を節約できます。 一方で、画像の品質も低下します。 使用する形式を決定する方法の詳細については、この投稿を確認してください。
次に、ツールの使用について考えます。 研究者は、画像コンプレッサーの助けを借りて、ページの30％が250KBのデータを節約できると主張しています。 GoogleのGuetzliとZopfliは試してみる価値のある2つです。
3. JavaScriptの使用、ページ全体の読み込み時間
画像やボタンなどの要素をユーザーに表示する前に、ページが作成されたHTMLコードをブラウザで受信し、解釈する必要があります。 かかる時間は「DOM準備時間」として知られています—ページバウンスの最も正確な予測因子であることが研究者によって発見されました。
Googleのデータによると、バウンスされたユーザーセッションのDOM準備時間は、バウンスされていないセッションより55％遅くなりました。 その重要性の低下は、多くのサードパーティの分析ツール、広告、ソーシャルウィジェットで使用されているJavaScript（HTMLコードの解析を停止するコードの一種）によって引き起こされることがよくあります。
DanielAnとPatMeenanは、速度の低下を組織化されていないレストランと比較しています。
あなたがレストランにいて、ウェイターがあなたの食事を持ってくる準備ができていると想像してください、しかし最初に塩とコショウが別のレストランから配達されるのを待たなければなりません。
しかし、モバイルページの速度を低下させるコードはJavaScriptだけではありません。 CSS、HTML、および画像やフォントなどの要素を処理するために必要な無数のリクエストにより、ページ全体の読み込み時間に遅れが生じます。これは、バウンス率の2番目に正確な予測子です。 バウンスした平均的なWebページのユーザーは、バウンスしなかった平均的なページよりも2.5秒遅くなりました。
問題の解決
モバイルブラウジング体験を改善するために、Googleは広告プログラム用のAMPとAMPを開発しました。 どちらのフレームワークも、開発者に超高速でモバイルエクスペリエンスを提供するために必要なツールを提供します。 それらが含まれます：
- AMP HTML：これは、ハイパーテキストマークアップ言語として認識されているもの（ほとんどのWebページの基盤を構築するために使用されるタグ、数字、文字のシステム）の簡略化された基本バージョンです。
- AMP JavaScript：人気のあるコードのGoogleのAMPバージョンは、サードパーティおよび作成者が作成したJavaScriptの使用を制限しています。
- AMP CDN：これにより、開発者は自分のWebページのキャッシュバージョンをGoogleのサーバーに保存できます。 そのキャッシュされたバージョンは、すべてのデータを1か所に含むページのデジタルスナップショットです。 その結果、ユーザーにより早く提供することができます。
フレームワークの要素が合わさって、平均の10分の1のデータを使用するページと、6倍の速度で読み込まれる広告の基盤が形成されます。
AMPの使用を開始する方法について詳しくは、こちらをご覧ください。
あなたのモバイルページの速度はどれくらいですか？
クリック後のランディングページはモバイル向けに最適化されていますか？ 役に立たない画像、不格好な要素、重いJavaScriptはありませんか？
Googleのモバイルフレンドリーテストで調べてから、次のページを作成する前に、クリック後のランディングページエクスペリエンスを最適化するためのガイドを確認してください。
