見出し画像

【CWV対策】PSI速度スコア100点を取ったページ表示高速化の具体的な施策

アフィリラブ
【改訂履歴】
2021/03/22　「適切なサイズの画像」への改善方法を追加しました。

こんにちは、アフィリラブです。

GoogleのPageSpeed Insightsの速度スコアは90点以上が合格点ですが、90点どころか80点や70点にも満たないサイトは多いと思います。

次のような悩みありませんか？以前の僕がそうでした。

・速度スコアが全然上がらない
・調べても専門的過ぎて理解できない
・失敗したら取り返しがつかなくなりそう
・膨大な時間をかけても数字が変わらない
・Core Web Vitalsは何をやればいいか分からない

実はPageSpeed Insightsのページ表示速度（速度スコア）はSEOに直結するので、けっして軽視できません。

特に50点未満のサイトでは、早急に対処する必要があります。低い速度スコアを放置すると、次のような影響を受ける可能性も

・2021年5月のCWVアプデで検索順位が下がる
・本来あるべき検索順位に上がらない
・アフィリエイトの成約率へ悪影響がある
・離脱率が上がり、滞在時間が下がる

つまり、ページ表示速度は検索順位の下落だけでは済まされない大きな課題の一つですし、早めに取り組んでおく必要があります。

このnoteを参考に対策を実施するだけで、そこまで時間をかけずにPageSpeed Insightsの高スコア取得と、ほとんどの場合でCore web Vitals対策も完了するはずです。

速度スコア高得点を取った方法を公開

2021年2月に所有サイトの一つでモバイル97点、パソコン100点を達成しました。改善前は40～50程度、20点台のサイトもあったので雲泥の差です。

ちなみに、今回の施策を実施した32サイトにおいて、85点以上が29サイト（約9割）です。

このnoteでは、僕が実際に試行錯誤して速度スコアで高得点を取った施策のうち、本当に点数アップに効果的だった7つの施策＋αを紹介します。

Core Web Vitals対策もできる

画像36

2021年5月には、Core Web Vitalsアップデートが控えています。

簡単に言えば、GoogleのUX指標に関する改善内容で、ページの読み込み時間（LCP）、インタラクティブ性（FID）、コンテンツの視覚的安定性（CLS）に関するアップデートです。

詳しい説明は省きますが、下図の通りCore Web Vitalsを構成する3指標のうち、2指標（LCP、CLS）はPageSpeed Insight「速度スコア」の構成要素です。（右側の円がPageSpeed Insightsの得点構成）

画像6

出典：Lighthouse Scoring Calculator

また、残るFIDについても後ほど紹介する画像軽量化、HTML、CSS、JavaScriptなどの実行改善によって対策できる可能性があります。

つまり、速度スコアで高得点が取れたら、自ずとCore Web Vitals対策もほぼ完了するということです。

万全の準備ができれば、未対策サイトと比べて優位的な立場で2021年5月を迎えることができると思います。

ページ表示速度を速くするメリット

名称未設定のデザイン (16)

ページ表示速度の高速化（＝速度スコア高得点）は、SEO対策だけでなく、次のようなメリットがあります。

また、「Googleの10の真実」の3番目には「遅いより速いほうがいい」を掲げています。Googleはユーザーの貴重な時間を無駄にせず、必要とする情報をウェブ検索で提供したいと考えています。

参考：Googleの10の真実

Googleプラットフォームを使う側である以上、Googleと同様の思想を持ち、必要とされる要件を満たすことが間違いなく良い方向に作用するはずです。

既にページ表示速度はSEO要素の一つ

画像7

Googleは200以上の指標を用いて、サイトの検索順位を決めていますが、CWV実施前の現在でも「ページ表示速度」がその一要素に含まれおり、ページ表示速度を上げることで検索順位への良い影響が期待できます。

しかし、仮に100点を取ってもコンテンツ品質が悪ければ順位順位が上がらない可能性が高いです。逆に、「コンテンツが高品質なのに、サイトが低速過ぎて順位に上がらない」状況を解消できる可能性は十分あります。

SEOは数多くの指標で判断されるため、「やるべきことは全部やる」、逆に悪影響が及ぶ「不要なことは一切やらない」のが現在のSEO対策だと思います。ページ表示速度の改善も「やるべきこと」の一つです。

このnoteが役立つ人

画像8

✅Core Web Vitals対策をしたい
✅PageSpeed Insightsのスコアを上げたい
✅ページ表示速度アップに取り組み、挫折した
✅離脱率を減らし、滞在時間を伸ばしたい
✅次世代画像フォーマットWebPに対応したい

今回試したのはワードプレスのAFFINGERテーマですが、SEO対策に対して定評はありますが、特別に表示速度をウリにしたテーマではありません。

遅いから別の高速を謳う有料テーマへ次々と乗り換えるよりも、まずは使用中のテーマで、やれるだけのことはやってみて下さい。テーマを変えずに解決できる可能性は十分あります。

まだ対応されていない方は、下記の次世代画像フォーマット対応だけでも実施してみると良いです。数分でできますし、ほぼ確実にスコア上がります。

本noteでお伝えする内容

画像45

本noteの内容は、Page Speed Insightsの速度スコアでモバイル97点、パソコン100点を取るまでに実施した、ワードプレス設定、プラグイン設定、サーバー設定などの具体的な方法・手順の解説です。

そして、変更による点数が把握できるものに関しては、個別施策の速度スコアに与える点数ごとにランキング形式で紹介しています。具体的な速度スコア変化量まで載せている情報は数少ないと思います。

※当然ながらサーバー、サイト環境によって速度スコアへの影響は異なるので、全ての人が同じ点数を取れるとは限りません。

対象者とゴール（目標値）

名称未設定のデザイン (17)

このnoteは下記の方を対象としています。

・WordPress使用者
・速度スコアが80点未満
・アフィリエイターまたはブロガー

このnoteでは、いろんなワードプレスのテーマでの対策も想定しました。AFFINGERでなくても対応できる内容がほとんどです。

また、WordPress以外の方（無料ブログ、SIRIUSなど）も実施できるよう配慮はしていますが、一部対策が難しくなりますし、WordPress使用者が一番恩恵を受けられます。

そして、速度スコア80点以上の方は実施済みの内容があったり、費用対効果が見合わない場合もあり得ます。よく検討して頂ければと思います。

サイト運営環境など個人差があるため、具体的な数値を保証することはできませんが、下記の数値目標を達成できる可能性は十分あると思います。

✅Page Speed Insightsで80以上
✅Core Web Vitalsの3項目中2項目は対策完了（LCP、CLS）

このnoteはページ速度改善に関してまだ完璧とは言えません。それでも速度スコアでモバイル97点、パソコン100点を取れたのは事実です。

ページ表示速度の改善に関して更なる気づきがあれば、随時、追記・修正を行っていく予定です。更新した際には、Twitterでも告知します。

note作成した目的

名称未設定のデザイン (6)

ページ表示速度の高速化はとっつきにくく、HTML、CSS、Javascript、サーバーなどの知識をある程度持っている方に向けた、専門的な解説記事は多く見かけます。それでもTwitter見る限り、多くのサイトが速度改善できていないことが問題です。

実際、少し前の僕がそうでした。PageSpeed Insightsの高速化に関する情報は探すことができましたし、過去何度か試しましたが挫折。ましてや、ブログやアフィリエイト初心者にはハードルが高すぎます。

そこで、専門知識を知らない初心者にも分かるよう、できるだけわかりやすく、変更すべき具体的な内容とその効果に注力して解説したので、何をすればいいか全然分からず挫折した人でも、順番通りやればスコアアップができるはずです。

それでは、早速始めましょう。

ここから先は

11,386字 / 42画像

¥ 4,980

この記事が気に入ったらサポートをしてみませんか？