Bento (Web Components版) の読み込みパフォーマンスを検証しました

1. はじめに

Bento が発表されました。

これは、AMPで培われたノウハウを生かして作られた、Web Components / React(&Preact) 製のコンポーネント・ライブラリです。ですので、普通のHTML上から使えます。

今回は、この Bento のコンポーネント（Web Components版）を実際に利用した Webページを作り、ページの読み込みパフォーマンスをチェックしてみました。

作成したデモページは、こちら →「Bento Components を試す」です。

Bento のコンポーネント（Web Components版）をいくつか実装しています。

Chrome (Canary 98) の Lighthouse (Mobile用テスト) を実行した結果がこちらです。

高いパフォーマンスが測定されました（PWA は除く）。

Core Web Vitals の各項目（LCP, CLS, TBT(FIDの代わり)）も問題ありません。

その中でも、一番問題のあった箇所は以下です。

この問題は、GitHub の Issues に報告（Remove duplicate modules in JavaScript bundles · Issue #36291 · ampproject/amphtml）されていましたが、まだレスポンスはないようです。

※ パフォーマンスのスコアには関係ない項目のようです。

あとは、以下の2つです。

こちらは、特定のコンポーネントに対しての内容で、それほど大きな問題というわけでもありません。

PageSpeed Insights を実行した結果がこちらです。

※「携帯電話」用テストの結果です。

概ね良好です。先程と同様、 Core Web Vitals の各項目（LCP, CLS, TBT(FIDの代わり)）も問題ありません。

問題点などは、こんな感じでした。

Lighthouse で指摘されたのと同じ項目もあります。

※ 今回は、この検知された各問題点については触れません。

Bento のコンポーネント (Web Components 版) は、読み込みパフォーマンスが高いことが確認できました。

「読み込みパフォーマンスに悪影響を与えない」というのは、コンポーネントの最低要件ですね。

あと、Bento のコンポーネントが、webcomponents.org で検索できるとよいなと思いました。