1. はじめに
Bento が発表されました。
これは、AMPで培われたノウハウを生かして作られた、Web Components / React(&Preact) 製のコンポーネント・ライブラリです。ですので、普通のHTML上から使えます。
今回は、この Bento のコンポーネント (Web Components版) を実際に利用した Webページを作り、ページの読み込みパフォーマンスをチェックしてみました。
2. デモページ
作成したデモページは、こちら →「Bento Components を試す」です。
Bento のコンポーネント(Web Components版)をいくつか実装しています。
3. Chrome (Canary 98) の Lighthouse の実行結果
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つです。
こちらは、特定のコンポーネントに対しての内容で、それほど大きな問題というわけでもありません。
4. PageSpeed Insights の結果
PageSpeed Insights を実行した結果がこちらです。
※「携帯電話」用テストの結果です。
概ね良好です。先程と同様、 Core Web Vitals の各項目(LCP, CLS, TBT(FIDの代わり))も問題ありません。
問題点などは、こんな感じでした。
Lighthouse で指摘されたのと同じ項目もあります。
※ 今回は、この検知された各問題点については触れません。
5. おわりに
Bento のコンポーネント (Web Components 版) は、読み込みパフォーマンスが高いことが確認できました。
「読み込みパフォーマンスに悪影響を与えない」というのは、コンポーネントの最低要件ですね。
あと、Bento のコンポーネントが、webcomponents.org で検索できるとよいなと思いました。