このページに書いてあること
コアウェブバイタル (Core Web Vitals)とは
Core Web Vitalsは最近広っている概念のことで、特にページ読み込み時のページ体験に大きな影響を与える指標です。
2021年の5月より、モバイルのみ（スマートフォン）ですが検索順位にも影響することがGoogleより公式に発表されました。
SEOに関わる担当者様たちは深掘りされている方も多いのではないでしょうか。
サイト内部のコーディングが大きく関わってくるので、自信がない方はエンジニアさんたちと連携をとりながら対応しましょう。
コアウェブバイタルそのものについては過去記事で解説しています。根本的な部分についてはこちらご参照ください。
SEOに欠かせない表示速度の改善とCWV（コアウェブバイタル）
コアウェブバイタルの改善方法とは
Pagespeed Insights
今回は、ページの速度を図る際に使用するツール「Pagespeed Insights」を元にお話をしていきます。
使われた方はわかると思うんですけれども、毎回点数が表示されている下に、改善が必要な項目が表示されます。
この項目は約36個近くあります。全てを詳しく1記事で紹介することは厳しいので、よくあるエラーを取り上げて解説と対処法をお話ししていきます。
レンダリングを妨げるリソースの除外
多分この項目は大抵出るんじゃないかと感じます。
普段、フロントエンドに関わっていない方にとっては言葉の意味もわからないと思います。
レンダリングとは、元にあるデータ（サーバー側）を整形して表示する（chrome等のブラウザ側）ことです。
「Webページの描写に時間がかかっているので、改善してね」という感じです。
Webページは、「HTML」を使用して作られていますが、動きや装飾には「CSS」や「JavaScript」などが使用されています。
便利で見た目も整えてくれる反面、プログラムを読み込むという動作が必要になり、負荷がかかってしまいます。
その負荷がどれくらいかかっているかによってページが表示される速度に影響するというわけです。
特に「WordPress」にはプラグインなどの便利な機能が多い反面、「JavaScript」が多く使用されています。
レンダリングを妨げるリソースの除外の解決方法
では一体どのようにして対応すれば良いのでしょうか。
具体的には、
- JavaScriptの遅延・非同期読み込みをする
- CSSのファイルの遅延読み込みをする
となります。
遅延・非同期読み込み
基本的なプログラムの読み込みは上から順番に1行ずつ読み込まれていきます。
そして、各行の処理が終わってから次の行の処理へと移っていきます。
これを同期処理と言います。
今回の対応方としては、その反対で「非同期処理」を行う手法です。
まず前提としてのデメリットをお伝えしておきますが、CSSやjavaScriptは見た目に大きく影響するファイルがいくつもあると思います。
修正をするファイルはページの描写に影響力が大きくないものを選ぶようにしてください。
各ファイルがどのくらいページの描写に使われているか、またはいないのかをクロームの「デベロッパーツール」で確認できます。
Windowsの方は「F12」、Macの方は「Command+option+I」で表示されます。
ソース画面の左下にある「:」のようなmoretoolのボタンを押すと「Coverage」という項目があるので選択して指示に従いましょう。
そうすると、ページ使用されているCSSとJavaScriptのファイルが表示されて、使用している割合をグラフで表してくれます。
赤い色の割合が多いほど使用していない比率が高いという認識になります。
JavaScriptを非同期読み込みにする
scriptタグ内に「async」もしくは「defer」というワードを付与する方法です。
この追記によって、ファイルの読み込みが非同期で行われて、HTMLの読み込みまでの時間が早くなるという方法です。
ちょこっと追加するだけです。大きなエラーは起こりにくいと思いますが、表示確認をして実装してください。
「async」に関してはむやみに付与してしまうと、スクリプトが思うように動作しない場合もありますので注意してください。
CSSを遅延読み込みする
JavaScriptにおけるdefer属性のようなものは、CSSでは用意されていませんが、別方法で、CSSも非同期にし、HTMLパースをコントロールできます。
linkタグの属性rel=”stylesheet”の値を”preload”にすればCSSファイルの読み込みを非同期にできます。
しかしこの方法では、ブラウザのサポート状況がバラバラであり、完全には対応できません。
そこで採用したいのが、linkタグのmedia属性を書き換える方法です。
記述方法
<link rel="stylesheet” href="/path/to/my.css” media="print” onload="this.media='all'">Code language: HTML, XML (xml)media属性に“print”を指定すると、印刷用のスタイルシートと解釈され、HTMLパース完了後に読み込まれるようになります。
それをonloadに記述したJavaScriptによって、読み込み後にmedia属性を”all”に変更するのです。
こうすることでHTMLパース完了後にCSSの読み込みが行われるようになります。
ファーストビューの表示に関与しないCSSのデータ量が大きい場合は、このようにして表示速度を速めることも可能です。
プラグインを使用する
Autoptimizeというプラグインを使用する方法です。
ワードプレスをお使いで、あまり難しい作業が苦手な方は、こちらで対応した方が楽だと思います。
JavaScriptオプションの設定
JavaScriptオプションの欄で
- JavaScriptコードの最適化
- JSファイルを連結する
の2箇所の欄にチェックを入れておきましょう。
最適化については、ファイル内の改行などを取り除いてJavaScriptファイルを圧縮してくれます。
連結するについては、リンクされているJavaScriptファイルをブロッキングしないように非レンダリングとしてロードするように集約するかどうかの設定です。
CSSオプションの設定
- CSSコードを最適化
- CSSファイルを連結する
- インラインのCSSを連結
の3箇所の欄にチェックをつけましょう。
内容は上記のJavaScriptと同じです。
インラインのCSSを連結の欄はHTML内に記述されているCSSを対象にするかどうかのことです。
「難しいことはわからないけれど、とりあえず対応はしたい」
という方には、このようなプラグインを使用して対応されるのが良いと思います。
まとめ
どうしても、表示速度の話題になると少し難しい要素が多くなってしまいます。
特に、JavaScriptやCSSは触り方を間違えてしまうとサイトの表示が壊れてしまいますので、
不安な方はバックアップを必ず取ったり、少しずつ表示を確認しながら作業しましょう。
わからない点はお気軽にご相談ください
この記事が多少なりとも、お役に立てばと思います。
今回は結構テクニカルなお話も多かったので、ある程度ウェブに関する知識がないと難しい部分もあると思います。
記事を読んで不明な点等がありましたらお気軽にTwitter（@kaznak_com）などでご質問ください。
では失礼します。
