SEO対策は一生懸命やっているのに、サイトが伸び悩む。そんなお悩みはありませんか？
毎日ブログを更新している。ページ内のキーワードを見直したり、文章を工夫したりしている。それでも、なかなか効果が出ない。
頑張っているのに結果が出ないとき、もしかすると力を入れている場所が少しずれているのかもしれません。原因は文章や記事の数ではなく、「サイトの土台」にあることがあります。
その土台のひとつが表示速度です。どれだけ良い文章を書いても、ページが表示されるまでに何秒も待たされれば、読まれる前に閉じられてしまいます。
今回、弊社サイト（agario.design）の表示速度を見直し、Googleの計測ツール「PageSpeed Insights」のスマートフォン向けスコアを73点から98点まで改善しました。この記事では、実際に何をして、何がいちばん効いたのかを、専門知識がない方にもわかるようにご紹介します。
改善前と改善後の比較
| 項目 | 改善前 | 改善後 |
|---|---|---|
| パフォーマンス（スマホ） | 73点 | 98点 |
| メインの内容が表示されるまで（LCP） | 6.7秒 | 1.2秒 |
| 操作できるようになるまでの待ち時間（TBT） | 80ミリ秒 | 0ミリ秒 |
| SEO | 92点 | 100点 |
特に大きく変わったのが「LCP」です。これは、ページを開いてからいちばん大きな見出しや画像が表示されるまでの時間のことで、Googleも重視している指標です。6.7秒かかっていたものが、1.2秒で表示されるようになりました。
なお、パソコン向けのスコアは100点（満点）になりました。メインの内容が表示されるまでの時間（LCP）は0.3秒です。
なぜ表示速度がSEOに関係するのか
Googleは、ページの表示速度や見やすさを「ページエクスペリエンス」として評価しており、検索順位を決める要素のひとつにしています。もちろん、いちばん大切なのは内容がユーザーの役に立つことです。ただ、内容が同じくらいのページが並んだとき、快適に見られるページのほうが選ばれやすくなります。
そしてもうひとつ大きいのが、せっかく検索から来てくれた人を逃さないという点です。表示が遅いと、文章を読んでもらう前に離脱されてしまいます。キーワードや文章の工夫が成果につながらないとき、その手前で取りこぼしが起きていることは珍しくありません。
実施した対策
1. 画像を軽い形式（WebP）に変換
サイト内の画像を、JPEGやPNGより軽い「WebP（ウェッピー）」という形式に自動変換して配信するようにしました。対応していない古いブラウザには元の画像を出し分けるので、見た目は変わりません。
2. 画像をブラウザに保存してもらう設定
一度見た画像をブラウザに保存（キャッシュ）してもらう設定を追加しました。2ページ目以降や、再訪問時の表示がぐっと速くなります。
3. 高速化プラグインで表示の流れを整理
WordPressの高速化プラグインを導入し、次のような調整を行いました。
- ページで使っていないデザイン用のデータ（CSS）を省いて、最初の表示を軽くする
- 動きをつけるプログラム（JavaScript）は、表示が終わってから読み込む
- 画面の下のほうにある画像は、スクロールして近づいたときに読み込む
- Webフォントを自社サーバーから配信して、外部への問い合わせを減らす
ただし、こうした設定はサイトによってはメニューやお問い合わせフォームが動かなくなることがあります。設定後はスマートフォンの実機で、メニューの開閉やフォームの送信まで確認しています。
4. 重複していた読み込み指示を整理
調べてみると、トップページの背景画像を「先に読み込んでおく」という指示が、独自に追加していた設定とプラグインの両方から出ていて、二重になっていました。片方に整理して、無駄な処理をなくしました。
5. いちばん効いたのは「ファーストビューの背景画像」の見直し
ここまでの対策でもスコアは70点台後半で止まっていました。原因を詳しく調べると、ページを開いて最初に目に入る部分（ファーストビュー）の背景画像が、スマートフォンにもパソコン用の大きなサイズ（約160KB）のまま配信されていたことがわかりました。
この背景はシンプルな線の模様だったので、画像ファイルをやめて、線の情報だけで描く「SVG」という形式で作り直しました。見た目はほぼそのままで、データ量は約160KBから約1KBに。これだけで、スコアが一気に98点まで上がりました。
今回わかったこと
- 記事の数や文章の前に、土台を整える：毎日の更新やキーワードの工夫も大切ですが、表示速度という土台が整っていないと、その努力を活かしきれません。
- プラグインを入れるだけでは限界がある：設定の見直しで改善はしますが、最後に効いたのはデザインそのものの見直しでした。
- ファーストビューがいちばん大事：最初に表示される部分の画像や装飾を軽くすると、体感速度もスコアも大きく変わります。
- 原因を数字で特定してから手を入れる：計測結果を見ながら一つずつ原因をつぶしていくことで、デザインを大きく崩さずに改善できました。
なお、PageSpeed Insightsのスコアは、同じページでも計測するたびに数点ほど上下します。一度の数字にこだわりすぎず、「表示が速く、使いやすいか」を目安にするのがおすすめです。
SEOが伸び悩んでいる方へ
「SEO対策をしているのに成果が出ない」「自社のサイトが遅い気がする」「何から手をつければいいかわからない」という方は、お気軽にご相談ください。Agario Designでは、表示速度をはじめとしたサイトの土台の計測と原因の洗い出しから、デザインを活かした改善までまとめてご提案します。
