あなたのホームページ重くなっていませんか？読み込みの遅さを改善する方法

ホームページの表示速度が遅くてイライラしたことはありませんか？読みたい記事や見たい動画など、自分が目的をもって入ったページでは多少待つことはできるかもしれません。
 
しかし全て表示される前に、他のページに移動することも考えられます。ページの読み込み速度が遅くて重いと、それだけでユーザーにストレスを感じさせ、コンテンツを読む前に離脱してしまう可能性が高くなってしまいます。
 
今回は、ホームページの読み込みの遅さを改善する方法についてわかりやすく解説していきます。
 

ユーザーは読み込みに3秒も待てない！

ホームページの表示速度がユーザーの行動にどう影響するかの調査は、今から20年ほど前にはすでに行われていました。1999年のアメリカの会社が行った調査によれば、ページの表示まで8秒の時間を要すると、ユーザーは待ちきれずに他のページに移動してしまうというものです。
 
「8秒待ってくれるの？」と驚いた方がほとんどでしょう。当時はISDN回線が幅を利かせていた時代で、表示に5秒くらいかかるのは当たり前でした。現在は高速ネットワーク回線の普及に伴って、ページが表示される時間はより短時間になっています。
 

現在のホームページの表示が遅いときの離脱率

現在のユーザーはどれだけ「待っていて」くれるのか。通信速度が高速化し、ユーザーはそのスピードに普段から慣れています。8秒も許容してくれていた待ち時間が、今どれくらいになっているのか見ていきましょう。
 
2014年に挙げられた事例では、表示速度が3秒のホームページは、1秒のホームページに比べ、直帰率が50%上昇するとの調査結果が発表されています。なんと1秒に近い数字まで表示速度を上げないと、半数のユーザーが直帰してしまう結果が出ていたのです。

ここで2017年のGoogleの読み込み時間と離脱率に関する調査報告書について確認しておきましょう。
 

出典：Find out how you stack up to new industry benchmarks for mobile page speed
 
このように読み込み時間が長くなるほど、離脱率が高くなっていることがわかります。そのため、ホームページの表示速度の改善は大事なことであることがわかります。
 

ホームページの表示速度はランキング要素のひとつ

現在、ホームページの表示速度は、検索エンジンのランキング要素の一つです。Googleなどの検索エンジンは、ユーザー体験を向上させるために、表示速度をランキングの基準としています。ただし、Googleの公式見解によってホームページの表示速度は、検索順位を決定する要因としては、非常に小さいものであることがわかっているため、他社よりも少し遅いからといって、大きく順位を下げられるということはなさそうです。
 
しかし、だからといってホームページの表示速度が遅くても問題ないというわけではありません。ページが速く読み込まれるホームページはユーザーにとって快適であるため、検索結果で上位に表示されやすくなることは間違いありません。Googleは特にモバイルユーザーの体験を優先しており、モバイル版のページ速度もランキングに影響を与えるとしています。
 
読み込みが遅いと最初のページだけを見て離脱する率が高まり、結果として検索順位にも悪影響を及ぼす可能性があるため、表示速度を改善することは、SEO（検索エンジン最適化）においても重要な改善とされています。
 

まずは表示速度を測定しよう

それでは、自社のホームページの表示速度をまずは計測してみましょう。
 

Google PageSpeed Insightsの基本的な使い方

Googleの無料ツールである、「Google PageSpeed Insights」を使います。
 

PageSpeed Insights
https://pagespeed.web.dev/
 

 
分析方法は簡単で、表示されたページの入力欄にホームページのURLを入れて、右側にある分析ボタンを押すだけです。
 
 

 
85以上のスコアが出ればパフォーマンスが良いホームページという評価になります。またGoogle PageSpeed Insightsでは、改善方法の提案も表示されます。
その内容は、主にHTML、CSS、JavaScriptの記述を改善する方法、サーバー側の設定でブラウザキャッシュを利用する方法などです。Google PageSpeed Insightsの詳細な使い方については、以下の記事をご参照ください。

・サイトスピード改善で使いたい「PageSpeed Insights」の使い方を解説
https://www.site-shokunin.com/blog/other/6168.html
 

Chrome DevToolsの基本的な使い方

Chrome DevToolsとはGoogle Chrome ブラウザで利用できるツールです。Chromeの右上3点ボタンより、その他のツールをクリックし、デベロッパーツールにアクセスします。もしくは、ブラウザ起動中にF12キーを押すことでもアクセス可能です。
 

 
「DevTools（開発者ツール）」を開いたら、パフォーマンスタブ（上図赤枠①）に移動します。「記録して再読み込み」ボタン（上図赤枠②）を押すと、ページの読み込み中の動作が記録され、読み込みのどこに多くの時間が使われているのかがわかります。
 

 
記録の一部を詳しく見るにはタイムライン（上図赤枠③）をドラッグします。タイムライン上で見たい部分をドラッグして選択すると、その部分を詳細に確認できます。これにより、特定の処理においてどれくらい時間が必要なのかをチェックできます。

選択した時間範囲で発生している処理を円グラフで表示します。たとえば、「レンダリング」はページのレイアウト（見た目の配置）に必要な時間、「スクリプト」はJavaScriptの実行に必要な時間を示します。この情報を使って、ページのどこに改善の余地があるかがわかります。
 

表示速度の低下に起因するものとは

ホームページの表示速度は、ユーザーエクスペリエンスとSEOの両方に大きな影響を与えます。Googleは2010年以降、ページ速度をランキング要因の一つとして考慮しています。2021年には、Core Web Vitalsを含むページエクスペリエンスシグナルがランキング要因として追加されました。
 
次に、表示速度の低下によって発生する影響の主な要因を、インフラとサイトのコンテンツの観点から詳しく説明します。
 

インフラ要因

ネットワークとサーバーのインフラは、ホームページの表示速度に直接的な影響を与えます。主要なインフラ要因は、次のとおりです。
 

【ネットワークの問題】

【サーバーの問題】

【データベースの問題】

ホームページのコンテンツ要因

ホームページのコンテンツも表示速度に大きな影響を与えます。主要なホームページのコンテンツ要因は、次のとおりです。
 

【画像最適化】

【JavaScriptとCSS】

【コード構造】

【プラグインと拡張機能】

SEOへの影響と改善策

ホームページの表示速度はSEOに直接影響を与えます。次に、表示速度がSEOに与える影響と改善策をご説明します。
 

クロール予算の最適化

クロール予算とは、検索エンジンボットが一定期間内にホームページをクロールできるページ数のことです。表示速度が速いサイトでは、検索エンジンボットがより多くのページをクロールできるため、新しいコンテンツや更新されたコンテンツが迅速にインデックスされやすくなります。これにより、ホームページ全体のSEOパフォーマンスが向上します。
ホームページ全体のSEOパフォーマンスは、次の方法で改善できます。
 

ユーザー行動シグナルの向上

表示速度が速いホームページは、ユーザーエクスペリエンスが向上し、直帰率の低下やセッション時間の増加につながります。ポジティブなユーザー行動シグナルは、検索エンジンにホームページの価値を伝え、ランキング向上に寄与します。ユーザー行動シグナルは、次の方法で改善できます。
 

モバイルフレンドリネス

モバイルファーストインデックスにおいて、表示速度は特に重要です。モバイルデバイスからのアクセスが増加している現代において、モバイルユーザーの満足度はサイトの成功に直結します。モバイルフレンドリーなサイトは、ユーザーのエンゲージメントも高めます。モバイルフレンドリネスは、次の方法で改善できます。
 

コンバージョン率の向上

表示速度の改善は、直接的にコンバージョン率の向上につながります。ユーザーは、ページの読み込みが遅いサイトをすぐに離れてしまうことが多く、購入や問い合わせなどのアクションを起こしません。逆に、表示速度が速いホームページは、ユーザーの離脱を防ぎ、より多くのコンバージョンを促します。コンバージョン率は、次の方法で改善できます。
 

 
このように、表示速度の最適化はSEOにおいて非常に重要です。継続的なパフォーマンス監視と改善を行うことで、ホームページの検索ランキングを向上させ、ユーザーエクスペリエンスを高めることができます。
 

専門知識が無くても実施できる、表示速度の改善方法3選

ホームページの表示速度が遅ければ、「このホームページは、壊れているのでは？」とユーザーは思うでしょう。そのような疑いがユーザーの離脱とコンバージョン率の低下につながります。次に、そのような事態に陥らないために、代表的なホームページの表示速度の改善方法についてご説明します。
 

画像を軽量化する

ファイルサイズの大きな画像は読み込みに多くの時間が必要です。無料ツールなどを利用して圧縮し、ファイルサイズを小さくしましょう。なお、ファイルサイズを小さく圧縮してホームページの表示負荷を下げることを“画像を最適化する”といいます。
 
たとえば、無料で画像のファイルサイズを縮小できるサービスを使えば、JPGやPNGファイルなどのファイルサイズを縮小できます。
 
ちなみに、圧縮後は、画質のチェックをしてください。圧縮に失敗すると画質が下がり、掲載できない状態になる可能性がありますので、データをバックアップしながら慎重に進めてください。
 
オンラインで画像ファイルを圧縮するサービスはいくつかありますが、下記のサービスは非常に利用しやすいです。
 
・オンラインイメージ最適化ツールOptimizilla（無料）
https://imagecompressor.com/ja/
 

使用していない外部ファイルを削除する

Webサイトにアクセスする際、外部ファイル（画像・CSS・JavaScriptなど）の数だけ読み込みを行います。つまり、使わないファイルをたくさん読み込んでしまうと、それだけ表示速度が遅くなります。
 
たとえば、使っていない広告はありませんか？リンクされていないページがホームページ内に溜まっていませんか？これらは、使用していない外部ファイルとなって表示速度の低下を招きます。速やかに削除しましょう。
 

ブラウザキャッシュを利用する

一般的に、キャッシュというと、「ブラウザキャッシュ」と「サーバーキャッシュ」に分類されます。ここでご紹介するのは、ブラウザキャッシュです。そもそも、キャッシュとは、ブラウザが1度表示したホームページのデータを保存しておき、再度同じページを表示するときに、以前より早く表示する仕組みのことです。
 
キャッシュを利用すれば、ブラウザからサーバーへのデータ通信はもちろん、サーバーでのファイル作成に必要な手間を省略できます。
 
このとき、ブラウザキャッシュとは、ホームページのブラウザが過去に取得したデータでデバイスに保存されたものをいいます。たとえば、ブラウザで同一のデータの表示が必要になった場合、サーバーにリクエストを送ることなく、ブラウザキャッシュを参照します。
 
本来ならブラウザとサーバーがデータ通信を行うことで表示される仕組みとなっていますが、ブラウザキャッシュがあればサーバーへのデータのリクエストがなくなり、ブラウザキャッシュの情報をデバイスにそのまま表示できます。
 
では、ブラウザキャッシュを利用するには、どうすれば良いのでしょうか？ブラウザのキャッシュは、htaccessファイルにコードを記述することで利用できます。ただし、この作業を実施する場合は、ホームページの管理についての専門的な知識がある方が対応してください。
 

まとめ

ホームページの表示速度を改善する方法はさまざまですが、そのホームページとマッチした対応方法を実施することが大切です。たとえば、たくさんの画像を使用しており、読み込みに多くの時間を必要としているのなら画像を最適化すれば、ホームページの表示速度は大幅に改善されますが、画像ファイルの少ないホームページであれば、大きな効果は期待できないでしょう。
 
逆に、画像ファイルの圧縮よりも無駄なファイルを削除した方が大きく改善されることもありますので、自社のホームページを確認しながら効果のある方法を模索してみましょう。