【LCP改善で+17点!】Blogger「JetTheme」のPageSpeed Insightsを84点に上げる注目記事(JetFeaturedPost)コード修正

Bloggerのテンプレート「JetTheme」の注目記事（JetFeaturedPost）のLCP問題を改善させる！

下の方になぜこの数値になっているのか原因などが書かれたインサイトや診断といったスペースがありますが、大体はユーザーでどうにか出来る問題ではないのが多いです。が、ユーザーでも一部改善出来る部分がありました！

注目記事（JetFeaturedPost）のLCP問題を改善！

「JetTheme」に注目記事（FeaturedPost）機能がありそれを使うと少しパフォーマンスが落ちるようです。パフォーマンスが落ちる原因としては”画像遅延読み込み”、”取得優先度が低い”、”画像が仮URLだから検出が出来ない”の3つが「PageSpeed Insights」の計測結果に出ていました。

注目記事（FeaturedPost）の改善方法は”テンプレートのコードを書き換える”です。

コード書き換え方法

※コードを書き換える前にバックアップを取るかテストブログなどで効果がきちんと出るかおかしな挙動にならないか確認をお願いします。

テーマ→カスタマイズ横の逆三角メニュー→HTMLを編集→Ctrl + Fで”JetFeaturedPost”のコードを探す

b:includable id='JetFeaturedPost'

テンプレートを少しいじってあるので正確な段数ではないけど2100段周辺にあるはです。

そこから8段くらい下がったところに＜img expr:alt='data:post.title'~というコードがあるはずです。

<img expr:alt='data:post.title' expr:class='data:post.featuredImage.isYoutube ? &quot;object-cover lazyload&quot; : &quot;lazyload&quot;' expr:data-src='data:post.featuredImage.isYoutube ? data:post.featuredImage.youtubeMaxResDefaultUrl : data:post.featuredImage' loading='lazy' src='data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='/>

↑このコードすべてを↓のコードに差し替えるとLCP問題は解決出来ると思います。

<img 
 expr:alt='data:post.title'
 class='object-cover'
 expr:src='data:post.featuredImage.isYoutube ? data:post.featuredImage.youtubeMaxResDefaultUrl : data:post.featuredImage'
 loading='eager'
 fetchpriority='high'
 />

このコードで注目記事（FeaturedPost）に使われている画像を本物のURLから表示するようにし、遅延読み込みを解除、読み込み優先度が高い状態になります。これでPageSpeed Insightsで指摘されていた3項目の問題は解決です！

パフォーマンスの数値が”84”になったけどそこまで大きく改善はしていないけど少しはマシになる程度の効果はあると思うので試してみても良いかも。

さらに改善をするなら使う画像の種類を”webp”にし画像の幅を600px辺りに抑えるとパフォーマンスの数値は良くなっていくと思います。

あとがき

このコード修正を適用した後、何度かテストを繰り返しましたが、パフォーマンスの数値は60点台には落ちなくなったため、効果は確実にあったと言えるでしょう。

ちなみに、当ブログは2025年8月に実施されたGoogleスパムアップデートの影響で、現在検索流入が不安定な状態です。サイトの見直しを続ける日々ですが、検索がいつ戻るのかは不透明ですね...。

ただ、表示速度の改善はSEOの基本中の基本です。検索順位が戻るかどうかに関わらず、今回ご紹介した「JetFeaturedPost」のLCP対策は試す価値大です。ぜひ皆さんのブログにも適用してみてください！