前回までは「記事の中身（味）」の話をしてきたが、今回は「店の居心地」の話だ。
いくらラーメンが絶品でも、注文してから出てくるのに1時間かかり、椅子がガタガタし、店員が注文を何度も聞き間違える店には、二度と行かないだろう。
Googleも同じだ。
「遅いサイト」「使いにくいサイト」を親の仇のように嫌っている。
サチコの左メニューにある「エクスペリエンス」。ここは、そんなGoogleの小姑根性が爆発しているエリアだ。
サチコのメニューにある「ウェブに関する主な指標」。
クリックすると、またしても意味不明なアルファベットが飛び出してくる。
LCP、FID、CLS…。
これらは、Googleが定めた「サイトの健康診断基準（コアウェブバイタル）」だ。
直訳すると「Webの重要な生命兆候」。つまり、これの数値が悪いと、あなたのサイトは「死にかけている」と判定される。
難しく考える必要はない。Googleが怒っているポイントはたった3つだ。
1. LCP（遅すぎる！）
意味：メインのコンテンツが表示されるまでの時間
Googleはせっかちだ。
「ページを開いて2.5秒以内にメインの画像や文章が出なければ、ユーザーはイライラして帰ってしまう」と考えている。
もしあなたのサイトが「不良（赤）」と判定されていたら、それは「前菜が出てくるまでに30分かかる店」だと言われているのと同じだ。
原因の多くは、「画像のサイズがデカすぎる」ことにある。
スマホで撮った数MBの写真をそのまま貼り付けていないか？ それはWebの世界では「岩」を投げつけているようなものだ。圧縮しよう。
2. CLS（ズレる！）
意味：レイアウトのガタつき
あなたも経験があるはずだ。
スマホで記事を読んでいて、「次へ」ボタンを押そうとした瞬間、遅れて広告画像がヌルっと表示され、ボタンの位置がズレて、間違って広告を誤クリックしてしまったことが。
あの瞬間の殺意。
あれがCLS（Cumulative Layout Shift）だ。
Googleは、この「レイアウトのズレ」を極端に嫌う。ユーザーを騙す行為に近いからだ。
画像には必ず「サイズ（幅と高さ）」を指定すること。これだけで、読み込み時のガタつきは防げる。
3. INP（反応しない！）
※以前はFIDだったが、今はINPという指標が主流だ。
ボタンを押したのに、無反応。
「あれ？押せてない？」と思って連打したら、急に反応して二重注文になってしまった。
この「操作に対する反応の遅さ」がこれだ。
重たいプログラムが裏で動いていると起こりやすい。
もう一人の小姑：「モバイルユーザビリティ」
「ウェブに関する主な指標」の下にある、「モバイルユーザビリティ」。
ここをクリックして、もし「赤色」のエラーが出ていたら、即刻修正が必要だ。
よくあるのがこれだ。
「クリック可能な要素同士が近すぎます」
これはGoogleからの、非常に失礼なメッセージだ。要訳するとこうなる。
「お前のサイトのリンク、隙間がなさすぎて、ユーザーの太い指では押せないぞ」
行間を空けるか、ボタンを大きくしてあげよう。
スマホ全盛の時代、PCで綺麗に見えても、スマホで使いにくければ、そのサイトに価値はない。
結論：全部「緑」にする必要はない
ここで完璧主義者のあなたに伝えておく。
この指標を全て「100点満点（すべて緑）」にするのは、プロのエンジニアでも骨が折れる作業だ。
-
「不良（赤）」 → これはヤバい。順位を落とされる原因になる。早急に対処が必要だ（画像を圧縮する、テーマを変えるなど）。
-
「改善が必要（黄）」 → まあ、許容範囲だ。暇な時に直せばいい。
-
「良好（緑）」 → 神。
個人ブロガーレベルなら、まずは「赤をなくす」ことだけを考えればいい。
多少表示が遅くても、中身（記事の内容）が面白ければ、読者は待ってくれる。……まあ、3秒が限界だが。
さあ、次でラストだ
ここまで、所有権の確認から始まり、記事を書き、インデックスさせ、小姑に文句を言われるところまでやってきた。
次回はいよいよ最終回。
「日々のルーティン：サチコとコーヒーと私」。
これまでの知識を総動員して、毎日何をチェックし、どうやってサイトを育てていくのか。
サチコとの「正しい付き合い方」をまとめて、このブートキャンプを卒業としよう。
（第9回 終了）
コメント