【ツール紹介】ページ表示速度改善できる「LandingHub（ランディングハブ）」

2024年7月16日

今回は、メイクショップで利用可能な、ページ表示速度改善が簡単にできるサービス「LandingHub（ランディングハブ）」について解説いたします。「LandingHub」の概要やメリットについてご紹介します。

【目次】

ページ表示速度改善サービス「LandingHub」とは？
ページ表示速度改善をしない場合のデメリット
「LandingHub」のメリット
費用について

■ページ表示速度改善サービス「LandingHub」とは？

「LandingHub」はタグを入れるだけでランディングページやサイトの画像・動画を軽量化し、表示速度を高速化するサービスです。

■ページ表示速度改善をしない場合のデメリット

1.直帰率・離脱率の増大

ページ表示速度が1秒から3秒になると直帰率が32%増加、また、モバイルでは表示に3秒以上かかると53%のユーザーが離脱すると言われています（※1）。数秒の違いでも、ユーザーにとってはストレスとなり、機会損失を生みだしてしまいます。

（※1）出典：Google 2018年 Find out how you stack up to new industry benchmarks for mobile page speed

2.売上減少

Amazonの調査では「サイト表示が0.1秒遅くなると、売上が1%減少し、1秒高速化すると10%の売上が向上する」と報告されており、売上とページ表示速度が密接に関係していると言えます（※2）。

（※2）出典：Amazon 2007年 Web experiments generate insights and promote innovation.

■「LandingHub」のメリット

「LandingHub」サービスのメリットをご紹介します。

（画像参照元：https://apps.makeshop.jp/view/item/000000000112 ）

1.簡単導入
scriptタグを1つ設置するだけでLandingHubを簡単に導入することができます。タグの置き換えやファイルのアップロードは不要で、LandingHubが発行するJavaScriptをHTMLファイルのheadタグ内に設置頂くだけでページの高速化が実現できます。

2.CVRのアップ
・画像・動画を自動圧縮

最適な画像・動画サイズに圧縮する事で負荷を減らし高速化を実現します。画質を維持したまま軽量化した画像を書き出すことができる、新しい画像フォーマット「AVIF」や「WebP（ウェッピー）」、新しいコーデック「V P 9」や「H . 2 6 5 HRVC」を自動的に作成可能です。

・GIFを動画に自動変換
GIFアニメーションもAVIF・WebPより圧縮率の高い動画に変換できます。GIFアニメーションが多用されているページは転送量も多くなる傾向にありますが、自動的に動画へ変換されるため転送量の削減が望めます。

・独自レイジーロード
レイジーロードでは、スクロールした画面内にある画像（動画）のみを読み込むことで、ページ表示速度が改善できます。一般的なレイジーロードと違い、読み込み時のチラツキや高速スクロールによる画像遅れに対応しています。

・プリロード
通常、headタグの中に入っているたくさんの情報が読み込まれないとbodyの中は読み込まれないのですが、プリロードを実践することで画像を優先的に読み込むため、ファーストビューが表示されるまでの時間短縮に繋がります。

上記の方法により、ページ表示速度を改善することでCVRアップに繋げることが可能です。

3.コスト削減

・サーバー費用の削減
「次世代フォーマットへの変換」「画像・動画などの自動圧縮」「レイジーロードでの無駄な転送量削減」によりデータ転送量の節約に繋がるため、サーバー費用削減が可能です。

・エンジニアリソースの削減
タグ設置のみでサービス利用が可能なため、社内のエンジニアリソース削減に繋がります。

4.サーバーの安定稼働
LandingHubはHTMLタグを利用して画像や動画を収集し、LandingHubサーバーで圧縮することでページ表示速度を改善します。複数のサーバーが負荷分散を行い、急増するアクセスにも対応可能です。また、一部のサーバーが停止した場合も、他のサーバーが配信を継続することができます。