結論:まず「何が遅くしているか」を測ってから直すのが近道です。
- 当サイトでは、遅さの原因の大半が日本語の書体(Webフォント)でした。見出しだけに使い、表示を止めている読み込みも減らして、表示の速さが 62点 → 98点 になりました。
- 写真の多いサイトでは画像の重さ、古いサイトでは読み込むファイルの多さが原因になりやすいです。
- 点数そのものより、スマホで最初に表示されるまでの時間を短くすることを目標にしましょう。
あなたのホームページの速さも、URLを入れるだけで測れます。
無料ホームページ診断を使う →表示の速さが大切な理由
- 待たされると閉じられる:スマホでは、表示が遅いページはすぐに閉じられがちです。せっかく検索や SNS から来てくれた人を逃してしまいます。
- 検索での評価にも関わる:Google は、表示の速さや使い心地(Core Web Vitals)を評価の要素のひとつにしています。ただし、速いだけで上位に表示されるわけではありません。
- 自分の端末では気づきにくい:作った人やお店の人は、何度も開いているのでキャッシュが効いて速く感じます。初めて訪れる人のスマホでは、もっと遅いことがあります。
まずは測る
速さは「なんとなく遅い」ではなく、数字で測ってから直すのが近道です。Google の PageSpeed Insights、またはそれをやさしく説明する当サイトの無料ホームページ診断で、スマホでの状態を測れます。
見ておきたい数字は、次の2つです。
実例:当サイトの改善(62点→98点)
このサイト(yk-planning.jp)を診断したところ、総合では良い評価だったものの、表示の速さが62点で、スマホで最初に表示されるまで約6秒かかっていました。そこから、次の順で直しました。
1. 原因を調べる:日本語の書体が全体の8割以上
読み込んでいるファイルを調べると、ページ全体の約790KBのうち、日本語のWebフォントだけで約660KB(67個のファイル)ありました。日本語の書体は漢字の数が多いため、何十個ものファイルに分けて配られます。さらに太さを3種類読み込んでいたので、とても重くなっていました。
2. 書体を見出しだけにする
見出しとロゴは今までの書体のまま(太字だけ)にし、本文はスマホやパソコンに最初から入っている書体を使うようにしました。見た目の印象はほとんど変わらず、書体のファイルは約660KB → 約209KBに減りました。
3. 表示を止めている読み込みを減らす
書体の設定ファイルを、表示を始めてから読み込むようにしました。また、デザインの設定ファイル(CSS)を取りに行く往復をなくすため、公開するときに中身をページの中へ直接書き込む仕組みにしました(表示を止めている読み込み)。
| 項目 | 改善前 | 書体を見出しだけに(手順2) | 読み込みを減らす(手順3) |
|---|---|---|---|
| 表示の速さ(点数) | 62点 | 82点 | 98点 |
| 最初に表示されるまで(自動テスト) | 6.2秒 | 3.6秒 | 1.8秒 |
| 書体のファイル | 67個・約660KB | 19個・約209KB | 19個・約209KB |
| 見やすさ・安全性・検索エンジン対策 | 94・100・100 | 100・100・100 | 100・100・100 |
いちばん効いたのは、日本語の書体を見出しだけにしたこと(手順2)と、デザインの設定ファイルをページに直接書き込んだこと(手順3)でした。手順3は、ファイルを1つ取りに行く往復をなくすだけの小さな変更ですが、最初の表示がさらに約半分になりました。
よくある原因と直し方
| 原因 | よくある例 | 直し方 |
|---|---|---|
| 画像が重い | スマホで撮った写真をそのまま載せている(1枚で数MB) | 表示する大きさに縮小し、圧縮する。WebP などの軽い形式にする(画像の最適化) |
| 画面の外の画像まで最初に読み込む | ギャラリーや実績の写真がたくさん並ぶページ | 画面に近づいてから読み込む(遅延読み込み) |
| 日本語のWebフォント | 本文まで凝った書体にしている、太さを何種類も読み込んでいる | 見出しだけに使う、太さの種類を減らす |
| 表示を止めている読み込み | デザインや機能のファイルが何十個もある | まとめる、後から読み込む、必要なものだけページに直接書く |
| 外部のサービスが多い | SNS の埋め込み、チャット、広告、アクセス解析をいくつも入れている | 本当に使っているものだけ残す |
| サーバーの返事が遅い | 安いサーバーで、ページを毎回作っている | CDN を使う、ページを作り置きする(サーバーの応答時間) |
制作会社に相談するときのポイント
- 無料ホームページ診断や PageSpeed Insights の結果(スクリーンショット)を見せる
- 「どこが一番遅くしているか」「直すと何秒くらい変わるか」を聞く
- 見た目がどのくらい変わるか(書体・画像の画質など)を先に確認する
- 直したあとに、もう一度測って比べてもらう
YKプランニングでは、診断結果の見方から、見た目を保ったまま速くする方法のご提案まで、専門用語を使わずにご説明します。お気軽にご相談ください。
まずは、今の速さを測ってみませんか。
無料ホームページ診断を使う →