LPの表示速度を改善！具体的な方法を初級編から上級編まで徹底解説！

「自社LPの表示速度（ページスピード）を向上させたい」と頭を悩ませているご担当者様へ。
LPの表示速度を向上させれば、広告品質スコアの向上やUI/UXの高品質化に非常に効果的です。本記事ではLPの表示速度を改善するべき理由や具体的な施策について徹底解説します。

サイト全体の改善フローに関しては以下の記事で詳しくご紹介しております。

【Webサイト集客で結果を出す！】ポイントは現状把握と分析！結果を出すPDCAサイクルとは？

LPにおいて表示速度（ページスピード）がどうして重要か

まず初めに、そもそもどうして表示速度が重要なのでしょうか？

スマートフォンでサイトを見た際に、読み込みが遅く、閉じてしまったという経験は誰しもあるかと思います。
このようなユーザーのUXに関して悪影響を及ぼすことは理解しやすいかと思いますが、表示速度は他にもさまざまな面に関与しています。

広告品質スコアに影響する

広告品質スコアとはGoogleやYahoo!JAPANなどで使用されている広告の「品質」の目安を表示する診断指標です。広告の品質がどれほど良いのか、悪いのかといった評価がわかりやすく数値として表示されます。
詳細は「品質スコアとは？Googleリスティング広告で上位掲載されるポイントをご紹介」にて解説しておりますので、ぜひご覧ください。

表示速度は、この広告品質スコアの指標「ランディングページの利便性」に大きく関わることをGoogleが発表しています。ランディングページの利便性の評価が悪い場合、広告が検索上位に掲載されない・単価が高くなるなどのデメリットがあります。
参考：品質スコアについて – Google 広告 ヘルプ

また、このランディングページの利便性は主に下記の3項目から構成されています。

• テキストの関連性
• 操作性
• 信頼性

上記の3つの内「操作性」「信頼性」が表示速度に関与します。

まとめると、操作性・信頼性を改善することで表示速度が向上し、ランディングページの利便性も向上するため、結果として広告の品質スコアが改善されるというわけです。

売上

サイトの表示速度は売上にもつながると報告されています。

たとえば、Amazonの調査では「表示速度が0.1秒遅くなると売上が1%減少し、1秒高速化すると約10%売上が向上する」ことを報告しています。
参考：Amazon Found Every 100ms of Latency Cost them 1% in Sales – GigaSpaces

また、Aberdeen Groupの調査では、表示速度が1秒遅くなるとページビュー数が11％、コンバージョン率が7%、顧客満足度が16%低下することが報告されています。
参考：5 Ways Your Site Speed Kills Conversions (and How to Fix It) – The Good

SEO

広告を入口とするようなLPとは関連性が薄いと感じる方も多いかと思いますが、SEOにも影響します。

Googleは2018年にページの表示速度をモバイル検索結果の評価に使用することを発表しました。
参考：ページの読み込み速度をモバイル検索のランキング要素に使用します | Google 検索セントラル ブログ | Google Developers

LP表示の理想の表示速度

ここまで表示速度の重要性について解説しました。

では、具体的にどのくらいの表示速度が好ましいのでしょうか？

おおよその目安になりますが、最大でも3秒以内に収めるべきであると考えています。
なぜなら、2017年と2018年のGoogleの調査で、表示速度と直帰率の関係を報告しているためです。

また、現代で多く利用されているスマートフォンページでは表示速度が3秒以上かかった場合53%のユーザーが離脱することも報告されています。
参考：Find Out How You Stack Up to New Industry Benchmarks for Mobile Page Speed

表示速度を計測する

ではどのようにして表示速度を測定すればよいのでしょうか？ここでは測定ツールについて紹介します。

計測ツール

最も認知されているツールはGoogleが提供している”ページスピードインサイト“です。
ページスピードインサイトを使用することで、対象のLPがどれくらいの表示速度なのか、対応すべき方法について詳細に表示されます。

詳しくは「ページスピードに関するSEO対策について初心者・上級者向けに徹底解説」で解説しておりますので、ぜひご覧ください。

ページスピードインサイトの各指標

ここではページスピードインサイトの各指標について簡単に解説いたします。Googleの公式で公開されている各指標は下記のとおりです。

表示速度改善のためには、各指標において改善を測っていく必要があります。ただし、すべてに対応することは工数や時間もかかってしまうため、表示速度の改善施策として難易度および重要度を加味したのちに、優先度をつけていく必要があります。

詳しい施策に関しては次章にて、解説いたします。

LPで重要な表示速度施策を徹底解説

それでは、LPの表示速度の高速化において、初・中・上級に分けて施策を解説いたします。

初級編

初級は難易度が低く、比較的どなたでもすぐに実施可能な施策になります。

画像の圧縮

まずは画像の圧縮です。ページ内で使用する画像を圧縮することで表示速度を向上させることが可能です。

圧縮方法はいくつかありますが、ここではオンラインで誰でも使用可能な”TinyPNG“を紹介します。
TinyPNGとは、無料で画像をオンライン上で圧縮することができるサイトです。これを使用することで、解像度をほとんど維持したまま適切な画像サイズに圧縮することが可能です。

gzipの適用

gzip圧縮とは、サーバーからブラウザにダウンロードする際に、できるだけ小さいファイルを送り、送受信の負担を軽くする手法です。
イメージとしてはメールでファイルを添付する際のzip化に近いです。このような圧縮操作をサーバーとブラウザ間でおこなうような方法になります。

詳しくは「【ページスピード高速化】gzip圧縮方法について徹底解説」で紹介しておりますので、ぜひご覧ください。

キャッシュの設定

キャッシュとは一度開いたサイトなどの情報を保存しておく方法です。
そのため、複数回訪れるようなユーザーに有効となります。

具体的な設定方法として.htaccessファイルに記載することがあげられます。
.htaccessファイルとはいわばサーバー上の設定ファイルです。

.htaccessファイルを開き下記を記述してください。

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/gif "access plus 1 day"
ExpiresByType image/jpeg "access plus 1 day"
ExpiresByType image/png "access plus 1 day"
ExpiresByType image/x-icon "access plus 6 months"
ExpiresByType text/css "access plus 1 day"
ExpiresByType text/javascript "access plus 1 day"
ExpiresByType application/javascript "access plus 1 day"
</IfModule>

画像、iframeのLazyLoad

画像、iframeの遅延読み込みとは、ユーザーに見えていない画像を遅らせて読み込む手法です。

遅延読み込みを使用することで、ユーザーがページを開いた際に、FV内の画像などを優先的に表示させ、その他の画像はのちほど表示することが可能です。

設定方法はHTML内のFV以外のimg、iframeタグに下記のプロパティを設定します。

loading=”lazy”

ただし、こちらは対応していないブラウザが存在するためご注意ください。
参考：Lazy loading via attribute for images & iframes

中級編

中級施策としては、コーディングの知識などを少々必要とする施策になります。

画像にwidth,heightをつける

これはHTML内の画像がしていされているimgタグのプロパティにwidth、heightを指定する手法になります。

これにより、ページがレンダリングされた際にあらかじめ指定された幅だけ画像表示用に取っておくため、画像読み込みによる表示のずれを防げます。
また、こちらの手法はファーストビュー内の画像に最も効果的で、ページスピードインサイト内のCLSの評価対象になります。

注意点としてはこれらのプロパティを指定したimgタグにCSSで、下記を指定することです。これにより縦横比が維持されたまま画像を表示可能です。

width:100%;
height:auto;

テキストファイルの圧縮

テキストファイルの圧縮とは、HTML・CSS・JSファイル内の改行やスペース、コメントアウトを省き、コンピュータにとって読み込みやすい記述に変更することをいいます。

ここではGoogleが公式で推奨している圧縮ツールを紹介します。

• HTML Minifier
• CSS nano
• UglifyJS 3

また、Webpackなどのモジュールバンドラで圧縮するのも一つの手段です。

上級編

上級施策では、難易度は高いのですが、効果の高い施策になります。

不要なCSS、JSの削除

不使用のCSSやJSを削除することで、表示速度を向上させることができます。
ただし、こちらはかなり骨の折れる作業になり、工数も多くかかってしまいます。

注意点として、LPに問題がないか必ず確認しましょう。
たとえば、ホバーアクションなどをかけていた場合こちらのツールでは不使用とみなされる場合があります。

FVの優先的レンダリング

ページスピードインサイトにこのようなメッセージが出てきた場合はFVの優先的レンダリングの適用余地があります。

この手法は表記のとおり、FVの表示を優先的に行い、ユーザーが閲覧中に見えていない箇所を読み込むという手法になります。

ここでは”UglifyJS 3”という便利なツールの紹介をします。
Critical Path CSS GeneratorはFV内に適用されているCSSを抽出してくれるツールになります。

実施方法は下記です。

1. URL TO WEB PAGE TO CREATE CRITICAL CSS FOR”に対象のURLを入力します。
2. FULL CSS TO EXTRACT CRITICAL CSS FROM. CAN BE MINIFIED.”にLPで適用しているCSSのコードをすべてペーストします。
3. Create Critical Pass CSS”ボタンをクリックすると、FVのCSSが抽出されます。
4. HTML内のheadタグ内にstyleタグで抽出されたCSSをペーストします。
5. 抽出されたCSS内でbackground-imageなどで相対パスを用いている場合はHTMLファイルからの相対パスに変換ください。

Webpへの対応

WebpとはGoogleが開発した画質を担保したまま軽量化できる比較的新しい画像フォーマットです。
注意点としては、対応していないブラウザが存在することです。

詳しくは「UglifyJS 3」で解説しておりますので、ぜひご覧ください。

まとめ

今回はLPの表示速度を改善するにあたり、どのような施策を実施していけばよいかを解説しました。

表示速度はLPにおいて、アップデートが多く実施されたこともあり近年無視できないものになってきています。
そのため、難易度の低い施策から実施し、LPの評価を向上させていきましょう。

また、ランディングページ（LP）での集客獲得にお悩みの方は、こちらの記事をご覧ください。

「デザインじゃない！？」ランディングページ（LP）で顧客獲得を最大化させる正攻法を大公開

当サイトではこの他にもWebに関するお役立ち情報を多数ご紹介しています。
Web担当者の方、デジタルマーケティングに興味がある方はぜひご覧ください。

広告運用やSEO、解析・Web製作など、当社はWebに関わるベストソリューションをご提供しています。お悩み・ご相談も受け付けておりますので下記のボタンからお気軽にご連絡ください。

Webに関するお悩みごとはデジタルアイデンティティへ！

現在、様々な企業がWebサイトを活用して、デジタルマーケティングに取り組んでいます。
しかし、以下のようなお悩みがあるご担当者様も多いのではないでしょうか？

デジタルマーケティングに関するこんなお悩みはありませんか？

• 広告やSEOを始めたいがやり方がわからない…
• 自社に最適な広告媒体・施策を提案してほしい…
• 最新の広告手法も取り入れた提案をしてほしい…
• 短い期間で最速で成果に繋げたい…
• 目標設定・アクセス分析・サイト改善など、全部丸投げで対応してほしい…

株式会社デジタルアイデンティティは、Webの総合広告代理店です。

数ある施策の中からお客様にとって最適な施策のご提案と、企画・提案から実施・改善まで一気通貫で確かな実行力で、お客様のビジネス目標達成を強力にサポートいたします。

デジタルアイデンティティの強み

• お客様に最適なマーケティング手法をご提案
  Google、Yahooなどのリスティング広告をはじめ、Facebook、Instagram、LINE、tiktok、PinterestなどのSNS広告、ニュースやゲームなどの各種アプリへの広告配信、インフルエンサーマーケティングなど、あらゆる手法から最適な施策をご提案
• 全ての施策を一気通貫で対応可能
  ブランディングからアクセス分析、SEO・MEO対策、LPO、EFO、Webサイト制作、バナー・動画などのクリエイティブ制作まで、一気通貫で対応可能
• 高速PDCAでお客様の目標達成を最短で実現
  デジタルマーケティングでは施策実施後のPDCAが欠かせません。施策ごとにスピーディなPDCAを回すことにより、最適化・効率化を進めて成果を最大化

ご興味がある方は、ぜひ一度、弊社のサービス資料をご覧ください！

【無料】資料ダウンロードはこちらから