コアウェブバイタルを完璧に！モバイル100点の設定を公開
コアウェブバイタルはGoogleが検索順位決定の指標として使うということで、WordPressで運営しているブログも対応する必要があります。
Pagespeed Insight で自分のサイトの状況を調べられますが、特にモバイルで高得点を取るのは難しいですよね。っていうか、モバイルでは無理って思っていませんか？
コアウェブバイタル完全対応、モバイル100点を取得している当サイトの設定を公開します。
コアウェブバイタルとは
Googleはユーザーのウェブ体験が向上することを常に目指していて、よい体験をもたらすウェブサイトの基準として「ウェブバイタル」というものを公表しています。
その中でも重要とされているものが「コアウェブバイタル」で、LCD・FID・CLSという三つの指標で採点されます。
ざっくりいうと、コアウェブバイタルのスコアが良いウェブサイトを「良好なユーザー体験をもたらすウェブサイト」と判断して、検索順位に影響させるというわけです。
- LCD: Largest Contentful Paintは「最大コンテンツの描画」の意味で、多くの場合は画像だと思います。
- FID: First Input Delayは「初回入力遅延」の意味で、ユーザーの操作に対する反応の速さを意味します。
- CLS: Cumulative Layout Shiftは「累積的なレイアウト変更」の意味で、表示のズレがどれくらいあったかを意味します。最初に文字がパッと表示されて、装飾が追加されてじわじわとレイアウトが変わる場合などに低くなります。
どの指標も数値は小さいほど良いと判断されます。
Pagespeed Insight や Lighthouse で解析するとこれらの評価が表示されると同時に、改善点として「次世代フォーマットの画像を使え」とか「Javascriptを読み込ませるな」的なアドバイスが出ますね。
では、いう通りにするといいかというとそうでもなくて、特に次世代フォーマットの画像は対応ブラウザーの問題などがあって面倒です。
でも、今回紹介する方法で全てに完璧に対応して、モバイルで100点満点を取っちゃいましょう。
iPhone 研究室を採点
偉そうにいってるお前のサイトは対応できてんのかい？って思いますよね？
証拠として最もアクセス数が多い記事の Lighthouse の分析結果をご覧ください。
全てのスコアが90点台で、Performance (Pagespeed Insight と同じ) は100点になっています。
Pagespeed Insight のスコアはこちら。
モバイルで100点です。もちろんPCも100点です。
気なる方は、今現在のスコアもご確認ください。
アクセス状況などサーバーの状態によっては100点にならないこともありますが、それでも常時結構な高得点を出してくれているのではないでしょうか。
設定内容
それでは、どのような設定をしてWordPressで満点の表示速度を実現できたのか紹介します。
テーマはLuxeritas
iPhone 研究室では長らく、Cocoon という無料のテーマを使ってきました。
とても多機能で、多数のプラグインが不要になる優秀なテーマです。
ただ、コアウェブバイタルの対応となるとちょっと難しい部分がありました。
そこで、同じく無料ですが、とても高性能な Luxeritas （ルクセリタス）というテーマに切り替えました。
この作者さんはおそらく、SEOにとても詳しいと同時に大変優秀なエンジニアではないかと思います。
Luxeritas の内部構造というかプログラミングが、とにかく素晴らしい。
WordPress で構築するウェブサイトの高速表示とコアウェブバイタルの対応を考えたら、有料のテーマを含めてもこれを超えるものはなかなか見つからないと思います。
これを作成してくださった作者さんに、全力で感謝します。
Luxeritasの設定
単にテーマをルクセリタスに切り替えたら高速になるというわけではなくて、ある程度設定が必要になります。
圧縮
HTML・CSS・Javascript を圧縮して高速化するプラグインを使っている人も多いと思いますが、Luxeritas はこの機能を標準搭載しているのでプラグインは不要です。
Luxeritas の「高速化一括設定」で、「推奨設定」を選択します。これだけ。
この設定がとてもいい仕事をしています。
Lazy Load (画像の遅延読み込み)
画像の遅延読み込みも表示の高速化に重要です。
WordPress も標準搭載している機能ですが、それは使いません。
Luxeritas はGoogleが推奨する「Intersection Observer」に対応しています。これを使わない手はないです。
一括の推奨設定ではWordPressの標準機能の方が選択されますので、手動で切り替えます。
この設定を行うことで、LCDの対応が完璧になります。
スコアが大きく改善されて、次世代フォーマットの画像を使えというアドバイスも表示されなくなります。
実際にウェブページの表示速度も速くなったと感じます。
フォント
ウェブフォントが読み込まれるような設定をすると、それだけで Performance (Pagespeed Insight) の結果が大きく悪化します。
Luxeritas の「カスタマイズ（外観） > 字体（フォントファミリー）」で、Webフォント以外のものを選択しておきましょう。
おすすめは「游ゴシック + ヒラギノ角ゴ」です。
游ゴシックを選んでおけばWindowsの人にも美しい表示で読んでいただけるし、日本ではiPhoneの利用者が多いのでヒラギノを表示させたいですよね。
使ってはいけないプラグイン
コアウェブバイタルへの対応と高速表示の観点から、使ってはいけないプラグインがあります。
- Jetpack
- Permalink Redirect
- Contactform7
- 高速表示を謳うキャッシュ系
Jetpackは多機能で便利なんですけど、高速化とかコアウェブバイタルについてはめちゃくちゃ足を引っ張ります。
Permalink Redirect は、パーマリンクの設定を変更した人にはありがたいプラグインなんですが、これを使っていると Pagespeed Insight のスコアがめちゃくちゃ悪化します。
Contctform7 はお問い合わせフォームの設置に便利なんですが、必要なページは限られると思います。でも、全ての記事で必要もないのに読み込まれてしまい、表示速度を大きく低下させる原因になります。
メールフォームにはCGIなど別の仕組みを使った方が良いと思います。当サイトが使っているXserverはメールフォームのCGIを無料で提供してくれているので、僕はそれに乗り換えました。
Contactform7 をどうしても使い続けたい場合は、必要なページだけで読み込むように設定できますので、こちらの記事を参照してください。
https://www.d-grip.com/blog/seisaku/5497キャッシュ系プラグインについては、ルクセリタスの説明書きにもある通りで、使用すると逆に遅くなります。
遅くなる原因はGoogleのサービス
WordPressでブログを運営している個人の多くは、Analytics や AdSense といったGoogleが提供するサービスを利用していると思います。
しかし、このGoogleのサービスで使うJavaScriptがコアウェブバイタルのスコア悪化に思いっきり影響します。
だからといって使わないわけにはいかないので、設置・読み込み方法を変更して対策しましょう。
その方法は、Googleのタグマネージヤーを使うことです。
タグマネージャーでGoogleのサービスを高速化
Googleのタグマネージャーの設定をうまく使うと、Pagespeed Insight がいう「Javascriptをなんとかしなさい」という問題を全て解決できます。
タグマネージャーとは？
アクセス解析とか、アドセンスとか、必要なサービスのタグを手作業で設置している人も多いと思いますが、そういったタグを全て一括で管理できるサービスです。
タグマネージャーのコードを一つだけウェブサイトに設置しておけば、あとは全部タグマネージャーから管理できて便利です。
例えば、WordPressのテーマを変更したりすると色々と設定し直す必要があって大変ですが、タグマネージャーを使っていればタグマネージャーのコードを設置するだけで作業が完了です。
高速化するために行うこと1: トリガーの設定
タグマネージャーもただ設置すれば高速化するというわけではありません。
まず、タグマネージャーでは設置した解析タグなどがいつ読み込まれるようにするかというタイミングを設定する必要があります。
設定には「トリガー」の選択が必要で、ほとんどの人は「All View」を選択しているのではないかと思います。
All View だとウェブサイトになんらかのシグナルが来た時に即発動するというイメージだと思ってください。
この「トリガー」を「ウインドーの読み込み」で設定します。
「ウインドーの読み込み」にすると、Webページが人間の目で見える状態になった時に発動するという感じです。
Analytics にトリガーとして「ウインドーの読み込み」を設定しておくと、アクセス数の計測としてはより正確な値になると期待できます。
AdSense のタグや、Google以外のサービスのタグについては、タグマネージャー内の「カスタムHTML」を使って設定します。
僕の場合、タグマネージャーを使って
- Goggle Analytics
- Goggle Analytics 4
- Adsense 自動広告
- PTEngine
という4つのタグを設置していますが、全てトリガーは「ウインドー読み込み」で設定しています。
高速化するために行うこと2: タグマネージャーの設置場所
タグマネージャーのコードの設置は、
- <head>内のなるべく上の方に貼り付けてください。
- <body>の直後にこのコードを次のように貼り付けてください。
という二つがあります。
普通は素直に指示通りに設置すると思いますが、このままでは高速表示やコアウェブバイタル対応については足を引っ張ってしまいます。
そこで、<body>の方のコードについては指示通りに設置しますが、<head>用のコードについてはフッターに設置します。
これでも問題なく動作しますし、読み込みの順番が変わったことで表示速度やコアウェブバイタルへの悪影響が出なくなります。
お試しあれ。
おまけとして、フッターに設置するヘッダー用コードの最初
<script>のところを
<script defer>とするとより効果的です。
defer を設定することで、他の部分の読み込みが終わるのを待ってからタグマネージャーを読み込みますので、実質の遅延読み込み状態です。
Pagespeed Insight の得点でさらに万全を期したい場合は、コードを Luxeritas の広告ウィジェットに設置する方法もあります。
Luxeritas オリジナルの広告ユニットは強制的に最後に読み込みますので、より効果的な遅延読み込み状態になります。
ただし、Google Analytics の計測に影響します。おおよそ半減する印象です。
これが気になる場合は、Adsense のコードだけ Luxeritas の広告ウィジェットにするのも良いです。これだけで Pagespeed Insight のスコアは大きく上がります。
完璧な対応
SEO対策というのは基本的に、Googleのことだけを考えた対策は行うべきではないというのが個人的な考えなんですが、コアウェブバイタルへの対応は必須だろうと思います。
Googleに向けた対策ではありますが、高速な表示やレイアウトのズレが生じないウェブサイトは、アクセスしたユーザーに対しても快適な閲覧体験を提供することになると思います。
モバイルではなかなか高得点を獲得するのが難しいと考えられがちですが、この記事で紹介した
- Luxeritas を使う
- Layzyload の設定
- プラグインの選定
- タグマネージャーの設置
を参考にして頂ければ、きっと高得点を獲得できて高速な表示を実現すると思いますよ。