JetTheme v2.9 にアップデート。ページエクスペリエンスの改善を期待

重い腰を上げて、ようやく JetTheme v2.9 にアップデートしました。

旧版テンプレートにはすでに多くのカスタマイズを施していたので、修正は大変そうだなと先延ばしにしていて、そのうちに「現状で不都合もないし面倒だし、アップデートはしなくても良いかも」と思い始めてたんですが。

ついにアップデートした理由は、Google Search Console のページエクスペリエンスの低下。

詳細を見ると LCP に問題が出ているとのことでした。

とりあえず PageSpeed Insights を見てみると、確かに LCP は悪くてどのページも 2.5 を超えていました。

しかし、これといった原因が特定できず。

モバイルのスコアは 90 〜 95 くらいでそんなに悪くないし、指摘されるのは Bootstrap の CSS ファイルの「レンダリングを妨げるリソースの除外」と、「最初のサーバー応答時間を速くしてください」という対処不能のやつ。

「最初のサーバー応答時間」については前々から指摘は出ていましたが、最近やたら画像表示が遅いのは気になっています。でもこちらとしてはどうしようもできません。

Bootstrap に関しては、アップデート版の v2.9 テンプレートを見てみると CSS ファイルの箇所が非同期処理をする記述に変わっていました。

じゃあとりあえずということで、Bootstrap の箇所だけ変えてみたところ今度は別の指摘が。。一部だけ変えても最適化されないようだったので、この機会にアップデートしようと決めました。

アップデートでページエクスペリエンスが改善されるなら原因探しをしなくて良いので。。

あの急降下グラフを見たら急に危機感が出ましたね。

※追記（2022/4/1）
結局、LCP の悪化は JetTheme のバージョンの問題ではありませんでした。別の場所に原因があり、現在修正中です。

アップデートはまぁまぁ大変でした。

Bootstrap の良さが裏目に出たというのか、カスタマイズの際に CSS だけじゃなく HTML 側にも結構クラスを追記したり書き換えたりしちゃってたんですよね。

できれば既存のテンプレートにアップデート分のみ追記したかったんですが、カスタマイズしすぎてて差分すらよくわからないという状態。

追記で済ませるのはほぼ無理っぽかったので諦めて、ほかの JetTheme ユーザーの方のように v2.9 テンプレートに再度カスタマイズを施す形になりました。

作業としては、テストブログに v2.9 を反映させてカスタマイズしてから、本番ブログに反映して最終調整。現在はまだ、修正漏れなどの不備がないかブログ全体を見て回っているところです（気晴らしにこの記事を書いてます）。

カスタマイズは何をどうやってやったんだっけーと思い出すところからでしたが、自分が前に書いた JetTheme のカスタマイズ記事がおおいに役立ちました。

今回のアップデート、修正はまぁまぁ大変でしたがカスタマイズを整理する良い機会だったと言えるかもしれません。

JetTheme 導入時は細かい部分もいろいろカスタマイズした気がしますが、今回は面倒だし大差ないし別にいっか、となる箇所も多数。今後またアップデートがあるかもしれないので、適度に適当に終わらせました。

ついでにデザインやブログロゴも変えました。

ブログロゴは再び Inkscape を使って SVG で作り直しましたが、２回目だったので20分くらいでできました。

ページスピードに関しては、Bootstrap の CSS ファイルの指摘は出なくなってました。よかった。

あとは、ページエクスペリエンスが改善されるのを待つだけです。

※追記：２カ月経って、ようやく改善されました。