WebPerformance

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

投稿日:

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 で検索できるとよいなと思いました。

📂-WebPerformance

執筆者:labo


comment

メールアドレスが公開されることはありません。

関連記事

Web Vitals

CLS はページを表示する最初の段階で決まることが多い

CLS はページアクセスの最初の段階で決まりそうという話です。

Web Vitals

Webページの高速化とSEOの関係

Webページの高速化とSEOの関係について書きます。

Web Vitals

AdSense の自動広告が CLS に与える影響について

CLSと、AdSense の自動広告についての考えを書いています。

Web Vitals

PageSpeed Insightsによる「スクロール パフォーマンスを高める受動的なリスナーが使用されていません」について

PageSpeed Insights などで指摘される「スクロール パフォーマンスを高める受動的なリスナーが使用されていません」についてです。

Web Vitals

async script をより早く実行させる

async script をより早く実行させる方法を紹介します。