― 速度対策は専門的に見えるが、効く箇所は限られている。上位 3 つで大半が片付く。
§ 01 / 遅いサイトが失っているもの
表示に 1 秒余計にかかると、離脱は目に見えて増えます。損失は 3 方向に出ます。
- 直帰の増加 … スマホで 3 秒待たされると、かなりの割合が戻る
- 検索順位 … Google は表示速度(Core Web Vitals)を評価に含めている
- 広告費の無駄 … 広告でクリックを買っても、表示前に離脱すれば費用だけが出ていく
とくに広告を出している場合、速度改善はそのまま広告費の効率改善になります。
§ 02 / 見るのは 3 つの指標だけ
Core Web Vitals には複数の指標がありますが、実務では次の 3 つで足ります。
| 指標 | 意味 | 目標 |
|---|---|---|
| LCP | 主要な要素が表示されるまで | 2.5 秒以内 |
| INP | 操作してから反応するまで | 200ms 以内 |
| CLS | 表示中のガタつき | 0.1 未満 |
計測は Google の PageSpeed Insights で十分です。ただしモバイルのスコアを見てください。PC のスコアだけ見て安心しているケースが多いですが、訪問者の大半はスマホです。
§ 03 / 効く対策は、ほぼ画像
中小企業のサイトが遅い原因は、9 割方が画像です。
- サイズが大きすぎる … 3000px の写真をそのまま載せている。表示幅に合わせて縮小する
- 形式が古い … JPEG / PNG を WebP に変えるだけで、半分以下になることが多い
- 全部を最初に読み込んでいる … 画面外の画像は遅延読み込み(lazy loading)にする
- サイズ指定がない … 幅・高さを書いていないと、読み込み時にレイアウトがガタつく(CLS 悪化)
この 4 点だけで、多くのサイトは目標値に入ります。難しい技術は要りません。
§ 04 / 次に効くのが、フォントとスクリプト
- Web フォント … 日本語フォントは重い。使う書体を絞り、表示中に本文が消えない設定にする
- タグの入れすぎ … 解析タグ、チャット、SNS 埋め込み、ヒートマップ。使っていないタグを消すだけで速くなる
- 外部ツール … 予約システムやチャットの埋め込みは、必要なページだけに置く
「昔入れたが、今は誰も見ていないタグ」は、驚くほど残っています。棚卸しは年 1 回で十分です。
§ 05 / 外注するときに、そのまま渡せる依頼内容
制作会社に依頼するときは、以下をそのまま伝えれば話が早いです。
- モバイルの LCP を 2.5 秒以内にしたい
- 画像は WebP 化と、表示幅に合わせたリサイズをお願いしたい
- 画面外の画像は遅延読み込みにしてほしい
- すべての画像に width / height を指定してほしい
- 使っていない計測タグを棚卸しして削ってほしい
「なんとなく速くして」だと見積もりが出ません。具体的に指定すれば、費用も工期も明確になります。
§ 06 / A.I.M の考え方
A.I.M はサイト制作の段階から、表示速度を前提に設計します。画像の最適化、フォントの絞り込み、不要なスクリプトの排除は、後付けの改善ではなく初期構築に含めるべき項目だと考えているためです。既存サイトについても、まず計測してどこにどれだけの改善余地があるかをお出しするところからご相談いただけます。
関連サービス: HP・LP・EC制作 / システム受託開発 / お問い合わせ
