googleさんに自分のサイトを愛してほしい（願望）

SEOだけがすべてではない

下記のgoogleのサイトを使用すると、入力したURLのサイトのパフォーマンスを各観点から計測して、100点満点で評価してくれます。
私も気になったので、自分のサイトを投入してみました。結果は、おおむね満足ですが、パフォーマンスのみ61点でした。
とても、高い点数とは言えませんね。

詳細をのぞいてみると、Largest Contentful Paint　というものが一番足を引っ張ってしまってるようです。

Largest Contentful Paint (LCP)って何？

そもそもLargest Contentful Paint （LCP）とは何？と私はなりました。
googleさんが張り付けてくれていたリンクをたどってみました。

Largest Contentful Paint（LCP）は Core Web Vitals の 3 つの指標の 1 つであり、ウェブページのメインコンテンツが読み込まれる速さを表します。具体的には、LCP はユーザーがページの読み込みを開始してから、最大の画像やテキストブロックがビューポート内にレンダリングされるまでの時間を測定します。
引用元：　https://web.dev/articles/optimize-lcp?hl=ja

メインとなるコンテンツが、どれぐらいの速さで読み込めたかの指標のようです。
なるほど、メインとなるコンテンツが、いかに早く読み込まれるかは、サイトを閲覧するユーザーの評価と直結するのは、イメージがわきやすいです。

いろいろやってみた

画像を圧縮した

結果、下記の通り上がりました。

画像を400×400に圧縮
png → webpファイルに変換

webpファイルの使用は、googleさんからおすすめされたためです。

WebP 可逆圧縮画像は、PNG 画像と比べてサイズが 26% 小さくなります。WebP の非可逆画像は、同等の SSIM 品質インデックスで同等の JPEG 画像よりも 25 ～ 34% 小さくなります。
引用元：https://developers.google.com/speed/webp?hl=ja

ただ、画像の粗さが結構目立ってしまうので、400×400に落ち着きました。
ぼちぼち点数は上がりました。
もともとが、pngで、800x800ぐらいのサイズでしたので、効果てきめんですね。
サーバーのストレージにも優しいし、いいことづくめです。

画像のローディングのタイミングを調整

少し技術的な話になってきますが、正直、よくわかりませんでした。
結論は、下記のような差分になりました。
git diff {比較したいコミットid}とすれば、現在のブランチの最新の状態と差分を出してくれます。


@@ -25,6 +25,8 @@ const NewContents = (props) => {
             src={contentImagePath}
             width={400}
             height={400}
+            loading="eager" // {lazy} | {eager}
+            priority={true}
           />
           <CardContent className="space-y-5">
             <p className=" text-xl  sm:text-3xl font-bold">{mainTitle}</p>

これだけだと、？なので、NewContentsという自分が作成したコンポーネントの内容も一部記載しておきます。


const NewContents = (props) => {
  const contentImagePath = props.imagePath;
  const bodyContext = props.context;
  const mainTitle = props.mainTitle;
  const contentLink = props.contentLink;

  return (
    <>
      <Card className=" shadow-2xl rounded-lg p-3  w-64 h-80">
        <Link href={contentLink}>
          <Image
            className="rounded-lg  border "
            component="img"
            alt="mainPicture"
            src={contentImagePath}
            width={400}
            height={400}
            loading="eager" // {lazy} | {eager}
            priority={true}
          />
          <CardContent className="space-y-5">
            <p className=" text-xl  sm:text-3xl font-bold">{mainTitle}</p>
          </CardContent>
        </Link>
      </Card>
    </>
  );
};

export default NewContents;

NextJsのImageに下記二つを追加しただけです。

+            loading="eager" // {lazy} | {eager}
+            priority={true}

詳しい人からすると、「これ意味なくね」と突っ込まれそうですが、私も謎でわかってないのです。

eagerは、遅延読み込みをせずに、すぐに読み込む、ということです。今回であれば、メインコンテンツはlazyで遅延読み込みにして、メインコンテンツを真っ先に読み込ませるeagerを指定してあげて、LCPを稼ぐのかと思いましたが、そうすると点数が下がってしまったのです。
ですので、すべての画像にeagerをダメもとで渡してやると、なぜか点数が上がるという。。。

続いて、priorityは、preloadをするかどうかになります。こちらも、eagerと一緒で、メインコンテンツだけこれ指定してあげるのかと思ったら点数が下がり、、、もう謎です。

結局意図した修正にはなりませんでしたが、上記の修正で下記のとおりとなっております。

デスクトップ版では、かなり点が高いです

今までさんざん、点数が低くて悩んでいる、というので話してましたが、実は、「携帯電話」の時の話です。
このgoogleさんのページですが、「携帯電話」と「デスクトップ」といった観点で計測されており、今まで張り付けていたのは、携帯電話のほうです。
デスクトップのほうは、下記の通りハイスコアです。

のんびり、リファクタリングをしていこうと思います

結局よくわからずでしたが、ほかのサイトも見てみると、結構皆さん悩んでる内容のようです。
ドツボにはまってしまうと、これからの作業が嫌になってもダメなので、のんびり気づいたときに修正していこうと思います。

参考サイト

https://zenn.dev/shimabukuromeg/articles/9a9ac2006f0efd

https://oops0011.blog.fc2.com/blog-entry-571.html