初心者向け：ホームページが遅い？原因とすぐできる改善方法はコレ！

「ホームページの表示が遅い気がする…」
「原因がわからないから放置している…」

そんな方のために、この記事では初心者でもわかる“遅い原因ベスト5”と“すぐできる改善方法”を紹介します。

なぜホームページが遅くなるの？よくある原因ベスト5

ホームページの表示が遅い原因は様々な要因が考えられますが、代表的な原因を5つピックアップします。

原因1：画像・動画が重すぎる

大きな写真や動画をそのまま使うと、たった1つでページが重くなることがあります。

原因2：JavaScriptやWordPressのプラグインが多すぎる

動きをつけるためのスクリプト（JavaScript）やWordPressのプラグインが増えると、読み込みが遅くなります。

WordPressは遅い、と感じる方がいるかもしれませんが、WordPressが遅いのではなく、無駄にプラグインが使われているケースも多いです。

原因3：Webフォントの使い過ぎ

Webフォントは数が多いとその分読み込みが遅くなり、特に日本語Webフォントは表示速度に影響が出ます。

デザインを重視しすぎてホームページの表示速度が遅くなる、ということもよくあるケースです。

原因4：GoogleマップやYouTubeなどの埋め込みが多い

Googleマップなどは便利な反面、複数貼ると大きな負荷になります。

本当にそのページ内で見せる必要があるのか？リンクではダメなのか？検討することも大切です。

原因5：サーバーの反応が遅い

安価なプランや混雑で速度が低下することもあります。

まずは無料ツールでホームページをチェックしよう

Googleの無料ツール「Google PageSpeed Insights」では、URLを入力するだけでホームページの読み込み速度を診断できます。

Google PageSpeed Insights

結果は色別に表示されます。

赤＝問題あり（要改善）
黄＝できれば改善
緑＝OK

内容によっては初心者では対処が難しい項目もありますでので、今回は、初心者でもすぐに対処できる項目に絞って、改善策をご案内します。

初心者でも、今すぐできる改善策

「画像配信を改善する」と出た場合

画像が重すぎるときに出る警告です。

＜すぐできる対処方法＞
画像を軽量化して、差し替える

まずは画像を軽量化してくれる無料サイト「Squoosh」にアクセスしましょう。

https://squoosh.app/

画像を真ん中のピンクの枠にドラッグし、画面右下の「Compress」で容量を下げます。

Compressで変換したい形式（以下のサンプル赤枠：JPEG など）を選択し、「Quality」の数値を下げて（以下のサンプル緑枠）画像の容量を下げていきます。下げすぎてしまうと、画像があれてしまうので、画面を見ながら調整していきます。よい加減がみつかったら、右下の青いボタンをクリックするとダウンロードできます。

画像の推奨は「WebP」ですが、環境によっては、ソースコードを変更する必要もありますので注意が必要です。
また、元画像が「PNG」の場合で、「PNG」の必要性がない場合は「JPEG」に変換してQualityを調整すると、容量をかなり軽減できる可能性があります。

軽量化が完了したら、画像を差し替えましょう。

※PNGとは
透明度を持つ画像で、アイコンやロゴなどの背景を透明にできるのが特徴です。

「フォント表示」と出た場合

Webフォントの読み込みが遅いときに出る警告です。

＜すぐできる対処方法＞
不要なフォントを削除する

まずは、本当にWebフォントが必要なのか検討しましょう。

Webフォントを使うのをやめる
種類を1～2種類まで減らす
太さ（Weight）が多い場合は Regular / Bold などのの2種だけに絞る

とくに日本語Webフォントは文字数の多さ（漢字、ひらがな、カタカナ）からファイルサイズが非常に大きくなりがちです。Webフォントを削除することで改善効果が見込まれます。

【やや高度な設定】「効率的なキャッシュ保存期間を使用する」と出た場合

キャッシュ設定が弱いときに出る警告です。

＜すぐできる対処方法＞
サーバーでキャッシュの設定を変更する

レンタルサーバーに「キャッシュ設定」画面がある場合 → 保存期間を長くする
WordPressならキャッシュ系プラグインを入れるだけで改善する場合もあります

サーバーのキャッシュ設定が分からない場合は、サーバー会社に問い合わせてみましょう。サーバー会社に「画像やCSSのキャッシュ期間を延ばしたい」と伝えるだけでご案内してくれるケースもあります。

「レンダリングをブロックしているリクエスト」と出た場合

ページの表示を“止めてしまうもの”があるといった意味です。
要因として、外部サービスの読み込みなどが該当します。
外部サービスの例：Googleマップ、Webフォント、アニメーション（スクロールやマウスオーバーした際に要素が動く）など

＜すぐできる対処方法＞

Googleマップ
リンクに置き換える。
とくにスマートフォンで閲覧する場合、ホームページ内で見るマップより、Googleマップのアプリ内マップのほうが見やすく使いやすいです。

【やや高度な設定】YouTube などの動画
クリックしてから読み込む形式に変更する。ただしコードの変更が必要になり、少々設定は高度になります。
WordPressで「クリックしてから読み込む形式」に対応するプラグインもいくつか用意されています。

Googleフォント
使うのをやめる/数を減らす。

アニメーション（スライダー・動きのJS）
本当に必要なものかを検討する。
もし不要な動きがあれば、該当のスクリプトを削除する必要があります。少々知識が必要になりますので、ご自身で対処が難しい場合は、制作会社などに相談しましょう。

「LCP」や「FCP」が赤だった場合

LCP：Largest Contentful Paint
FCP：First Contentful Paint

ページの最初に見える部分や、最初に表示される大きな画像の表示が遅いときに警告が出ます。
多くの場合は「一番上の部分の画像（ファーストビューということも多い）が遅い」ことが原因で画像対策を行うと改善するケースも多いです。

＜すぐできる対処方法＞
画像の最適化・読み込み方の修正

ページの最初に見える大きな画像を軽量化
軽量化は前述で紹介した「Squoosh」で行えます。

【やや高度な設定】画像の遅延読み込み（lazyload）
lazyloadが使える場合はコードに追加しましょう。
<img src="section.jpg" alt="〇〇画像" loading="lazy">
WordPressのテーマの設定でオンにできる場合もあります。
なお、最初のファーストビュー画像は loading="lazy"ではなく、loading="eager"に設定します。