Feb 11, 2021

Lighthouseの点数が34点と悪いのであれやこれやと対策、でも結局、70点止まりでした。

Lighthouse の点数が 34 点と悪いので Nginx の設定や画像ファイルなどを見直して私の環境では 70 点止まりでした。SSR から SEO のために Full Static Generation で SSG にしましたが、Nuxt から Gatsby にしようかなぁ・・・後日談 Gatsby にしたら 92 点をただきだしてくれました。

Lighthouse の指摘内容

たくさんの指摘があるようです。とりあえず赤い ▲ 指摘を対応したいと思います。

Lighthouse!

Nginx のチューニング

▲テスト圧縮を有効にする。 ▲効率的なキャッシュポリシーで静的アセットを提供する。

Lighthouse の指摘をみると json ファイルが圧縮されていませんでした。またキャッシュ TTL が無となっていることもわかりました。

TTL を 30 日にしました。

server {
listen 443 ssl http2;
listen [::]:443 ssl http2;
server_name www.akiboi.duckdns.org;
location / {
expires 30d;
root /usr/share/nginx/html
index index.html;
}
}

gzip_type に json ファイルを追加しました。

http {
・・・
gzip on;
gzip_types text/plain application/xml text/css application/javascript application/json;
gzip_min_length 1000;
・・・
}

nuxt と画像ファルのチューニング

▲画像を適切にする。 ▲レタリングをブロックするリソースを解除する。

画像ファイルは jpg から webp に変更し、カードイメージの画像は小さくしました。レタリンングをブロックしているものは、Google Analystics のスクリプトが最初に動作していたので、最後に動くようにしました。

export default {
  ・・・
   script: [
      {
        hid: 'GAsrc',
        src: 'https://www.googletagmanager.com/gtag/js?id=' + process.env.GAID,
        async: true, defer: true, body: true
      },
      {
        hid: 'GAcode',
        innerHTML: `window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', '${process.env.GAID}');`,
      }
    ],
  ・・・

点数は、60〜70 点ぐらになりましたが、それ以上はなかなか上がりません。Chrome の検証を使って Network の状況を観察してみました。db-xxxxx.json ファイルを長く読み込んでおり、それが終了すると記事がレタリングされるようでした。このファイルを読み終えるまでは記事の内容、テキストが表示されないのはよくないと思いました。このファイルは全記事が登録されており、記事が増えれば線形的に肥大化する懸念があると感じました。 このファイルをなんとか分割できないか試してみましたが、無理そうで諦めました。

自宅内のサーバ、ネットワークではほとんど気になることはありませんでしたが、Netlify の海外サーバに接続してみてみると表示までにワンクッションあるように感じました。

Nuxt も SSR の場合はいいのですが、今回のように Full Static Generation を使って SSG にする場合はコンテンツが多くなるブログなどには向かないかなと感じました。SEO のために SSG にしましたが、SSR に戻すか、それとも別のものに切り替えた方がいいかと感じました。

アプリ屋さんが前提ですけど、React でガリガリ書いて SEO 狙うなら、Gatsby,あるいはエンジニアでなくてもテンプレート使ってさっとブログ公開したい人も Gatsby かなと思います。一方で大規模、フロントエンジニアとバックエンドエンジニア分けて構築する Web やトップページや Tag、記事一覧などは静的ファイルに Genarate として、記事本体、あるいは動的なデータは、バックエンドサーバ側から API で連携して提供するような構成は Nuxt かなと思っています。Rect は短くやりたいことかけるけど Nuxt も Vue composition api になってからはなかなかのものと感じます。

点数が頭打ちになってきて悔しいので、半年くらい Nuxt で楽しみましたので、Gatsby にして、Vue から React に戻ろうかなぁと思います。なんか色々やって一周回ったような。

次回は Nuxt ベースのこのブログを Gatsby に変えた時の備忘録を残したいと思います。Gatsby にしたら 98 点まで一気に上がりました。