ホームページの表示速度が遅い原因と改善｜福岡の制作会社が解説

ホームページの「表示速度が遅い」と言われても、多くの場合サイトを作り直す必要はありません。PageSpeedの点数が低く出る原因の多くは、ヒーロー画像の二重読み込みや、使っていないアイコンフォント・計測タグの読み込み順といった「直せる箇所」です。当社が実際にスコアを60→89・46→91へ上げた手順と、点数の正しい読み方を実測で解説します。

PageSpeedの点数が低いと、作り直しが必要ですか？

いいえ。点数が低い＝作り直し、ではありません。PageSpeed Insights（PSI）のスコアは「今のページのどこが重いか」を示す診断で、多くは画像とスクリプトの読み込み方を直せば上がります。実際に当社は既存ページのまま、HTMLの構造や読み込み順だけを変えてモバイルスコアを60→89、別ページを46→91まで改善しました（いずれも後述・実測）。

持ち帰り: 「スコアが低い＝サイトが古い・作り直すべき」という営業トークを鵜呑みにしない。まずPSIのレポートで「どのファイルが初期表示を遅らせているか」を1つずつ見る。

なぜ点数が低いのに、実際は速く感じるのか？

PSIのスコア、特にLCP（最大コンテンツの描画時間）は、低速な4G回線とCPU4倍遅を想定した「シミュレーション値」です。サーバーの実際の応答や最初の描画が速くても、シミュレーション上の数字だけが大きく膨らむことがあります。

当社コーポレートトップの実測例（2026-10-19 PSI）を正直に出します。

サーバーは47msで応答し、最初の描画も1.5秒で終わっているのに、LCPだけが9.5秒と出ています。これはPSIが「低速回線で読み直したら」と仮定して計算しているためで、改修前の計測でもシミュレーション10,613msに対し実測トレースは2,355msでした（約4.5倍の乖離）。

持ち帰り: スコアの数字1つで一喜一憂しない。TTFB・FCP・CLSが良いのにLCPだけ悪いときは、回線シミュレーションの影響が大きい。実ユーザーの体感はChrome UX Report（CrUX）のフィールド値で見るのが本来だが、アクセスが一定数ないサイトはCrUXにデータが溜まらず、この確認自体ができない点も正直な限界として押さえておく。

表示速度を上げるには、まず何をすればいいですか？

優先順位は「初期表示の前に読まれている、重いファイルを減らす」です。PSIのLCPは、実測の初期表示までに読み終わったファイルをすべて表示の依存とみなすため、初期表示前に重いものを読むほど雪だるま式に悪化します。当社で実際に効いた3つを、実物つきで示します。

1. ヒーロー画像を二重にダウンロードしない

スマホ用とPC用の画像を `` を2つ置き、CSSの `display:none` で出し分けるのは最悪手です。非表示側の画像もブラウザはダウンロードします。 両方に `fetchpriority=”high”` が付いていると、本物のLCP画像と帯域を奪い合い、LCPを直接悪化させます。

<!-- 悪い例: 2つの<picture>をCSSで出し分け（非表示側もDLされる） -->
<picture class="pc_none"><img src="sp.webp" fetchpriority="high"></picture>
<picture class="sp_none"><img src="pc.webp" fetchpriority="high"></picture>

<!-- 良い例: <picture>は1つ、<source media>で出し分け・width/height付与 -->
<picture>
  <source media="(max-width:767px)" srcset="sp.webp" width="375" height="382">
  <source media="(min-width:768px)" srcset="pc.webp" width="1920" height="588">
  <img src="pc.webp" width="1920" height="588" fetchpriority="high" alt="見出し画像">
</picture>

`` にも `width`/`height` を付けると、選ばれた画像のアスペクト比からブラウザが場所を先に確保するため、CLS（レイアウトのズレ）も抑えられます。

実証（2026-08-14 コーポレートトップ・実測）

2. アイコンフォントは「使う分だけ」読み込む

Googleのアイコンフォント（Material Symbols）を全部入りで読み込むと、それだけで367KBになります。実際に表示に使うアイコンだけを `icon_names`（アルファベット順）で指定すると、367KB→1.5KBまで落ちます。

# 全部入り（約367KB）
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined

# 使う分だけ（約1.5KB）
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&icon_names=check,close,menu

3. 計測タグ・reCAPTCHAは初期表示の後に遅延読み込みする

reCAPTCHAは本体だけで約347KBを3回読み込むことがあり、フォームが画面下にしかないのに初期表示前に読み込まれると、LCPを大きく押し下げます。初期表示の後に遅延読み込みへ回すだけで体感も数字も改善します。

実証（2026-10-02 AEO対策LP・実測）: このページは初期表示までの2.4秒の間にreCAPTCHA本体（347KB×3）とアイコンフォント367KB・飾り背景176KBを読んでおり、PSIはFCP 8.7秒・LCP 11.8〜14.6秒・46〜55点でした。上記3手（アイコンフォントの絞り込み・背景を176KB→40KBへ縮小/低画質化・reCAPTCHAの遅延読み込み）で91点・LCP 2.8秒まで改善しました。

持ち帰り: 「画像を軽くする」の前に、まず「初期表示の前に何を読んでいるか」をPSIの `network-requests` で確認する。重い3rdパーティ（計測タグ・reCAPTCHA・アイコンフォント）を初期表示の後ろへ回すのが、最も費用対効果が高い。

スコアは一度上げれば維持されますか？

いいえ。ページに機能（新しいフォーム・計測タグ・バナー）を足すたびに数字は動きます。前述のとおり当社トップも一度89点まで上げましたが、その後の計測では63点と出ることもあります。だからこそ定点観測が要ります。当社は週1回（毎週月曜）、主要ページのPSIを自動計測し、目標を割った時点で改善タスクを起票しています。

持ち帰り: 公開時に1回測って終わりにしない。月1回でもよいので同じURLを定点で測り、スコアが落ちたら「直近で何を足したか」から疑う。

よくある質問

まとめ

PageSpeedの点数が低くても、慌ててサイトを作り直す必要はありません。多くは「初期表示の前に重いものを読んでいる」ことが原因で、ヒーロー画像・アイコンフォント・計測タグの3点を直せば、既存ページのまま大きく改善できます。福岡でホームページの表示速度や制作・運用にお困りの方は、お問い合わせからお気軽にご相談ください。関連記事は制作ノウハウ一覧に、AI検索対策についてはAEO対策サービスにまとめています。