Libx Awesomeリスト

    このページの内容

    Awesome Web Performance Budget

    Web Performance Budgetを扱う資料や関連プロジェクトをまとめたAwesomeリストです。

    目次

    記事

    Performance Budgetを測定するツール

    • Performance Budget Calculator - サイトのPerformance Budgetを計算します。
    • Web Page Test - パフォーマンスをテストします。
    • lightest app - 競合他社に対するウェブパフォーマンスを可視化します。
    • Speed Curve - ウェブパフォーマンスを測定し、今日のパフォーマンスメトリクスを取得します。
    • Yellow Lab Tools - 重いウェブページの高速化を助けるオンラインテスト。
    • Sitespeed.io - ウェブサイトのパフォーマンスを容易に監視・測定します。
    • Perf Track - 大規模なフレームワークパフォーマンス追跡。

    オープンソースツール

    • Perfume.js - フィールドデータをお気に入りの分析ツールへ報告する小さなウェブパフォーマンス監視ライブラリ。
    • Falco - ウェブサイトの監視、分析、最適化を支援します。

    Performance Budgetを設定するビルドツール

    • Bundle Size - バンドルサイズを管理します。
    • Webpack Perf Budget - プロジェクトでWebpackを使用している場合に選択できます。
    • Lighthouse - lighthouseを使用してperformance budgetを設定し、Lighthouse botで自動化する方法。
    • Grunt-perfbudget - パフォーマンスバジェット用Gruntタスク。
    • Size Limit - 優れたパフォーマンスを維持するため、JSアプリまたはライブラリ実行の実際のコストを計算します。コストが上限を超える場合にpull requestでエラーを表示します。
    • Size Plugin - 圧縮済みWebpackアセットサイズを時間経過とともに追跡します。
    • Performance Budget Builder - テンプレートタイプを配置し、各テンプレートタイプにサイズバジェットを設定してから、テンプレート内でロードされる各アセットカテゴリのサイズを組み込みます。
    • Progressive Web Metrics - テンプレートタイプを配置し、各テンプレートタイプにサイズバジェットを設定してから、テンプレート内でロードされる各アセットカテゴリのサイズを組み込みます。
    • rollup-plugin-size-snapshot - Lighthouse経由でパフォーマンスメトリクスを収集するCLIツールとライブラリ。
    • ImportCost - VS Extension - インポートしたパッケージのサイズをVS codeエディター内にインライン表示する拡張機能。

    バンドルアナライザー

    • Bundlephobia - npmパッケージをバンドルへ追加するコストを見つけます。
    • bundle-buddy - JavaScriptのchunks/splits間のソースコード重複を見つけるのに役立つツール。
    • webpack-bundle-analyzer - バンドル内容を便利で対話的にズームできるツリーマップとして表すWebpackプラグインとCLIユーティリティ。
    • Disc - browserifyプロジェクトバンドルのモジュールツリーを可視化し、肥大化を追跡します。
    • lasso-analyzer - Lassoで作成したプロジェクトバンドルを分析・可視化します。
    • Rollup Visualizer - スペースを取るモジュールを確認するためRollupバンドルを可視化・分析します。
    • Parcel plugin Visualizer - バンドル内容を可視化するparcel bundler向けプラグイン。
    • CSS Analyzer - CSSセレクターの複雑性・パフォーマンスアナライザー。

    ウェブサイトアナライザー

    • Lighthouse Metrics - Lighthouse Metricsはサイトパフォーマンスに関する簡単な洞察を提供します。複数の場所からテストを実行して、必要な価値ある洞察を得ることで時間を節約できます。
    • UITest.com Site Check - 80以上のツール（ウェブベース・無料）でウェブサイトをテストします。
    • PageGuard - 無料のウェブサイトヘルススキャナー。Core Web Vitals（LCP、FCP、CLS、TTFB）、パフォーマンススコアを測定し、AI駆動アクションプランを提供します。登録は不要です。

    ブログ

    ポッドキャスト

    動画

    書籍

    事例

    ライセンス

    CC0