2025年05月16日

サイト速度を改善するGoogle PageSpeed Insightsを簡単攻略ガイド

まずはこういうスピードインデックス系の記事にあるあるの お前のサイトはどうやねん！ってツッコミを消すため

Googleへリンク

コチラで当サイトのスピードを計測してみてください。
おそらく殆どのページでスマホが90点以上をたたき出しております。
それを前提として書いていきます。

ホームページの速度改善なのにワードプレスは厳しい。

当サイトは独自のCMSっぽいものNCMSという要塞システムを使っています。
殆どのページがHTMLとなっており（アーカイブページだけPHPを使用）その時点でワードプレスサイトに比べて 遥かに早く軽い構成となっております。

ワードプレスが重い理由

上記以外もありますが、主な理由はこの3つとなり とにかく重いのがワードプレスであり、その時点でスマホサイトの合格ラインを 全体平均70点台で考えると良いかと思います。

私のように独自CMSを作ろうなどと考える奇特な方はいないと思いますが もしもご興味があればご連絡くださいませ。

サイトが重い原因はフォント、画像、余計なJS、アナリティクス

四の五の言ってないで余計なフォントの読み込み、アナリティクスを止めて計測をしてみてください。
スマートフォンの速度が50点台ならおそらく一気に70点台になったはずです。

フォントが重いと言っても理解できない人が多いのですが、とにかくデータとしてとても重いです。
そしてページ速度が！と言ってるGoogleのアナリティクスはヤバいくらい重いです。

この二つを外すだけでページ速度の改善が見込めます。

アナリティクスはともかく
どうしても外したくない方はキャッシュの利用を考えてください、特にフォントは毎回の事なので要設定です。
ただ、私とお約束してください「どんなに読み込みしてもフォントは最大2つまで」 これだけは私とお約束をしてほしいです。

余計なJSの読み込みなのですが、多くのサイトでスライダーが読み込まれていると思いますが スライダーはJSもさることながら、画像が重いので最悪です。

画像がJPGやPNGならWEBPに変更しましょう。
変換はプラグインなどを利用してもいいのですが、無料で変換してくれるサイトも複数ある為 それらを利用しましょう。

パソコン版は本当に見られてる？余計なものを余計に読み込む無駄な構造

正直に言いまして、たいていの重いサイトは「余計なものを余計に読み込む構造上の欠陥」があります。

例えばデザイナーさんがこだわりまくって鬼のように重い処理を強引にコーディングされいたり、フォントが複数読み込まれていたり
画像をバンバン読み込まれていたり、動画が自動再生だったり

さらにコンタトクフォーム7でreCAPTCHAが全ページで読み込む設定になっていたりと散々なサイトが多い
なので重いのです。

ちなみにパソコン版はスマホ版に比べて2分の1程度の母数になります。
パソコン版にこだわり、スマホサイトを重くする構造は健全とは言えないため まずはスマホ版を軽くするためにどうするかを考えてみるといいかもしれません。

知らないと損？サイト速度改善に画像の比率をＣＳＳで設定しよう。

アナリティクスはともかくとして、画像、ＪＳ、フォントを少しづつ整理していくとある程度のところまでで限界が見えてきます。

Largest Contentful PaintやCumulative Layout Shiftといったものが

赤くなっていませんか？

Largest Contentful Paintとは
ビューポート内で視認可能な最大の画像またはテキストブロックのレンダリングが完了するまでの時間

Cumulative Layout Shiftとは
Webページの読み込み時に発生するレイアウトのずれの量を数値化した指標

この辺りは正直専門性が強くなってしまいますので、専門家に聞くと良いです。

例えばメイン画像となるヘッダーまたはその近辺に配置されている画像のＣＳＳに以下を加えます。

 
aspect-ratio: 780（画像の横幅） / 500（画像の縦幅）;
object-fit: cover;

多くのサイトでのコーディングで画像は width/100％設定となりheightはauto
となりますが、じつはコレはGoogle的にはあまりお勧めされていないやり方になります。

HPを表示する時に明示的に縦、横の比率を提示することで速度の改善がされていきます。
また、アナリティクスもCumulative Layout Shift（レイアウトのズレ）が出てしまい、それもまた重くさせてる原因。

え？わからない？
そうですよね・・・・（汗）

ページ速度改善まとめ

まず、ワードプレスは重いので重い事を前提にしてHPを作らねばならない。
余計なJS、フォント、画像を極力減らしていきましょう。
キャッシュ設定も重要です。

余計なものは読み込ませない。
reCAPTCHAなどは、お問い合わせページのみに設定をする。

もしも、ページ速度改善を誰かにお願いしたいなどの場合があれば 一言お声がけください。