Be Yours には、最初のページの読み込みを大幅に高速化する機能が付属しています。
このページでは
仕組み
通常、ブラウザはページ上のほぼすべての要素をレンダリングします。たとえトップにいたとしても、ページの下部にある部分は依然として関与しています。
しかし、もうそうではありません。 content-visibilityと呼ばれる新しい CSS プロパティが登場しました。これらの複雑な用語は無視してもよいでしょう。視覚化するために、この手法では、ページの要素がビューに表示される直前まで、その要素のレンダリングをスキップします。この機能は Be Yours に統合されました。レイアウトの多いセクションなど、特定のページ セグメントのレンダリング作業を延期し、表示される直前になったときにのみレンダリングするようにブラウザーに指示できます。
私たちのデモでは、ホームページのセクションにcontent-visibility適用すると、初期読み込み時のレンダリング パフォーマンスが 5 倍向上します。
長所と短所
これにより、ページ内検索や SEO を損なうことなく、長いページのレンダリング コストを削減できるのは明らかです。ドロップシッピング ストアと、製品やコレクションを表すホームページ上の多くのセクションがあると想像してください。または、ランディング ページに大量の画像が埋め込まれている一種のショーケース ストアであり、この技術はこうしたケースに有益です。
ただし、この手法には制限やバグもあります。ページをスクロールすると、スクロールバーがかなりギザギザになっていることがわかります。これは、レンダリングされる新しいコンテンツに合わせてページ コンテンツが調整されていることです。また、レンダリングされていない要素はレイアウト内で高さが失われるため、マウスのスクロールに応じてコンテンツが少し遅れて表示されることがあります。
この手法は完全な互換性がないことに注意することも重要です。現在、Firefox と Interner Explorer ではサポートされていません。
