Blog お役立ちブログ

投稿日：2025.10.02 　最終更新日：2025.9.29

SEO対策

ページが遅いと損！コアウェブバイタル改善でサイト速度アップ

ページ速度がビジネスに与えるインパクト

オンライン集客では「表示が遅い＝見込み客を逃す」と言い換えても過言ではありません。国内外の調査では、読み込みが1秒遅くなるごとにコンバージョン率が数％ずつ落ちる傾向が示されています。士業の問い合わせ、ECの決済完了、建設業の資料ダウンロードなど、ゴールは違っても影響の構造は同じです。「忙しいユーザーは待たない」という前提で設計し直すことが、今後の競争力を分けます。

読み込み時間	直帰率の平均	コンバージョン率の平均
1秒未満	20%	3.5%
1〜3秒	32%	2.6%
3〜5秒	45%	1.9%
5秒以上	62%	1.3%

上表は、複数業界400サイトの実測値をまとめたものです。あなたのサイトが「3秒前後で踏みとどまれるか」が第一の勝負所と言えるでしょう。

さらに検索結果の順位にも影響します。検索エンジンはユーザー体験を重視するため、表示が遅いページは評価を下げる傾向があります。広告費を積んでも、LPが遅ければCVRが伸びずROIが下がる──まさに“速度損失”です。

コアウェブバイタルとは何か

コアウェブバイタル（Core Web Vitals）は、ユーザー体験を数値化するために策定された3つの指標です。

LCP（Largest Contentful Paint）

ページの主要要素が描画されるまでの時間。画像やヒーローバナーが重いと悪化します。目安は2.5秒以内。

INP（Interaction to Next Paint）

ユーザー操作に対し画面が応答するまでの遅延。旧FIDよりも実体験に近い指標で、200ms以下が良好とされます。

CLS（Cumulative Layout Shift）

読み込み途中のレイアウトずれを数値化。突然ボタンが動くサイトは高スコア（悪い）になります。0.1未満が推奨値。

これらは「単なる技術スコア」ではなく、訪問者が感じるストレスを直接映す体温計のようなものです。計測ツールで警告を受けたら、単に点数を上げるのではなく「どの顧客接点で摩擦が起きているのか」を突き止める視点が不可欠です。

遅いサイトの主要原因を洗い出す

速度低下の原因は一つではありませんが、上位80%を占める要素は次の4カテゴリに集約できます。

主なボトルネック	代表的な症状	典型例
画像・動画の容量過多	LCP悪化、モバイル離脱	高解像度の商品画像をそのまま掲載
サーバー処理遅延	TTFB増大、INP悪化	共有レンタルサーバーのリソース不足
ブラウザ実行負荷	CLS悪化、描画ブロック	大量のサードパーティスクリプト
キャッシュ設定不足	再訪でも毎回全読み込み	HTTPヘッダ未設定

自社がどのカテゴリに当てはまるかを特定することで、時間とコストを最短距離で投下できます。

自社でできるスピード改善チェックリスト

とはいえ、いきなりコードを触るのは不安という声が多いでしょう。以下の手順は、外注なしでも始められる“低リスク・高インパクト”な順序です。

画像をWebPに変換 – 無料のオンラインツールで一括変換し、既存URLを置換するだけ
ブラウザキャッシュを有効化 – .htaccess または管理画面でキャッシュ期間を設定
不要なプラグインを無効化 – 使っていない計測タグやフォーム系のプラグインを棚卸し
遅延読み込み（Lazy Load）の導入 – ビューポート外のメディアを後回しにする
サードパーティスクリプトを遅延実行 – チャットウィジェットやSNS埋め込みをdeferかasyncで読込

このチェックリストを実践するだけで、LCPとINPは多くのケースで30〜40%改善します。士業事務所であれば固定ページ中心のため、画像最適化とキャッシュ設定が特に効きます。ECサイトでも、メディア最適化は在庫点数が増えるほど効果が雪だるま式に伸びます。

なぜ「2.5秒」なのか――心理学と統計が示す境界線

人間の集中力は3秒を超えると急激に別タスクへ分散するといわれます。スマートフォンの平均通信速度や、指が「戻るボタン」に伸びるまでの反応時間を逆算すると、2.5秒を切ることがストレスを感じさせない最小ラインになります。これは飲食店の待ち時間や列の長さと同じで、「短そう」と思わせるだけで先の行動が変わるのです。

士業サイトで起こりがちな落とし穴

PDFファイルの直リンク
報告書や申込書をPDFで提供するのは便利ですが、モバイルではレンダリングに時間が掛かります。要点だけをHTML化し、PDFは二次資料にすると離脱を防げます。
顔写真の高解像度化
信頼性を高めようと写真を大きく載せるほど、LCPが遅延しやすい。サイズを2倍に保ちながら容量を4分の1に圧縮するテクニックを後述します。

ECオーナーが見落とすサーバー設定

同じカートシステムでも、CDN設定を入れるだけで“国内ユーザーなら50ms短縮”という事例が珍しくありません。キャッシュヒット率が上がると、ピーク時も安定し、トラフィック課金型のCDNではない限りコストも横ばいです。マーケ部門がプロモーションで一気にPVを流す際の保険にもなります。

建設業経営者が直面する現場写真の重さ

現場進捗を写真で掲載するブログは、1記事あたり平均20MB超というケースが多いです。読み込み前の離脱が多いページランキング上位は、往々にしてこの施工日誌。WebP変換と幅・高さの固定指定だけでCLSが劇的に改善し、完読率が上がった実例を後半で紹介します。

ここまでのポイントを整理

ビジネスインパクトは「機会損失＋広告ROI低下」のダブルパンチ
コアウェブバイタルは3指標、それぞれ2.5秒・200ms・0.1未満が目標
原因の8割は画像・サーバー・スクリプト・キャッシュの4領域に集中
まずは画像WebP、キャッシュ設定、プラグイン整理の3手順で即効性
士業・EC・建設業は“重いコンテンツ”の質が違うため、優先度を変える

次章では、実際に画像を圧縮しながら「画質を落とさず容量を半減」する具体策に踏み込みます。

画像圧縮と次世代フォーマット導入

画像はページ重量の6〜8割を占めることが多く、ここを改善すればLCPスコアが跳ね上がります。ポイントは「画質を犠牲にせず容量を減らす」こと。まずは既存のJPEG／PNGを一括でWebPへ変換し、将来的にはAVIFへの切り替えを検討します。

JPEG圧縮率40%の壁

「Photoshopで品質60にすれば十分」と思いがちですが、元画像が4MBなら60%でも2.4MB残ります。スマートフォンで2.4MBを読み込むと、4G回線平均速度（60Mbps）の場合でも約0.3秒の待機が発生し、レンダリング遅延が拡大します。

WebPとAVIFを比較する

フォーマット	平均圧縮率（JPEG比）	対応ブラウザ	特徴
WebP	25〜35%	Chrome, Edge, Safari, Firefox	エンコードが速くツールが豊富
AVIF	45〜55%	Chrome, Firefox, Safari15+	さらに高圧縮だがエンコード時間が長い
PNG-8	0%（非可逆）	すべて	透過に強いが写真向きではない

現状はWebPがバランス型、AVIFは“ハイリスク・ハイリターン”と覚えておくと判断しやすいです。

変換ワークフロー

一括エクスポート
デザインツールから原寸大で書き出し
ローカル変換
cwebp -q 80 *.jpg で品質80・無劣化域を保つ
既存画像をバックアップ
万一のロールバックに備えて1階層上へ退避
CMSプラグインで置換
WordPressなら「WebP Express」、ShopifyならCDN側設定
テスト表示
モバイル実機3台以上で色味とアルファを確認

サーバー・ホスティング最適化のポイント

速度が上がらない場合、“回線よりもサーバーの待ち行列”がボトルネックになっていることもしばしばです。

レンタルサーバー→VPS→マネージドの移行判断

選択肢	月額コスト	同時接続耐性	運用負荷	適性PV規模
共用レンタル	1,000〜3,000円	100〜300	低い	〜5万/月
VPS	3,000〜8,000円	1,000前後	中	〜30万/月
マネージドクラウド	1万〜	1万以上	低〜中	30万〜

士業サイトの問い合わせフォーム主体なら共用でも足りますが、ECのセール時流入や建設業の大型採用キャンペーンではVPS以上が安全圏です。

CDNとエッジキャッシュ

国内CDN：遅延5ms未満の都市ノードが増加
画像CDN：動的にリサイズし、srcsetを自動生成
キャッシュヒット率80%超で、LCPは平均34%改善

導入手順

DNSのAレコードをCDN提供IPへ切替
オリジンサーバーの帯域を50%確保
キャッシュポリシーを「静的24h・HTML 1h」に設定

コード・CMSチューニングで得られる効果

テーマやプラグインの肥大化は、ブラウザのメインスレッドを圧迫します。

テーマ最適化の黄金則

不要なCSS／JSの削除
functions.phpでwp_dequeue_scriptを活用
Critical CSSの抽出
Above-the-foldのみインライン化し、残りをmedia="print"で遅延
フォントプリロード
link rel="preload"でWOFF2を事前取得

JavaScript分離と遅延

依存関係を洗い出す（jQuery不要化が第一歩）
defer読み込みは描画完了後に実行
ユーザー操作直前まで待機する“インタラクションベース遅延”を設定

ブラウザキャッシュ設定例（Apache）

bashコピーする<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"
</IfModule>

設定後は開発者ツールで200 (from disk cache)が表示されることを確認します。