ホームページの表示速度、遅くないですか？売上に直結する「速さ」の話

この記事を読むと、ホームページが遅くなる3つの原因と、具体的な改善策が分かります。
自分で速度チェックできる無料ツールも紹介しているので、今のサイトの状態をすぐに確認できます。制作会社への依頼を考えている方は、「表示速度まで考慮して作ってくれる会社か」を判断する材料にもなります。

・自社のホームページ、なんか重い気がする
・制作会社に作ってもらったのに、スマホで開くと遅い
・表示速度が大事って聞くけど、何をすればいいか分からない

Googleの調査によると、ページの表示に3秒以上かかると、訪問者の53%がそのまま離脱するとされています。せっかく広告やSEOでお客様を呼び込んでも、ページが表示される前に帰ってしまうのでは意味がありません。

しかも、Googleは表示速度を検索順位の判断材料にしているため、遅いサイトはSEOでも不利です。

※この記事は「自社サイトの裏側を公開」シリーズの第4回（最終回）です。
第1回：ホームページは「作って終わり」じゃない！成果を出すサイト設計の考え方
第2回：Googleに見つけてもらうための5つのSEO設定
第3回：中小企業のホームページが狙われる？5つのセキュリティ対策

表示速度が遅い原因トップ3

ホームページの表示が遅くなる原因は、主に以下の3つです。

原因1：画像のサイズが大きすぎる

最も多い原因がこれです。スマートフォンで撮影した写真をそのまま使うと、1枚で数MBになることもあります。ホームページに適した形式・サイズに変換するだけで、表示速度が大きく改善します。

原因2：使っていないプログラムが裏で動いている

テンプレートやプラグイン（追加機能）をたくさん入れると、使っていない機能のプログラムまで毎回読み込まれ、サイトがどんどん重くなります。

原因3：外部サーバーへの接続が多い

Googleフォント、SNSのボタン、広告など、外部のサーバーからデータを取得している場合、そのサーバーの応答を待つ時間がかかります。

当サイトが実践している4つの高速化テクニック

当サイトでは、表示速度を改善するために以下の4つの施策を実施しています。

改善策①：画像を徹底的に軽くする

当サイトでは、以下の方法で画像を最適化しています。

• WebP（ウェッピー）形式を採用 — 従来のJPEGやPNGより30〜50%軽い、Googleが推奨する画像形式。同じ見た目のまま、ファイルサイズを大幅に削減
• 必要になるまで画像を読み込まない（遅延読み込み） — 画面をスクロールして表示エリアに入ったときに初めて画像を読み込む仕組み。最初の表示を速くする効果があります
• 最初に目に入る画像は優先的に読み込む — サイトを開いたときに最初に見える画像（ヒーロー画像）だけは、遅延させずに最優先で読み込む設定にしています
• 画像のサイズを事前に指定 — すべての画像に幅と高さを指定し、読み込み中にレイアウトがガタガタ動く現象（CLS：レイアウトシフト）を防止

改善策②：フォント（文字のデザイン）を自社サーバーに置く

多くのホームページでは、おしゃれな文字デザイン（Webフォント）をGoogleのサーバーから読み込んでいます。

しかし、この方法だと毎回Googleのサーバーに接続する時間がかかります。

当サイトでは、フォントのファイルを自社のサーバー内に置くことで、外部通信を削減。さらに、フォントの読み込みがテキストの表示を遅らせないよう、特殊な方法で読み込んでいます。

改善策③：必要なものだけを読み込む

テンプレートをそのまま使うと、すべてのページで同じプログラムが読み込まれます。しかし、実際に必要なのは一部のページだけということが多いです。

当サイトでは：

• お問い合わせフォームのプログラム → お問い合わせページでだけ読み込み、他のページでは無効化
• WordPress標準の絵文字用プログラム → 日本語サイトでは不要なので無効化
• 中身が空のCSSファイル → 読み込まないよう制御（テンプレートによっては「空のファイル」を読み込む無駄が発生します）

細かいことですが、こうした最適化の積み重ねが体感できるレベルの速度改善につながります。

改善策④：リピーターの表示速度を劇的に速くする

一度サイトを訪問すると、画像やプログラムのデータがブラウザに保存されます。これを「キャッシュ」と呼びます。

当サイトでは、キャッシュの保存期間を適切に長く設定しています。これにより、2回目以降の訪問では、サーバーからデータを取り直す必要がなく、ほぼ一瞬でページが表示されます。

誰にでも使いやすいサイトへの配慮

当サイトでは、速さだけでなく「誰でも使いやすいサイト」も意識しています。

• キーボードだけでも操作できる設計 — マウスが使えない方でも、すべてのリンクやボタンにアクセス可能
• 音声読み上げソフトへの対応 — 画面を見ることが難しい方のために、ナビゲーションやボタンに適切なラベルを設定
• すべての画像に説明文を設定 — 画像が表示されない場合でも、内容が伝わるように

こうした配慮は、Googleの評価にもプラスに働くことが知られています。

まずは自社サイトの速度を測ってみましょう

Googleが提供する無料ツール「PageSpeed Insights」で、あなたのサイトの速度を今すぐチェックできます。

使い方は簡単。自社サイトのURLを入力するだけで、100点満点のスコアと改善ポイントが表示されます。

ちなみに、当サイトのスコアは…

この記事でご紹介した施策をすべて実施した結果、当サイトのPageSpeed Insightsスコアは以下のとおりです。

パフォーマンス・ユーザー補助・おすすめの方法・SEOの4項目すべてが100点です。PC・モバイル両方でオール100を出しているサイトは多くありません。

これが、この記事でご紹介した施策を一つひとつ積み重ねた結果です。

シリーズまとめ：成果を出すホームページに必要な4つの要素

全4回のシリーズでご紹介した内容をまとめます。

これらの施策は、特別な機材やサービスが必要なものではありません。しかし、一つひとつ丁寧に実装するには専門的な知識と経験が必要です。

自分で改善したい方へ

PageSpeed Insightsでスコアが表示されたら、まずは「改善できる項目」の一覧を見てみてください。「画像のサイズを小さくする」「使っていないコードを削除する」など、具体的な改善ポイントが表示されます。自分で対応できる項目がきっと見つかります。

プロに相談したい方へ

「スコアは見たけど、何をすればいいか分からない」「制作会社に速度改善を頼みたいが、費用感が分からない」という方は、お気軽にご相談ください。スコアの読み方から具体的な改善策まで、分かりやすくご説明いたします。

私たち株式会社grandiosoは、兵庫県伊丹市を拠点に関西エリアの中小企業・個人事業主の皆さまにホームページ制作やシステム開発をご提供しています。
全4回でご紹介した施策は、すべて当サイトで実際に運用しているものです。
「ここまでやってくれる会社かどうか」を見極める基準として、このシリーズをお役立てください。
相談は無料ですので、お気軽にお問い合わせください。