これにより、ローダーがわずかに早く表示されるようになります…
検索順位に影響する知覚パフォーマンスに関する情報源はありますか?それとも FCP/LCP のことをおっしゃっていますか?FCP や LCP は知覚に基づく概念ですが、具体的な定義と技術的な要件を持っています。また、FCP は Google の「Core Web Vitals」には含まれていません(LCP は含まれます)。
Largest Contentful Paint (LCP) | Articles | web.dev からの詳細情報:
現在、Largest Contentful Paint API で指定されている Largest Contentful Paint に含まれる要素の種類は以下の通りです:
<img>要素<svg>要素内の<image>要素<video>要素(ポスター画像が使用されます)url()関数で読み込まれた背景画像を持つ要素(CSS グラデーション ではなく)- テキストノードまたは他のインラインレベルのテキスト要素の子を持つ ブロックレベル 要素。
ページが DOM から要素を削除した場合、その要素はもはや考慮されなくなります。同様に、要素に関連する画像リソースが変更された場合(例:JavaScript を介して
img.srcを変更)、新しい画像が読み込まれるまで、その要素は考慮されなくなります。
これらの要件により少し複雑になりますが、DOM から削除するのではなく、別の方法で非表示にすれば、大きな画像やテキストを含むローダー要素が機能するかもしれません?上記のスピンナーは z-index を使用して自身を非表示にしているため、これが機能するかもしれません… ただし、スピンナー自体では不十分です。なぜなら、それは画像でもテキストでもない(CSS)ためです。
低速回線のユーザーにとって何らかのローダーが有用であることに同意しますが、Google に対しては特定の条件を満たす必要があります(また、それが OP が提起した問題を解決するかどうかは不明です)。