中山テック代表です。
弊社ホームページではSEO対策の研究・実験の一環として様々なジャンルのブログを執筆。順位の変動を逐一チェックしております。
※ゲーム、公営競技場、グルメ、IT等
そんな中、2024年度はブログやページのメンテナンスが出来ない日々が続き、各ページの順位が落ちるという事態が発生。対策を強化しました。
少しずつ改善してきているのですが、どのような施策を打ったのか、お話したいと思います。
目次
技術測定
PageSpeed Insights(Google)を使う
※こちらのページから測定できます
Google社が独自に表示スピード、UI、セキュリティ、SEO対策について得点化してくれる優れもの。
それだけでなく「何が理由で」得点が下がっているかを教えてくれます。
他にも様々な測定ツールがありますが、検索アルゴリズムを作成しているGoogle社が提供しているこちらを利用しております。
PageSpeed Insights単体評価
この画像は中山競馬場のグルメページの得点になります。
8250文字、100近い画像と積み上げに積み上げてきたページなので非常に重い！と思いきやパフォーマンスは悪くありません。
※でも71点なのでLCPやFCPまだまだ改善できるだろ！と言われたら元も子もございません・・・
改善当初は40点台、ページによっては30点台という逆アンタッチャブルスコアも叩き出してました（汗
PageSpeed Insights全体評価
全体評価はサンプル(人気のページ？)の過去28日間の平均値を表したものっぽいです。
※どのページのサンプルを見たよ！ということは明示されていないので・・・
ただブログだけで約600記事程あるので、全て改善しきれてはいません（言い訳
技術改善
では具体的な技術改善施策についてお話していきたいと思いますが
・画像
・スクリプト(JavaScript/CSS)
・キャッシュ化
・DB
の4点がポイントになってきます。
LCP(Largest Contentful Paint)
LCPの詳細はこちらのページをご覧ください。
ページアクセス時のビューポート(表示領域)に最大画像、テキストブロック、動画等がどれ位の時間で表示されるかの指標です。
例えば、ページ開いた際の最大サイズの画像表示まで4秒掛かったとしたら・・・
赤色(POOR・最も悪い)となり評価は低くなります。
弊社はwordpressをゴリゴリ使用しているので、その前提でどのような施策を行ったのかを説明します。
| 要素 | 対策前 | 対策後 |
| 記事内画像 | 横 or 縦のサイズを 最大1200pxに規定 | 最大700pxに規定 ※PC版も考慮に入れ 小さくしすぎない施策 100kb前後を目安に |
| アイキャッチ 画像 | 500×500pxまたは 700×700px | 300×300pxに統一 PC版は多少見づらい 50kbを目安に TTFBはこれで改善 |
| YouTube 埋め込み | iframe(YouTubeでコピーした 埋め込みコードを貼り付け) | 文字リンクで YouTubeに誘導 |
| 画像拡張子 | jpg or png(小さい画像のみ) | webp ※convert for media プラグインを使用 |
FCP(First Contentful Paint)
FCPの意味はこちらのページに記載されていますので是非ご覧ください。
初めの画像やテキストを表示するまでの時間、いわゆるDOMのレンダリング時間になります。
PageSpeed Insights上ではFCPの多く掛かっている時間を表示してくれます。
赤枠がPOORとなっておりますが全体POORではないのでまだよい方という判断をしました。
ただ、これが意味しているのは「DOMレンダリングまでに削れる要素があるだよ！」ということです。
HTMLは基本上から読み込んでいきます(オプション付けなければ)。
先にhead部でスクリプトを読む⇒body部を読むというFCPの理念とは程遠いページとなる可能性があります。さらにスクリプトが重ければ重いほど読み込みに時間が掛かります。
※ページの構造上JavaScriptを先に読み込まないとエラーが出る場合もあるので注意！
ではどのような施策をしたのでしょうか、表にしてまとめました。
| 要素 | 対策前 | 対策後 |
| JavaScript ファイル | head内に記載 | body部の最下に記載 |
| 動かし辛い JavaScript ※PHPで定義 されているもの | head内に記載 | Async Javascript プラグインを使用 ※Defer(遅延)指定 |
| 画像の 遅延読み込み | 意識せず 上から順に表示 | a3 Lazy Load プラグインで 遅延読み込み |
キャッシュ
WP Fastest Cacheというプラグインをインストールしました。
有料版も購入しましたが無料版でも使えます。
これはページをキャッシュ化して表示を速くする優れたプラグインです。
※PC版は自動でキャッシュを作成、モバイル版は(誰かが)アクセスにより作成
初回は多少重いですが、キャッシュ化されたページはサクッと開きます。超便利！
内容改善
GoogleのSEOスターターガイド上は「興味深く有益なサイトにする」と書かれてますが、完成したページの校閲機能はありません。
記事執筆が上手い方に見てもらうというマンパワーを使った改善になりそうです。
※他記事によっては内容が薄いこともあり、しっかり調査・取材を行わないとですネ
まとめ
そんな形で技術面中心に改善した結果、内容が豊富(っぽい)記事は一気に順位がアップしました。
※目に見えて変わります！
この先の方針としては
・新規のブログはFCP、LCP等パフォーマンスを意識し、内容の充実した記事執筆
・既存のブログもパフォーマンスを意識して画像の差し替えと文章の見直し
とパフォーマンス中心でSEO対策に勤しんでいきますが、いかんせん後者の作業が非常に大変・・・
ビュー数の多いページは差し替え完了してますが、残り500ページ超！（汗
気合と根性で頑張ります(涙
