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

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

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

Web Vitals

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

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

Web Vitals

ファーストビュー上のアニメーションGIFはMP4に変換して使うことを検討する

ファーストビュー上のアニメーションGIFはMP4に変換して使うことを検討しましょう

Web Vitals

CLS対策:ページ上部にAdSense自動広告を表示させない

CLS対策:ページ上部にAdSense自動広告を表示させないようにしましょう。

Web Vitals

Lighthouse が指摘する「Serves images with low resolution」について

Lighthouse が指摘する「Serves images with low resolution」について。