サイト価値向上に欠かせない「ページ表示速度」高速化のコツ

無料相談会はこちらから

ページ表示速度高速化は、体験価値向上と直帰率低下のために

まずはページ表示速度を高速化すべき理由を紹介します。

高速化が必要な理由は大きく2つあります。1つ目は、ページ表示速度が遅いと検索順位に影響する可能性があるからです。古くからGoogleはPCサイトのページ表示速度を重視していましたが、2018年7月からはモバイルサイトの検索にも適用し始めました（これを「スピード アップデート（Speed Update）」といいます）。

ただし、表示速度が速ければ速いほど検索順位が上がるというわけではありません。Googleが重視しているのは、ユーザーにとって特に遅いページなど、ユーザー体験を損なうページの改善です。

そもそもGoogleはサイトを評価する上で、「いかにユーザーに良質な体験を提供できているか」という点を大切にしています。ページ表示速度の遅さはユーザーにストレスを与え、体験価値を下げてしまいます。

現在、ページの表示や操作性を考えるうえでは、「Core Web Vitals（コア ウェブ バイタル）」も重要な指標となっています。Core Web Vitalsは、ユーザーが実際にWebページを利用した際の体験を測定するための指標で、「LCP」「INP」「CLS」の3つで構成されています。

• LCP：ページの主要なコンテンツが表示されるまでの時間
• INP：ユーザーが操作してからページが反応するまでの時間
• CLS：ページの表示中にレイアウトがどの程度ずれるか

このように、現在は単純な「ページが表示されるまでの速さ」だけではなく、表示・操作・レイアウトの安定性を含めて、ユーザーが快適に利用できるかという観点からWebサイトのパフォーマンスを考えることが重要です。

ちなみに、Googleがモバイルサイトのスピード アップデートを実施した背景には、近年のユーザー行動の変化が関係しています。かつてはインターネットを閲覧するための端末はPCが主でしたが、今やスマホで閲覧するユーザーがほとんどを占めています。日本の場合、10代〜40代の世代の人々は80％以上が、インターネットを閲覧する際に最も使うデバイスはスマホだと回答しているのです。

参考データ

もう1つの理由は、表示速度が遅いとユーザーの直帰率が高まるためです。2018年2月、Googleは以下のように、ページ表示速度と直帰率の関係を発表しました。

・表示速度が1秒から3秒に落ちると、直帰率は32%上昇

・表示速度が1秒から5秒に落ちると、直帰率は90%上昇

・表示速度が1秒から6秒に落ちると、直帰率は106%上昇

・表示速度が1秒から7秒に落ちると、直帰率は113%上昇

・表示速度が1秒から10秒に落ちると、直帰率は123%上昇

・ページの要素（テキストやタイトル、画像など）の数が400個から600個に増えると、コンバージョン率は95%下がる

参考データ

調べ物をしているとき、求める情報がありそうなサイトを見つけてもなかなかコンテンツが表示されないから離脱してしまった、という経験は誰しもが持っているでしょう。普段の生活でどれだけ辛抱強い人でも、Web検索をしているときには思いの外“短気”になってしまうのです。そうした人々を逃さないためにも、ページ表示速度の高速化は必須の対応と言えるのです。

ページ表示速度が遅くなる理由と対策

続いてページ表示速度が遅くなってしまう理由とその対策方法について紹介します。ページ表示速度が遅く原因は主に4つあるので、対策と合わせて知っておきましょう。

（１）掲載している画像の容量・形式が適切ではない

デザイン性や可読性を高めるために画像を使うのは有効な手段ですが、画像容量が大き過ぎたり、Webには適さない画像形式（.bmpや.tiffなど）で掲載したりしていると、ページの読み込みに時間が掛かってしまうことがあります。

画像が原因の場合、掲載画像数を見直したり、画像をリサイズ・圧縮して容量を下げることが最も手っ取り早い対策となります。

また、画像形式についても、用途に応じて適切なものを選択することが重要です。従来から利用されてきたJPEGやPNGだけでなく、現在ではWebP（ウェッピー）も広く利用されています。WebPは、JPEGやPNGと比較してファイルサイズを小さくできる場合があり、画質を維持しながら画像容量を削減する手段の一つです。

さらに、WebPよりも高い圧縮効率が期待できるAVIFも利用されるようになっています。googleも次世代フォーマットのWebP・AVIFを推奨しています。ただし、画像形式によって特徴やブラウザ対応状況が異なるため、Webサイトの対応状況や画像の用途などを考慮して選択するとよいでしょう。

また、デザイン性向上のために文字画像などを多用している場合には、CSSやテキストで代替することも可能です。

JavaScriptなどを活用して、必要な分だけの画像を読み込む「遅延読み込み」という手法で表示速度を向上させることもできます。ただし、重要なコンテンツまで遅延読み込みしてしまうと、かえって表示速度に影響する場合があります。画像の重要度や表示位置などを考慮して適切に実装することが大切です。

（２）ブラウザのキャッシュを利用していない

次に考えられるのが、ブラウザのキャッシュを利用していないケースです。キャッシュとは、過去にアクセスしたことのあるWebサイトのデータ（一度表示した画像やCSS、Javascriptなど）をブラウザに一時的に保存しておく仕組みのことです。キャッシュを利用していないと都度サイトのデータを読み込むためその分表示速度が遅くなりますが、キャッシュを利用していれば保存したデータを使える分、表示が素早くなります。
サーバーの設定ファイルやCDNなどで、キャッシュの有効期間などを適切に設定することで、ブラウザに保存されたデータを再利用できるようになります。

ただしキャッシュを有効にすると、サイトの更新が即座に反映されないケースもあるので、更新頻度が高いWebサイトの場合、運用状況なども鑑みながら実行すべきかを協議するようにしましょう。

（３）外部ファイルを読み込み過ぎている

３つ目の原因は外部ファイルを読み込み過ぎていることです。サイトの運用・更新を続けていると、広告やキャンペーンを実行する際などに新しいファイルを読み込むことがありますが、施策終了後に不要になったファイルやスクリプトを残したままだと、その分読み込まなければならないファイルが多くなってページ表示速度も遅くなってしまいます。

そこで、定期的にソースコードや読み込んでいるファイルを確認し、不要になった外部ファイルやスクリプトは削除するようにしましょう。また、必要なファイルであっても、不要な記述を削除したり、JavaScriptやCSSを圧縮（minify）したりすることで、読み込むデータ量を減らすことができます。

ただし、外部ファイルやスクリプトの中には、アクセス解析や広告、チャットツールなど、Webサイトの運用に必要なものもあります。むやみに削除すると必要な機能が使えなくなる可能性があるため、現在利用しているサービスや機能を確認したうえで、不要なものだけを整理することが大切です。

（４）サーバ側の契約内容やスペックが適切でない

どれだけサイト側を改善しても表示速度が向上しない場合、サーバの処理能力やメモリ、ネットワーク環境、アプリケーションのバージョンなど、サーバ側に原因があるかもしれません。その場合、サーバの契約内容やスペックを見直す必要があります。

また、アクセス数が多いWebサイトや、画像・動画などのコンテンツを多く掲載しているWebサイトでは、CDN（Content Delivery Network）の活用も選択肢の一つです。CDNとは、Webサイトの画像やCSS、JavaScriptなどのコンテンツを複数の配信拠点に配置し、ユーザーに近いサーバから配信する仕組みです。これにより、コンテンツの読み込みを効率化し、Webサーバへの負荷を軽減できる場合があります。

ただし、CDNを導入すれば必ず表示速度が改善するわけではありません。Webサイトの構成やアクセス状況、配信するコンテンツなどを確認したうえで、導入するかどうかを検討するようにしましょう。

ページ表示速度を計測や改善できるツール

ここまでページ表示速度が重要な理由、表示速度が遅くなる原因と対策を紹介してきました。
気になる方は、実際に自社サイトの表示速度が適切なのか否かを計測してみましょう。次のようなツールを使うと、表示速度を計測したり、改善することができます。

（１）Pagespeed Insights

最初に紹介するのは、Googleが提供している「PageSpeed Insights」です。対象となるWebサイトのURLを入力すると、Webサイトのパフォーマンスを計測してくれます。

パフォーマンスだけではなく、Core Web Vitalsに関する指標や、表示速度向上のために改善すべきポイントについても確認できます。

Pagespeed Insights

（２）Google Search Console

Googleが提供している「Google Search Console」でも、Webサイトのページパフォーマンスを確認することができます。  Search Consoleの「ウェブに関する主な指標」では、Core Web Vitalsについて、サイト内のページを「良好」「改善が必要」「不良」に分類して確認できます。  特定のページだけではなく、サイト内にあるページの状況をまとめて確認したい場合に便利です。

Google Search Console

（３）Converter for Media(WordPressプラグイン）

WordPressを利用している場合は、「Converter for Media」というプラグインを使って、画像をWebPなどの次世代画像形式に変換することもできます。既存の画像をまとめて変換できるほか、新しく追加した画像を自動で変換することも可能です。画像のファイル容量を削減することで、ページ表示速度の改善につながる場合があります。

Converter for Media

（4）LandingHub

Webサイトの表示速度を改善するには、画像やCSS・JavaScriptの最適化、キャッシュやCDNの活用など、複数の施策を組み合わせることが重要です。
一方、自社で一つずつ対応するには専門知識や開発工数が必要です。 表示速度改善ツールのLandingHubなら、タグを1つ設置することで、画像・動画の最適化や次世代フォーマットへの変換、CDN配信など、Webサイトの高速化が可能です。

LandingHub

ページ表示速度は“総合的な対応”がカギ

ここまで見てきたように、「わずか数秒のこと」とページ表示速度を軽んじてしまうと、貴重な顧客を逃したり、機会損失につながってしまうケースもあります。ページ表示速度は専門的な知識を持たなくても改善できますが、個別対応で大きな効果を得るのは難しく、俯瞰的にサイトの状況を見極めた上で総合的な対応が求められます。

また、現在は単純な表示速度だけでなく、Core Web VitalsのLCP・INP・CLSなど、ユーザーが実際にWebサイトを利用した際の体験を含めてパフォーマンスを確認することが重要です。

したがって、ページ表示速度の改善をしたいと思ったら、まずはPageSpeed InsightsやGoogle Search Consoleなどで現状を確認し、どこに問題があるのかを把握したうえで、優先順位をつけて改善していくとよいでしょう。

自社だけでは原因の特定や改善方法の判断が難しい場合は、専門家に相談することも一つの方法です。

アリウープでは、画像ファイル圧縮に特化したサービスやサーバ環境の基盤から対策をする表示速度改善に特化したソリューションをご提案が可能です。シミュレーションなども可能ですので、サイトの表示速度に関する課題について、ご相談をお待ちしております。