サイト速度を上げる簡単テク|非エンジニアでもできる表示速度改善の基本
サイトの表示速度は、ユーザー体験やSEO、問い合わせ率に関わる重要な要素です。この記事では、非エンジニアでも取り組みやすい速度改善として、画像最適化、不要プラグインの整理、キャッシュ、Lazy Load、Webフォント、外部タグ、PageSpeed Insightsでの確認方法までを分かりやすく整理して解説します。
Webサイトを見ていて、ページがなかなか開かずに離脱した経験はありませんか。
サイトの表示速度は、ユーザー体験に大きく関わります。 ページの読み込みが遅いと、読者は内容を見る前に戻ってしまったり、問い合わせや購入に進む前に離脱してしまったりすることがあります。
SEOの面でも、表示速度やページ体験は無視できません。 Googleは、読み込み速度、操作への反応、表示の安定性などを測る Core Web Vitals を重要なページ体験指標として扱っています。
ただし、速度だけで検索順位が決まるわけではありません。 検索順位はコンテンツの関連性や有用性など多くの要素で決まるため、速度改善はSEOを支える土台の1つとして考えるのが正確です。
「サイト速度改善」と聞くと、コード修正やサーバー設定など、専門的な作業を想像するかもしれません。 しかし実際には、画像を軽くする、不要なプラグインを減らす、使っていないタグを整理するなど、非エンジニアでも管理画面から見直せる項目も多くあります。
画像最適化を詳しく確認したい場合は、 画像最適化チェックリスト もあわせて参考になります。
サイト速度が重要な理由
サイト速度が重要な理由は、大きく3つあります。
1. ユーザーの離脱を防ぎやすい
ページが開くまでに時間がかかると、ユーザーは待たずに戻ってしまうことがあります。
特にスマートフォンでは、通信環境や端末性能によって読み込みが遅くなりやすいため、PCでは問題なく見えていても、スマホでは重く感じられることがあります。
企業サイトやサービスサイトでは、ページ表示が遅いだけで、
- 問い合わせフォームに進まれない
- 商品ページを見てもらえない
- 記事を最後まで読まれない
- 他社サイトへ移動される
といった機会損失につながることがあります。
2. SEOの土台になる
Googleは、ページ体験の一部としてCore Web Vitalsを重視しています。 Core Web Vitalsには、主に次のような指標があります。
- LCP:ページの主要なコンテンツが表示されるまでの時間
- INP:ユーザー操作に対する反応の速さ
- CLS:読み込み中にレイアウトがどれだけズレるか
これらは、ユーザーがページを快適に使えるかを測るための指標です。
ただし、Core Web Vitalsが良ければ必ず上位表示されるわけではありません。 検索では、まずユーザーの検索意図に合った有用なコンテンツであることが重要です。
つまり、速度改善はコンテンツの価値をきちんと届けるための基礎整備です。
3. CVR改善にもつながりやすい
表示速度は、SEOだけでなくCVRにも関係します。
問い合わせフォーム、資料請求、予約、購入などの導線でページが遅いと、ユーザーは途中で離脱しやすくなります。 特に、広告やSNSから流入したユーザーは、検索ユーザーよりも滞在意欲が低いこともあるため、最初の表示速度が重要です。
速度改善は、単なる技術対応ではなく、ユーザーを待たせないための接客改善として考えると分かりやすいです。
まず確認したい測定ツール
速度改善を始める前に、まずは現状を確認します。 感覚だけで「重い」「軽い」と判断するのではなく、ツールで数値と改善項目を見ましょう。
PageSpeed Insights
PageSpeed Insightsは、Googleが提供しているページ速度の測定ツールです。
URLを入力すると、次のような情報を確認できます。
- パフォーマンススコア
- Core Web Vitalsの状況
- LCP、INP、CLSなどの指標
- 改善できる項目
- 画像やJavaScriptなどの問題
ここで注意したいのは、スコアだけを追いかけすぎないことです。 100点を目指すことよりも、実際にユーザーに影響している問題を優先して改善することが大切です。
特にモバイルの結果は、PCより厳しく出ることがあります。 スマートフォンユーザーが多いサイトでは、モバイル結果を優先して確認しましょう。
Google Search ConsoleのCore Web Vitalsレポート
Google Search Consoleでは、Core Web Vitalsレポートを確認できます。
このレポートでは、実際のユーザーデータをもとに、URLグループごとのページ体験の状況を確認できます。
PageSpeed Insightsが個別ページの改善確認に向いているのに対し、Search Consoleはサイト全体でどのページ群に問題があるかを見るのに向いています。
Search Consoleの基本は、 Search Consoleの始め方 もあわせて確認すると理解しやすくなります。
画像サイズを最適化する
サイトが重くなる原因として、まず見直したいのが画像です。
スマートフォンで撮影した写真をそのままアップロードすると、1枚で数MBになることがあります。 記事やLPに大きな画像を何枚も入れると、それだけでページ全体が重くなります。
1. 表示サイズに合わせてリサイズする
まずは、画像の横幅を必要以上に大きくしないことが大切です。
たとえば、記事本文の表示幅が800px程度なのに、3000px以上の画像をそのまま使う必要はありません。 表示サイズに合わせてリサイズするだけでも、ファイルサイズを大きく減らせることがあります。
目安としては、次のように用途ごとに画像サイズを変えると管理しやすくなります。
- 記事本文用:横幅800〜1200px程度
- サムネイル用:表示サイズに合わせる
- フル幅メインビジュアル:PC・スマホの表示に合わせて別サイズを用意
2. WebPやAVIFなどの画像形式を使う
従来はJPEGやPNGがよく使われていましたが、現在はWebPやAVIFのような新しい画像形式も使われます。
WebPやAVIFは、JPEGやPNGよりも軽くできることがあり、表示速度の改善に役立ちます。 ただし、画像の内容や圧縮設定によって効果は変わるため、「必ず何%軽くなる」と固定で考えないほうが安全です。
実務では、次のように使い分けるとよいでしょう。
- 写真:WebPやAVIFを検討
- 透過が必要な画像:WebPやPNGを検討
- ロゴ・アイコン:SVGを検討
- 画質が重要な画像:圧縮後の見た目を確認
画像形式の基本は、 画像のサイズと形式の基本(WebP/AVIF対応) も参考になります。
3. 画像圧縮ツールを使う
非エンジニアでも取り組みやすいのが、画像圧縮ツールの活用です。
- Squoosh
- TinyPNG
- ImageOptim
- WordPressの画像圧縮プラグイン
WordPressの場合は、EWWW Image OptimizerやShortPixelなど、アップロード時に自動圧縮できるプラグインもあります。 ただし、プラグインを増やしすぎると別の負荷になることもあるため、必要なものだけを選びましょう。
4. ファーストビュー画像は特に注意する
ページ上部に表示されるメイン画像は、LCPに影響しやすい重要な画像です。
この画像が重いと、ページの主要コンテンツが表示されるまでに時間がかかります。 メインビジュアルや記事のアイキャッチが大きすぎる場合は、優先的に軽量化しましょう。
また、ファーストビューに表示される重要画像は、Lazy Loadの対象にしないほうがよい場合があります。 下のほうにある画像は遅延読み込みしてもよいですが、最初に見える画像まで遅延させると、表示が遅く感じられることがあります。
不要なプラグインを整理する
WordPressなどのCMSでは、プラグインを入れるだけで簡単に機能を追加できます。 しかし、使っていないプラグインや重複したプラグインが増えると、サイトが重くなったり、管理が複雑になったりします。
1. 使っていないプラグインを削除する
無効化しているだけのプラグインでも、管理上のリスクになります。 もう使わないものは、バックアップを取ったうえで削除を検討しましょう。
特に次のようなプラグインは見直し対象です。
- 以前使っていたが今は使っていない
- 同じ機能のプラグインが複数ある
- 最終更新日が古い
- 公式ディレクトリから削除されている
- 代替機能がテーマやサーバー側にある
2. 機能の重複をなくす
プラグイン同士で機能が重複していると、無駄な読み込みや設定の競合が起きることがあります。
- SEOプラグインが複数入っている
- キャッシュ系プラグインが複数入っている
- 画像圧縮系プラグインが複数入っている
- アクセス解析タグを複数の方法で入れている
特にキャッシュ系プラグインは、サーバー側のキャッシュ機能と競合することもあります。 導入前に、サーバーやテーマとの相性を確認しましょう。
3. 更新されていないプラグインを確認する
長期間更新されていないプラグインは、速度だけでなくセキュリティ面でも注意が必要です。
ただし、最終更新日が古いから必ず危険というわけではありません。 シンプルなプラグインで問題なく動作しているケースもあります。
確認したいのは、次の項目です。
- 現在のWordPressバージョンに対応しているか
- PHPのバージョンに対応しているか
- 代替プラグインが必要か
- セキュリティ上の問題が報告されていないか
キャッシュを活用する
キャッシュとは、一度作成したデータを再利用して、次回以降の表示を速くする仕組みです。
WordPressでは、ページを表示するたびにデータベースから情報を読み込み、HTMLを生成します。 キャッシュを使うと、その処理を減らし、表示を速くできることがあります。
1. ページキャッシュ
ページキャッシュは、生成済みのHTMLを保存しておき、次回以降に再利用する仕組みです。 アクセス数が多いサイトでは、サーバー負荷の軽減にも役立ちます。
2. ブラウザキャッシュ
ブラウザキャッシュは、画像やCSS、JavaScriptなどをユーザーのブラウザに保存し、再訪問時の読み込みを減らす仕組みです。 ロゴや共通CSSなど、頻繁に変わらないファイルに有効です。
3. サーバー側キャッシュ
サーバーによっては、独自の高速化機能やキャッシュ機能を提供していることがあります。
たとえば、LiteSpeed Cacheに対応しているサーバーでは、専用のキャッシュ機能を使えることがあります。 ただし、サーバーやテーマ、プラグインによって相性があるため、設定後は表示崩れやフォーム送信の動作も確認しましょう。
Lazy Loadを正しく使う
Lazy Loadとは、画像や動画などを、ページ表示時にすべて読み込むのではなく、ユーザーがスクロールして近づいたタイミングで読み込む仕組みです。
下のほうにある画像を最初から読み込まないため、初期表示を軽くしやすくなります。
Lazy Loadが向いているもの
- 記事下部の画像
- ギャラリー画像
- 関連記事のサムネイル
- ページ下部の動画埋め込み
- スクロール後に表示されるバナー
Lazy Loadに向かないもの
- ファーストビューのメイン画像
- ページ上部のアイキャッチ
- LCP対象になりやすい画像
- すぐに見せたい重要コンテンツ
ファーストビュー画像まで遅延読み込みすると、ページの主要要素が表示されるまでの時間が長くなることがあります。 つまり、Lazy Loadは何でもオンにすればよい設定ではなく、場所に応じて使い分けることが重要です。
サーバー環境を見直す
画像やプラグインを整理しても、サーバー自体が遅いと改善には限界があります。
特に、次のような状態ならサーバーの見直しを検討してもよいでしょう。
- 管理画面が常に重い
- アクセスが増えると表示が遅くなる
- PHPやMySQLのバージョンが古い
- サーバー側キャッシュが使えない
- 共有サーバーでリソース不足になりやすい
- 画像や動画を大量に置いている
HTTP/2・HTTP/3への対応を見る
近年のサーバーでは、HTTP/2やHTTP/3に対応しているものも増えています。 これらは通信効率の改善に関わる技術です。
非エンジニア向けには、細かい仕様を理解するよりも、契約中のサーバーが最新環境に対応しているかを確認するほうが現実的です。
- HTTP/2
- HTTP/3
- LiteSpeed
- サーバーキャッシュ
- PHPのバージョン
- SSD / NVMe
- CDN連携
などの対応状況を、サーバー会社の管理画面や仕様ページで確認しましょう。
格安プランのままでよいか確認する
月額費用を抑えるために格安プランを使っている場合、アクセス数やページ数が増えると速度面で限界が出ることがあります。
ただし、サーバーを変えれば必ず速くなるとは限りません。 画像が重い、プラグインが多い、外部スクリプトが多いなど、サイト側に原因がある場合は、サーバー移転だけでは十分に改善しないこともあります。
順番としては、次の流れが現実的です。
- 画像を軽くする
- プラグインとタグを整理する
- キャッシュを確認する
- それでも遅い場合にサーバーを見直す
Webフォントを使いすぎない
Webフォントは、デザインの印象を整えるうえで便利です。 しかし、日本語Webフォントは文字数が多く、フォントデータが重くなりやすい点に注意が必要です。
特に、次のような場合は、表示速度に影響することがあります。
- 複数の日本語フォントを読み込んでいる
- 太さを何種類も使っている
- 全ページでWebフォントを読み込んでいる
- ファーストビューでフォント読み込み待ちが発生している
システムフォントを活用する
速度を優先するなら、OSに標準搭載されているシステムフォントを使う方法があります。
- 游ゴシック
- メイリオ
- ヒラギノ角ゴ
- system-ui
システムフォントは追加読み込みが不要なため、速度面では有利です。
Webフォントを使うなら絞る
どうしてもWebフォントを使いたい場合は、次のような工夫をしましょう。
- 使うフォントを1種類に絞る
- 太さを1〜2種類にする
- 見出しだけに使う
- 不要な文字セットを読み込まない
- 表示速度を測定して確認する
外部スクリプトを整理する
サイト速度の意外な原因が、外部スクリプトです。
外部スクリプトとは、自社サーバーではなく外部サービスから読み込むコードのことです。
- Googleタグ
- アクセス解析
- 広告タグ
- ヒートマップツール
- チャットボット
- SNS埋め込み
- YouTube埋め込み
- 予約システム
- 外部フォーム
これらは便利ですが、増えすぎるとページの読み込みに影響します。
1. 使っていないタグを削除する
過去に使っていた広告タグ、計測タグ、ヒートマップタグなどが残っていないか確認しましょう。
特にGoogleタグマネージャーを使っている場合、以前の施策で入れたタグがそのまま残っていることがあります。
定期的に、次の点を確認するとよいでしょう。
- 何のタグか
- 今も使っているか
- 誰が管理しているか
- どのページで必要か
- 削除してよいか
2. SNS埋め込みを減らす
SNSのタイムライン埋め込みや投稿埋め込みは便利ですが、外部読み込みが増える原因になります。
特にトップページや記事下に複数のSNS埋め込みがある場合は、表示速度に影響しやすくなります。
代替として、次のような方法があります。
- 静止画像+リンクにする
- 必要なページだけに表示する
- 投稿埋め込みの数を減らす
- 遅延読み込みを検討する
3. チャットやポップアップも見直す
チャットボット、ポップアップ、追従バナーなども、サイト速度やユーザー体験に影響することがあります。
特にスマホ画面で、
- 表示が遅い
- コンテンツを隠す
- レイアウトがズレる
- 操作しづらい
場合は、速度だけでなくページ体験の面でも見直しが必要です。
ページサイズを意識する
ページサイズとは、HTML、CSS、JavaScript、画像、フォントなどを含めたページ全体のデータ量です。
一般的に、ページサイズが大きいほど読み込みに時間がかかりやすくなります。 ただし、理想のサイズはサイトの種類やページ内容によって変わります。
たとえば、次のようなページでは、適切なページサイズは異なります。
- 写真が多いギャラリーサイト
- ECの商品一覧
- コーポレートサイトのトップページ
- テキスト中心のブログ記事
そのため、「必ず何MB以下」と固定するより、PageSpeed Insightsなどで問題になっている要素を確認しながら、不要なデータを減らす考え方が大切です。
動画は直接アップロードしすぎない
動画ファイルは画像よりも重くなりやすいです。
短い軽量動画であれば自社サーバーで扱えることもありますが、一般的にはYouTubeやVimeoなどの動画配信プラットフォームを使うほうが管理しやすいです。
特に、長尺動画や高画質動画を直接サーバーにアップロードすると、次のような問題が起こりやすくなります。
- ページが重くなる
- サーバー容量を圧迫する
- 通信量が増える
- スマホで再生しにくくなる
動画を使う場合は、サムネイル画像を軽くする、必要なページだけに埋め込む、自動再生を避ける、ファーストビューで重い動画を読み込まない、といった点も確認しましょう。
ページビルダーや過度な装飾に注意する
WordPressのページビルダーやアニメーション機能は便利です。 しかし、装飾を増やしすぎると、HTMLやCSS、JavaScriptが肥大化することがあります。
- アニメーションが多い
- スライダーを複数使っている
- 不要な余白や装飾ブロックが多い
- ページビルダーの機能を過剰に使っている
- 使っていないCSSやJSが大量に読み込まれている
デザインを整えることは大切ですが、見た目の派手さより、読みやすさと操作しやすさを優先することも重要です。
読みやすさの改善は、 読みやすい見出しと段落の基本 も参考になります。
非エンジニアがまずやるべき速度改善チェックリスト
ここまでの内容を、実際のチェックリストにすると次のようになります。
画像まわり
- 画像を必要以上に大きなサイズでアップしていないか
- 画像を圧縮しているか
- WebPやAVIFなどを検討しているか
- ファーストビュー画像が重すぎないか
- アイキャッチやバナーを使い回しすぎていないか
- 不要な画像を削除しているか
WordPress・CMSまわり
- 使っていないプラグインを削除したか
- 同じ機能のプラグインが重複していないか
- プラグインやテーマを更新しているか
- キャッシュ機能を使っているか
- ページビルダーで重くなっていないか
外部タグ・埋め込みまわり
- 不要な計測タグが残っていないか
- 使っていない広告タグが動いていないか
- SNS埋め込みを入れすぎていないか
- チャットボットやポップアップが重くないか
- YouTube埋め込みが多すぎないか
表示体験まわり
- スマホで表示が遅くないか
- ファーストビューがすぐ表示されるか
- レイアウトが読み込み中にズレないか
- ボタンやメニューが押しにくくないか
- フォーム表示が重くないか
やりすぎに注意したいこと
速度改善では、数値を追いかけすぎて、逆にサイト運営がしづらくなることもあります。
1. スコア100点だけを目指さない
PageSpeed Insightsのスコアは参考になりますが、100点を取ることが目的ではありません。
大切なのは、次のような点です。
- ユーザーが快適に見られるか
- 重要なページで問題が出ていないか
- 画像やタグの無駄がないか
- コンバージョン導線が使いやすいか
スコアを上げるために必要な機能まで削ってしまうと、本末転倒です。
2. 画像を圧縮しすぎない
画像を軽くすることは大切ですが、圧縮しすぎると画質が大きく落ちます。
商品写真、施工事例、店舗写真、人物写真などは、信頼感にも関わります。 画質が悪くなりすぎない範囲で圧縮しましょう。
3. プラグインをむやみに入れない
速度改善プラグインを入れすぎると、かえって不具合や競合が起こることがあります。
キャッシュ、画像圧縮、遅延読み込み、CSS最適化などを複数のプラグインで重複設定すると、表示崩れやフォーム不具合につながることもあります。
導入後は、必ず次の確認を行いましょう。
- トップページが正常に表示されるか
- 問い合わせフォームが送信できるか
- スマホメニューが動くか
- 画像が表示されるか
- 重要なボタンが押せるか
4. 重要な計測タグを消さない
不要なタグの整理は大切ですが、GA4や広告計測タグなど、必要なタグまで削除しないように注意しましょう。
タグ整理では、削除前に必ず次の点を確認します。
- 何のタグか
- 誰が使っているか
- レポートや広告配信に必要か
- 削除して問題ないか
まとめ
サイト速度の改善は、SEOだけでなく、ユーザー体験や問い合わせ率にも関わる重要な取り組みです。
ただし、難しい技術対応だけが速度改善ではありません。 非エンジニアでも、画像の軽量化、不要プラグインの削除、タグ整理、キャッシュ確認、Webフォントの見直しなど、できることは多くあります。
- サイト速度はSEOを支えるページ体験の一部
- 速度だけで順位が決まるわけではない
- まずはPageSpeed Insightsで現状を確認する
- 画像サイズと形式を見直す
- ファーストビュー画像は特に軽くする
- Lazy Loadは下部画像には有効だが、メイン画像には注意する
- 不要なプラグインや外部タグを削除する
- WebフォントやSNS埋め込みを使いすぎない
- サーバー環境も必要に応じて見直す
- スコアだけでなく、実際のユーザー体験を重視する
まずは、サイト内でアクセスが多いページを1つ選び、 「画像が重すぎないか」 「不要なプラグインやタグが残っていないか」 「スマホでファーストビューがすぐ表示されるか」 を確認してみてください。
小さな改善を積み重ねることで、ユーザーにとっても検索エンジンにとっても扱いやすいサイトに近づけます。