BtoBホームページの表示速度改善ガイド2026：コアウェブバイタル対策と問い合わせへの影響

「サイトが重い（表示が遅い）」と感じたことがあれば、それは問い合わせの機会を失い続けているサインです。表示速度はSEO順位だけでなく、直接的にCVR（問い合わせ率）にも影響します。Googleの調査によれば、ページの読み込みが1秒から3秒に遅くなると、直帰率は32%増加するとされています（Google/SOASTA Research, 2017）。製造業・建設業のBtoBサイトには古いシステムで構築されたものが多く、表示速度の問題を抱えているケースが非常に多く見られます。本記事では、コアウェブバイタル（Core Web Vitals）の基礎から、今日から実施できる具体的な改善手順まで解説します。

1. 表示速度がCVRに与える影響：数字で理解する

「表示速度は大事」という話は聞いたことがあっても、BtoBサイトでどの程度の影響があるか具体的に把握している方は多くありません。

1秒遅延でどれくらいCVRが下がるのか

Googleの調査データによれば、モバイルページの読み込み速度が1秒から10秒に遅くなると、直帰率（すぐにページを離れる割合）は123%増加します。また、Portentの調査では、ページロード時間が1秒から4秒になるとコンバージョン率が約65%低下するという結果が示されています。

BtoBサイトでもこの傾向は同様で、調達担当者が複数のサプライヤーを比較する際に「重くて使いにくいサイト」は早期に候補から外れます。「技術的に信頼できる会社かどうか」という第一印象にも影響するため、製造業BtoBでは特に表示速度が信頼性評価に直結します。

SEO順位への影響

Googleは2021年からコアウェブバイタルを正式なランキング要因の一つとして採用しています。同等のコンテンツ品質・被リンク数を持つ2サイトを比較した場合、コアウェブバイタルのスコアが良い方が有利に評価されます。製造業BtoBのような競合が少ない市場では、表示速度の改善だけで順位が上がるケースも珍しくありません。

2. コアウェブバイタルの3指標：LCP・INP・CLS

コアウェブバイタル（Core Web Vitals）は、Googleがユーザー体験を測定するために設定した3つの指標です。それぞれの意味と目標値を理解することが改善の出発点です。

LCP（Largest Contentful Paint）：最大コンテンツ描画

ページ読み込み開始から、最も大きなコンテンツ要素（画像・見出しテキスト等）が表示されるまでの時間です。製造業サイトでは通常、ファーストビューの大きな製品写真やバナー画像がLCPの対象要素になります。

• 良好：2.5秒以内
• 改善が必要：2.5〜4秒
• 不良：4秒超

INP（Interaction to Next Paint）：インタラクション応答性

ユーザーがクリック・タップ・キーボード入力をした際に、ページが視覚的に反応するまでの時間です。2024年3月にFID（First Input Delay）から置き換えられた新しい指標です。製造業サイトでは問い合わせフォームの入力時や、ナビゲーションメニューのクリック時がINPの計測対象になります。

• 良好：200ミリ秒以内
• 改善が必要：200〜500ミリ秒
• 不良：500ミリ秒超

CLS（Cumulative Layout Shift）：累積レイアウトシフト

ページ読み込み中にコンテンツが予期せず動く量を数値化したものです。「画像が遅れて読み込まれて文字が下にずれる」「フォントが後から変わって文章がジャンプする」といった現象がCLSを悪化させます。値は0〜1の範囲で、低いほど良好です。

• 良好：0.1以下
• 改善が必要：0.1〜0.25
• 不良：0.25超

3. 製造業サイトで頻発するLCP問題と改善手順

LCPの改善は、製造業BtoBサイトで最もコストパフォーマンスの高い改善施策です。主な原因と対処方法を解説します。

問題①：ファーストビューの大きな画像が最適化されていない

製造業サイトのトップページには、工場や製品の大きな写真がよく使われます。これらが未最適化（JPEG高品質・PNG等）の場合、LCPが大幅に悪化します。

対処方法：

• ファーストビューの主要画像をWebP形式に変換する（ファイルサイズを30〜50%削減）
• 画像に loading="eager" と fetchpriority="high" 属性を追加し、優先的に読み込ませる
• 画像サイズを表示サイズに合わせてリサイズする（横幅1920px以上の画像を1280px表示している場合など）

問題②：ファーストビュー外の画像が先に読み込まれている

ページ下部の製品ギャラリーや実績写真を、ファーストビューの画像と同じタイミングで読み込んでいる場合、LCPに必要な帯域幅が分散されます。

対処方法：ファーストビュー外のすべての画像に loading="lazy"（遅延読み込み）を追加します。これだけでLCPが1〜2秒改善するケースがあります。

問題③：レンタルサーバーの応答速度が遅い

低価格の共用レンタルサーバーを使っている場合、サーバー応答時間（TTFB：Time To First Byte）が遅く、それだけでLCPが悪化します。

対処方法：サーバー応答時間が600ミリ秒以上の場合は、より高速なサーバーへの移行またはCDN（コンテンツデリバリーネットワーク）の導入を検討します。Cloudflare（無料プラン）を導入するだけで応答速度が改善するケースがあります。

4. INP・CLSの改善ポイント

LCPの次に取り組むべきINPとCLSの改善方法を解説します。

INP改善：JavaScriptの実行量を減らす

INPが悪化する主な原因はメインスレッドをブロックする重いJavaScriptです。製造業サイトでは「問い合わせフォームのバリデーション処理」「スライダー・カルーセルのライブラリ」「チャットボットウィジェット」などが原因になりやすいです。

• 使用していないJavaScriptファイルの削除
• スライダーライブラリをCSS onlyのシンプルな実装に置き換える
• サードパーティスクリプト（チャット・分析ツール）は非同期（async/defer）で読み込む

CLS改善：画像・フォントの読み込み前にスペースを確保する

CLSの最大の原因は「画像の寸法（width/height属性）が指定されていない」ことです。ブラウザは画像サイズが不明な状態ではレイアウトを確定できず、画像が読み込まれたタイミングでコンテンツが移動します。

• 全画像に width と height 属性を明示的に指定する
• Webフォント読み込み時の文字のずれを防ぐため、font-display: swap を設定する
• 動的に挿入されるバナー・広告・通知バーは、ページ読み込み時に必要なスペースを事前に確保する

5. 画像最適化の実践手順：製造業サイトで最も効果的な施策

製造業サイトは製品写真・工場写真・施工実績写真など画像が多いため、画像最適化がページ速度改善に最も直結します。具体的な手順を解説します。

ステップ①：現状の画像ファイルサイズを把握する

Chrome DevToolsの「Network」タブで画像ファイルのサイズを確認します。100KB以上の画像がファーストビューにある場合は優先的に最適化が必要です。

ステップ②：WebP形式に変換する

WebPはJPEGより25〜35%、PNGより26%程度ファイルサイズが小さくなります。Squoosh（squoosh.app）を使えばブラウザ上で無料変換できます。変換後は <picture> 要素でWebPに対応していないブラウザへのフォールバックを設定します。

ステップ③：表示サイズに合わせてリサイズする

横幅800pxで表示する画像に2400px幅の画像を使うのは無駄です。表示サイズの2倍（Retinaディスプレイ対応）を上限としてリサイズします。WordPressを使っている場合は「メディア設定」で最大アップロードサイズを制限することも有効です。

6. キャッシュ設定とフォント最適化

画像最適化の次に効果的な施策がキャッシュ設定とフォント最適化です。

ブラウザキャッシュの設定

一度訪問したユーザーが2回目以降にサイトを訪れたとき、静的ファイル（画像・CSS・JS）がキャッシュから読み込まれれば大幅に速くなります。サーバーの設定ファイル（.htaccessまたはnginx.conf）でキャッシュ有効期限を設定します。画像・フォント等は1年（31536000秒）が目安です。

Google Fontsの最適化

多くの製造業サイトでGoogle Fontsを使用していますが、デフォルトの読み込み方法ではレンダリングブロックが発生します。

• link rel="preconnect" href="https://fonts.googleapis.com" をheadに追加してDNSプリコネクトを行う
• display=swap パラメータをフォントURLに追加し、フォント読み込み前でもテキストを表示させる
• 使用するフォントウェイト（300,400,700等）を必要最小限に絞る

7. まとめ：今日から始める表示速度改善3アクション

表示速度の改善は「完璧な状態を一気に作る」よりも、影響の大きい箇所から順番に改善するアプローチが効果的です。

1. Google PageSpeed Insightsで現状スコアを確認する（5分）。まず現状を把握してください。スコアが50以下なら改善の余地が大きく、施策効果も高くなります。
2. ファーストビューの主要画像をWebPに変換し、遅延読み込みを設定する（2〜3時間）。これだけでLCPが劇的に改善するケースが多いです。Squoosh.appで変換し、ファーストビュー外の画像すべてに loading="lazy" を追加します。
3. 全画像にwidth/height属性を追加する（1〜2時間）。CLSの改善に最も即効性があります。既存サイトのHTMLを一括チェックし、属性が抜けている画像に追加します。

表示速度改善は技術的な作業に見えますが、多くの基本施策はHTMLの属性変更や画像ファイルの差し替えで実現できます。まずPageSpeed InsightsのスコアでどのCWV指標が問題かを特定し、最も影響の大きい改善から着手してください。