こちらは、LandingHubのプロダクトマネージャーでもある竹中が解説します。

この記事でわかること

LandingHub の導入でいちばん多いのは、ページの一番上に、短いタグを1行はりつける方法です。

サーバーを引っ越す必要はありません。

「たった1行で、なぜページが軽くなるのか」を、できるだけ専門用語を使わずに説明します。

タグ1行でやること、やらないこと

タグは、ページが開かれたときに動く小さなプログラムです。

やること

• ページの中の画像や動画（重くなりやすいもの）を見つける
• それを取りに行く先を、LandingHub 側に変える
• 画面に映っているものを先に読み込み、まだ見えていないものは後回しにする

やらないこと

• サイトのアドレス（ドメイン）やサーバーを引っ越す
• ページの作りそのものを書き換える
• アクセス解析や広告のタグ（Google アナリティクス、GTM など）を書き換える

計測タグへの影響について。LandingHub が入れ替えるのは、画像と動画の置き場所だけです。解析用のタグそのものには手を触れません。

何が起きているのか

1. ページの中の画像や動画を見つける

ページが開かれると、タグが中を見て、画像や動画を探します。

最初に目に入る部分の画像を優先し、下のほうにある画像は、読者がスクロールしてくるまで待ちます。

文章やお問い合わせフォームには手を触れません。変わるのは「画像をどこから持ってくるか」だけです。

2. 取りに行く先を LandingHub に変える

見つけた画像や動画の「住所」を、LandingHub の住所に書き換えます。

これ以降、画像を取りに行く相手は、お客様のサーバーではなく LandingHub 側になります。

ページ自体のアドレスは変わりません。

読者が見ている ページのURL はそのままです。

3. 軽くしたものを、近い場所から届ける

LandingHub 側には、同じ画像を軽くしたものが用意してあります。読者のブラウザに合わせて、いちばん軽いものを選んで返します。

新しい保存形式（AVIF や WebP）に対応しているブラウザには、それを使います。

対応していないブラウザには、今までどおりの形式で、容量だけ小さくしたものを返します。

届ける場所も、読者から近い拠点が選ばれます。全国に配送センターを置いて、いちばん近いところから発送するイメージです。

なぜ「速くなった」と感じるのか

読者が「このページ、待たされるな」と感じる時間の大部分は、最初の画面に出てくる画像が表示されるまでの時間です。

LandingHub が手を入れるのは、まさにそこです。

画像と動画を軽くして、近い場所から届ける。

だからページの見た目も作りも変えていないのに、体感が変わります。

逆に、ページの中で動くプログラムが重いことが原因の場合は、LandingHub だけでは解決しません。

どこまで効いて、どこからは効かないのかは、下記の記事でまとめます。

LandingHubはなぜホスティング移管なしで高速化できるのか

まとめ

タグ1行でやっていることは、画像と動画を見つけて、置き場所を変えて、軽くしたものを近くから届ける、それだけです。

サーバーの引っ越しも、ページの作り直しも必要ありません。

次の記事では、「引っ越さなくていい理由」をもう少し詳しく説明します。