CoreWebVitals-FID指標の改善

[tamakiki]

こちらもSEO業者に依頼されている問題を解決したい。

CoreWebVitals-FID指標の改善をしたいのですが、方法を教えてください。

CWV（コアウェブバイタル）系３つあります。

以下、対象ページです。

・TOPページ

・記事詳細ページ

・商品一覧ページ

・商品詳細ページ

1. JavaScriptの処理速度の改善

└ロングタスクの分割

└ファーストパーティスクリプト処理の最適化

└サードパーティースクリプト処理の最適化

2.以下の対応を推奨

└レンダリングを妨げるリソースの除外（優先度：高）

　└重要な JavaScript や CSS はインラインで配信し、それ以外の JavaScript やスタイルはすべて遅らせる

└使用していない JavaScript の削減（優先度：高）

　└使用していない JavaScript を減らし、必要になるまでスクリプトの読み込みを遅らせる

└次世代フォーマットでの画像の配信（優先度：低）

　└JPG等の画像形式をWebPやSVG形式に変更

3. オフスクリーン画像の遅延読み込み

　└オフスクリーンの非表示の画像は、重要なリソースをすべて読み込んだ後に遅れて読み込むように設定し、操作可能になるまでの時間を短縮する

以上、大きくわけて３つの改善策教えてください。

アプリか、 Shopifyエキスパートに依頼して解決できるものなのかどうか、ご教授ください。

よろしくお願い致します。

[株式会社フルバランス · Accepted solution]

Tamakiki 様

お世話になっております。

フルバランスの道家と申します。

ご質問確認しました。

1. JavaScriptの処理速度の改善

・使用していないJSを削除する

・圧縮できるものは圧縮する

・特別なscript以外はdeferを追加する　参考サイト： https://digitalidentity.co.jp/blog/engineerblog/web-performance/how-to-read-javascript.html

ただ、アプリによって影響がでていることもあり、アプリを削除しないと改善しない場合もあるかと思います。

2.以下の対応を推奨

└レンダリングを妨げるリソースの除外（優先度：高）

└使用していない JavaScript の削減（優先度：高）

→1.と同じです。

└次世代フォーマットでの画像の配信（優先度：低）

　└JPG等の画像形式をWebPやSVG形式に変更

→参考サイト：https://www.rectus.co.jp/archives/396

3. オフスクリーン画像の遅延読み込み

　└オフスクリーンの非表示の画像は、重要なリソースをすべて読み込んだ後に遅れて読み込むように設定し、操作可能になるまでの時間を短縮する

→imgをlazyロードしてみてください。

参考サイト：https://www.rectus.co.jp/archives/358

上記の作業をしても、なかなかスコアが改善しないこともございます。

また、アプリで適したものがないかと思いますので、もし改善しない場合は専門の方に一度ご相談いただくのが良いかもしれません。

なにかヒントになれば幸いです。

私たちの励みにもなりますので、

お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。

フルバランス　道家

[tamakiki]

フルバランス　道家様

お世話になります。ご回答ありがとうございます。

ただ具体的な方法がわからないのと、アプリでは対応できなさそうなので、また実際にコードをその都度修正するのも大変そうなので、Shopifyの場合、かなり難しそうですね。

アプリの削除はよい解決作かもしれません。

この度はありがとうございました。