ランディングページの表示速度は、コンバージョンにどう効くか

表示速度が、オファーを見る人を決める

どのランディングページにも待ち行列があります。広告をタップして、ブラウザが読み込みを始めて、訪問者は待ちます。電波の弱い4G回線のスマホでは、重いページは4秒も5秒も白いままです。かなりの割合の訪問者が、見出しが描画される前に離脱します。オファーも見ませんし、ボタンにもたどり着きません。コピーがどれだけ優れていても関係ありません。広告経由なら、そのクリックの費用はどちらにしても払っています。つまり表示速度が、あなたが作った他のすべてを評価してもらえる人数を決めています。

追う価値のある3つの数字

Googleは3つの基準値を公開していて、そのまま目標として使えます。Largest Contentful Paintは2.5秒未満に収めます。たいていはヒーロー画像か見出しの描画が終わる時点です。Interaction to Next Paintは200ミリ秒未満に保ちます。そうするとタップの反応が一瞬に感じられます。Cumulative Layout Shiftは0.1未満に保ちます。読んでいる間、レイアウトが動かない状態です。Googleはこれらを実際の訪問の75パーセンタイルで判定し、スマホとパソコンを分けて出すので、両方を確認してください。実測のデータは数週間遅れて反映されるので、直したその日の確認にはラボのテストを使います。

ページを遅くしている正体

私たちが監査するサイトでは、ほぼ毎回同じ顔ぶれが出てきます。ヒーローの動画が自動再生され、誰もスクロールしないうちに数メガバイトを送っている。スクリーンショットが3000ピクセル幅で書き出され、600ピクセルの枠に入れられている。2種類で足りるところに4種類のフォントウェイトが読み込まれ、そのたびに文字の描画が遅れる。そこに後付けのものが加わります。チャットウィジェット、ヒートマップの録画ツール、広告のピクセル2つ、そしてバリアントを選ぶあいだ描画を止めるA/Bテストのスクリプト。どれも入れた時点ではただに思えました。合計を数えている人はいません。

今週どこから手をつけるか

ヒーローから始めてください。たいていそこがLCPの対象だからです。圧縮したWebPかAVIFで配信し、表示領域に合ったサイズにして、遅延読み込みはかけません。自動再生の動画は、静止画と再生ボタンに置き換えます。画像、埋め込み、バナーには高さを確保しておいて、ページの形が崩れないようにします。次にネットワークタブを開き、サイズ順に並べて、3か月間誰も確認していない外部スクリプトをすべて削除します。速度を絞ったモバイル回線の実機で、もう一度測ります。ほとんどのページは、何かを取り除くと速くなります。