Libx Awesomeリスト

    このページの内容

    Awesome WPO

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

    目次

    収録カテゴリの概要です。

    エージェントスキル

    Web品質監査と最適化ワークフロー向けのエージェントスキルです。

    • web-quality-audit - すべてのカテゴリにおける包括的な品質レビュー。
    • core-web-vitals - LCP、INP、CLSに特化した最適化。
    • accessibility - WCAGの適合性、スクリーンリーダーのサポート、キーボードナビゲーション。
    • performance - 読み込み速度、実行効率、リソース最適化。
    • best-practices - セキュリティ、現代的なAPI、コード品質パターン。

    記事

    awesome-wpo.devまたはARTICLES.mdで閲覧できます。

    書籍

    WPOに関する主要な書籍です。

    事例研究

    • WPOStats - ウェブパフォーマンス最適化（WPO）がユーザー体験およびビジネスメトリクスに与える影響を示すケーススタディと実験
    • Google Developers Case Studies - 他の開発者がウェブを活用してユーザーに素晴らしいウェブ体験を提供した理由と方法を学ぶ

    ドキュメント

    • PageSpeed Insights Rules - Web性能のAPI、測定方法、最適化手法に関する公式資料です。 非推奨です。2019年5月に停止予定とされ、Version 5ではChrome User Experience Reportの実利用データとLighthouseのラボデータが提供されます。
    • Best Practices for Speeding Up Your site - ヤホー！エクセレントパフォーマンスチームが作成した35のベストプラクティスを7つのカテゴリに分類したリスト
    • Chrome Developers: Performance - レンダリング、ロード、実行時のパフォーマンスに関する深掘りされたガイド
    • Lighthouse Docs - アудィット手法、スコアリングの詳細、使用ガイド
    • Code Splitting (Webpack) - JavaScriptバンドルを分割するための公式ガイド。初期ロードを速くし、必要に応じてロードできるようにする
    • Navigation Timing API (MDN) - ページナビゲーションとロードマイルストーンメトリクス
    • Navigation Timing Level 2 (W3C) - Web性能のAPI、測定方法、最適化手法に関する公式資料です。 responseStart requestStart
    • Resource Timing API (MDN) - アセットの詳細なネットワークタイミング
    • Long Tasks API (MDN) - メインスレッドブロッキング作業の検出
    • Paint Timing API (MDN) - 最初のパインティングと最初のコンテンツフルパインティングのシグナル
    • Largest Contentful Paint API (MDN) - LCPエントリへのプログラムによるアクセス
    • Layout Instability API (MDN) - レイアウトシフト（CLS）の測定と検証

    イベント

    コミュニティは重要です。

    カンファレンス

    • We Love Speed - ウェブパフォーマンスの知識と経験を可能な限り広く共有するという願いから生まれた
    • PWA Summit - プログレッシブウェブアプリ（PWA）で誰もが成功できるように支援する無料オンラインのシングルトラックカンファレンス
    • performance.now() - パフォーマンス.now()カンファレンスはアムステルダムに戻ってきます！我々は14人の世界レベルのスピーカーを擁するシングルトラックカンファレンスで、今日の最も重要なウェブパフォーマンスの洞察を提供します
    • PerfMatters - コンファレンスは、国際的に知られるパフォーマンス開発者たちが主催するオンラインウェブパフォーマンスコンファレンスです。

    Meetup

    awesome-wpo.devまたはMEETUPS.mdで閲覧できます。

    講演

    awesome-wpo.devまたはTALKS.mdで閲覧できます。

    ツール

    アナライザー

    • Request Map - 第一および第三パーティのリクエスト依存関係をインタラクティブなマップとして可視化します。
    • Web.dev - web.devによる有用なガイドと分析を活用し、自サイトやアプリにウェブの現代的な機能を導入します。
    • PageSpeed Insights - 任意のURLに対して、ラボおよび現場でのCWV診断を提供します。
    • PageGym - 経験豊富なユーザーおよび技術SEOプロフェッショナル向けの高度なページスピード分析および最適化ツール。
    • DebugBear - Lighthouseに基づくサイトモニタリング。スコアやメトリクスの変化を時系列で確認し、それぞれの変化がどのような原因で生じたかを理解できます。有料製品で、30日間の無料体験あり。
    • Page Speed - PageSpeedシリーズのツールは、サイトのパフォーマンスを最適化するためのサポートを提供します。PageSpeed Insights製品は、あなたのサイトに適用可能なパフォーマンス最適化のベストプラクティスを特定し、PageSpeed最適化ツールはそのプロセスを自動化するサポートを提供します。
    • Dareboost - [マルチアウト] パフォーマンス、アクセシビリティ、SEO、セキュリティのベストプラクティスを用いてウェブサイトの品質をテストします。
    • Screpy - [マルチアウト] AIベースのパフォーマン性、SEO、稼働状態、品質モニタリング。
    • YSlow - 高パフォーマンスウェブページのためのルールに基づき、ウェブページを分析し、パフォーマンス向上の方法を提案します。
    • Grunt-WebPageTest - WebPageTestを継続的に計測するGruntプラグインです。 Demo
    • Grunt-perfbudget - パフォーマンス予算を強制するGrunt.jsタスクです。 more on performance budgets
    • Web Tracing Framework - 複雑なウェブアプリケーションのトレースおよび調査に用いるためのライブラリ、ツール、可視化ツール。
    • Yandex.Tank - 高度なLinuxユーザー向けに拡張可能なオープンソースの負荷テストツールで、自動負荷テストセットの一部として特に優れたパフォーマンスを発揮します。
    • Yellow Lab Tools - オンラインで、フロントエンドの悪習慣を迅速かつ簡単に診断し、パフォーマンス問題を明らかにし、JavaScriptのプロファイリングを実行するツール。
    • Pagelocity - ウェブパフォーマンスの最適化および分析ツール。
    • Speed Racer - Chromeヘッドレスを使用して、あなたのライブラリ／アプリケーションのパフォーマンスメトリクスを収集します。
    • Lightest App - ウェブページの読み込み時間は、コンバージョンおよび収益に極めて重要です。競合他社とのウェブパフォーマンスを可視化します。
    • Redirect Checker - HTTPリダイレクトチェーンを分析し、ループを検出、ページ読み込み時間へのパフォーマンス影響を測定します。
    • Third Party Analysis Tool - WebPageTestの実行結果から、第三パーティリクエストのリスク、レンダーブロッキングの影響、および潜在的なシングルポイント・オブ・ファイルを検出します。
    • Web Font Analyzer - WebPageTestのデータを用いて、フォントの読み込みタイミング、パケットサイズ、グリフの使用を確認します。
    • Webfont Usage Analyzer - ロードされたウェブフォントを可視DOMの使用にマッピングし、フォント最適化の機会を特定するためのブックマークレットスクリプト。
    • Waterfall Tools - HAR、WPT JSON、Chromeのトレース/netlogs、tcpdumpキャプチャに対応した高度なクライアントサイドネットワークリクエストの水たまり表示ツール

    アナライザーAPI

    • PSI - Web性能解析機能をプログラムから利用できるAPIです。

    アプリケーション性能監視

    • Datadog APM - スケールした端末から端まで分散トレースとAPMを実現し、すべてのテレメトリを関連付けたもの
    • BetterUptime - 良いウェブサイト監視ツール（ステータスページとインシデント通知を統合）
    • Pingdom - あなたのウェブサイトの稼働率を確認できるツール（複数の場所からのプローブを用意）
    • UptimeRobot - 別の稼働率監視ツール（無料プランが豊富）
    • StatusList - 稼働率、パフォーマンス監視にデバッグ情報、そしてホストされたステータスページを1つのシンプルなダッシュボードで提供

    リアルユーザー監視

    • Catchpoint Real User Monitoring - ウェブアプリとネイティブモバイルアプリ向けのRUM（Real User Monitoring）で、Core Web Vitals、第三者影響、合成監視との相関（OpenTelemetryベース）
    • Atatus - フルスタックの可視化（RUM、APM、合成稼働率、セッション再現、OpenTelemetryを含む）
    • Datadog Real User Monitoring - ブラウザとモバイル向けRUM（セッション再現、Core Web Vitals、トレースとログとの相関）
    • New Relic Browser Monitoring - 実際のユーザーのブラウザ監視（Core Web Vitals、バックエンドへの分散トレース、デプロイマーカー）
    • SpeedCurve - 合成テスト、RUM、Lighthouse、Core Web Vitals、パフォーマンス予算、競合ベンチマークを統合したウェブパフォーマンス監視
    • Boomerang (Open Source) - Akamai社員が維持し、OSSコミュニティによる貢献を受けるオープンソース版Boomerangのドキュメンテーション
    • Akamai mPulse Boomerang - Akamai mPulse版Boomerangのドキュメンテーションで、mPulseとの相互作用に特化した追加機能を含む

    バンドル解析

    • Bundlesize - あなたのバンドルサイズを管理する
    • source-map-explorer - ソースマップを用いてバンドル空間の使用状況を分析・デバッグ
    • Bundlephobia - npmパッケージをフロントエンドバンドルに追加した際に生じるパフォーマンス影響を特定する
    • bundle.js.org - オンラインでnpmパッケージのサイズを確認できるツール
    • Webpack bundle analyzer - WebpackプラグインとCLIツールで、バンドルコンテンツを便利なインタラクティブなズーム可能なトレーマップとして表現
    • Disc - browserifyプロジェクトのバンドルのモジュールツリーを可視化し、膨張を特定する
    • Lasso-analyzer - Lassoで作成されたプロジェクトバンドルを分析・可視化
    • Compression Webpack plugin - アセットの圧縮版を準備し、Content-Encodingでサーバーに提供する。
    • BundleStats - バンドルレポート（バンドルサイズ、アセット、モジュール、パッケージ）を生成し、異なるビルド間の結果を比較する。

    ベンチマーク

    CSS、JavaScript、PHPのテストケースを作成し、異なる実装を比較するツール群です。

    • CSS-perf - CSSパフォーマンスを検証するための完全に科学的でない方法。これらのテストのほとんどは、効果的なCSSアーキテクチャを決定するための手法と技術に焦点を当てる。言い換えれば、特定のCSS戦略の比較において、どれが最も効果的かを知りたい。
    • JSBench - 現代的なブラウザベースのJavaScriptベンチマークツールで、パフォーマンステストを迅速に作成・共有できる。
    • Benchmark.js - ほぼすべてのJavaScriptプラットフォームで動作する強力なベンチマークライブラリ。高分解能タイマーをサポートし、統計的に有意な結果を返す。
    • JSlitmus - 軽量なツールで、即時的なJavaScriptベンチマークテストを作成できる。
    • Matcha - コードのパフォーマンスを測定するための実験を設計できる。各ベンチマークは、アプリケーション内の特定の影響点に焦点を当てるべきである。
    • Timing.js - ナビゲーションタイミングAPIを扱うための小さなヘルパー。アプリケーションがどれだけの時間をどの部分で消費しているかを特定できる。スタンドアローンスクリプト、DevToolsスニペット、またはブックマークレットとして利用可能。
    • Stats.js - このクラスは、コードパフォーマンスをモニタリングするためのシンプルな情報ボックスを提供する。
    • PerfTests - JavaScript継承モデルのパフォーマンステスト。
    • Memory-stats.js - JSヒープサイズをパフォーマンスメモリで監視するための最小限のモニタ。
    • JSPerf - ブラウザ、JavaScript、CSS、サーバー等の性能を比較測定します。 Follow this issue for updates: https://github.com/jsperf/jsperf.com/issues/537
    • PHPench - PHPベンチマークのグラフィカル出力：GnuPlotを使って関数の実行時間をリアルタイムでプロットし、結果の画像をエクスポートできる。
    • php-bench - PHPコードブロックのベンチマークとプロファイリングを行い、パフォーマンスの影響を測定する。

    ブックマークレット

    • Yahoo YSlow for Mobile/Bookmarklet - YSlowはウェブページを分析し、高性能ウェブページのルールに基づいてパフォーマンス向上の方法を提案する。
    • PerfMap - リソースタイミングAPIを使用して、ブラウザ内で読み込まれたリソースのフロントエンドパフォーマンスヒートマップを作成するためのブックマークレット。
    • DOM Monster - マルチプラットフォーム・マルチブラウザ対応のブックマークレット。現在のページのDOMおよびその他の機能を分析し、その健康状態を表示する。
    • CSS Stress - CSSのストレステストおよびパフォーマンスプロファイリング。
    • Performance-Bookmarklet - ブラウザ上でWeb性能情報を確認・操作するブックマークレットです。 Firefox Add-on

    CDN

    コンテンツ配信ネットワーク（CDN）は、インターネット上の複数のデータセンターへ配置された大規模な分散サーバーシステムです。高可用性・高性能で利用者へコンテンツを配信します。CDNの一覧はWikipediaを参照してください。

    • Cloudflare CDN - 次世代技術を活用したコンテンツ配信ネットワーク（CDN）で、高速かつ信頼性の高いCDNサービスを提供する。
    • PageCDN - 最新技術を採用したオープンソースCDN。brotli-11圧縮、HTTP/2サーバーパッシュ、より良いHTTP/2マルチプレクシングなどを活用し、コンテンツを積極的に最適化。100以上のライブラリと2000以上のWordPressテーマをサポート。使いやすく、リンクも簡単で非常に速い。
    • jsDelivr - Google Hosted Librariesに類似した、jsDelivrはオープンソースCDNであり、開発者は自らのプロジェクトをホストでき、誰でもそのホストされたファイルを自分のサイトにリンクできる。
    • Google Hosted Libraries - グーグルが運営する、最も人気のあるオープンソースJavaScriptライブラリ向けのCDN
    • CDNjs - クラウドファイアがスポンサリーするJavaScriptおよびCSS向けオープンソースCDN。jQueryやModernizr、Bootstrapなど、さまざまなライブラリをホストしています。
    • Amazon CloudFront - アマゾンが提供するコンテンツ配信ネットワーク（CDN）で、他のアマゾンサービスと統合されやすい、または独立して使用できる。
    • jQuery - MaxCDNによって提供される、最新の安定版リリース向けの公式CDN。
    • :cn: UpYun CDN - upyunが提供するCDNサービス。
    • :cn: Bootstrap 中文网开放 CDN 服务 - Bootstrapの中国ネットオープンCDNサービス（HTTPのみ）。
    • :ru: Yandex CDN - ヤンデックスコンテンツ配信ネットワークは、人気のある第三者JavaScriptおよびCSSライブラリをホストしており、ロシアでの利用に最適。
    • CDNperf - サイトの読み込み速度と安定性を高める、高速かつ信頼性の高いJavaScriptCDNを自動で検索します。
    • Gulp-google-cdn - スクリプト参照をGoogleCDNに置き換える。

    有料CDNを選ぶための追加情報はCDNPlanetを参照してください。

    Core Web Vitals

    • web-vitals - ブラウザ内でコアウェブビタル（LCP、FID、CLS、INP、TTFB）を正確に測定するための小さなライブラリ。
    • Lighthouse - LCP、INP、CLS等のCore Web Vitalsを測定・改善する資料です。 Analyzers
    • Lighthouse CI - CI環境でLighthouseを実行し、すべてのコミットに対してコアウェブビタの予算を強制する。

    拡張機能

    • Browser Calories - ブラウザや開発環境からWeb性能を調査する拡張機能です。

    ジェネレーター

    • AtBuild - JavaScriptコード生成ツールで、JavaScriptを出力するJavaScriptを書くことができる。ループ展開や、実行時環境を削除するライブラリの作成に適している。
    • Glue - CSSスプライトを生成するためのシンプルなコマンドラインツール。
    • Pitomba-spriter - Spriterは、Pythonを使用したシンプルで柔軟な動的スプライト生成ツールであり、CSSに適用可能なクラスを提供し、ファイルシステムの変更を検知して、CSSおよびスプライトを即座に更新できる。
    • Grunt-spritesmith - 複数の画像をスプライトシートおよび対応するCSS変数に変換するためのGruntタスク。
    • Grunt-sprite-css-replace - スタイルシートに記載された画像をもとにスプライトを生成し、その新しいスプライト画像と位置を参照に更新するためのGruntタスク。
    • Grunt-svg-sprite - SVGスプライトとスタックの豊富な選択肢 — svg-spriteをラップしたGruntプラグイン。複数のSVGファイルを読み込み、最適化し、さまざまなフォーマットのSVGスプライトおよびCSSリソースを作成。
    • Gulp-sprite - Gulpで画像スプライトと対応するスタイルシートを作成するタスク。
    • Gulp-svg-sprites - GulpでSVGスプライトを作成するタスク。
    • SvgToCSS - CSS/Sassスプライト内のSVGファイルを最適化し、レンダリングする。
    • Assetgraph-sprite - CSS依存グラフに基づいてスプライトを自動生成するAssetgraphのトランスフォーム
    • Sprite Cow - スプライトシート内のスプライトの背景位置、幅、高さをコピー可能なCSSとして取得
    • CSS Sprite Generator - CSSスプライトは複数の画像を1つのファイルに結合できる機能です
    • Sprity - 多くの機能を備えたモジュラリーファイルスプライト生成器：リターナスプライトをサポート、異なる出力フォーマットをサポート、画像ディレクトリからスプライトと適切なスタイルファイルを生成など…
    • Sprite Factory - スプライトファクトリーは、CSSスプライトを生成できるRubyライブラリです。ディレクトリ内の個別画像ファイルを1つの統合スプライト画像に結合し、ウェブアプリケーションで使用できる適切なCSSスタイルシートを生成します

    画像最適化

    品質を損なわず不要なデータを除去し、ファイルを最適化する方法です。

    • Shortpixel - 画像を圧縮して不要なバイトを削除し、WebP/AVIFに変換
    • Grunt-smushit - PNGおよびJPGの不要なバイトを削除するYahoo Smushitを用いたGruntプラグイン
    • Gulp-smushit - Yahoo SmushitをベースにしたGulpプラグインでPNGおよびJPGを最適化
    • Smush it - フォーマットに応じた最適化により、画像ファイルから不要なバイトを削除。無損失：視覚的に見た目や品質を変更せずに画像を最適化
    • Imagemin - Node.jsで画像をスムーズに最小化
    • Sharp - この高速Node.jsモジュールの典型的な使用例は、複数フォーマットの大きな画像を、より小さい、ウェブに適したJPEG、PNG、およびWebP画像に変換することです
    • Gm - Node.js用のGraphicsMagickおよびImageMagick
    • ExifCleaner - ドラッグアンドドロップで画像および動画ファイルからEXIFメタデータを削除するGUIアプリ。無料かつオープンソース
    • OptiPNG - 画像ファイルを再圧縮して情報の損失なしにサイズを小さくするPNG最適化ツール
    • Grunt-contrib-imagemin - GruntでPNGおよびJPGを最小化
    • Gulp-imagemin - GulpでPNG、JPEG、GIFおよびSVGを最小化するimagemin
    • Grunt-WebP - 画像をWebPフォーマットに変換
    • Gulp-WebP - Gulpで画像をWebPに変換
    • Imageoptim - 品質を犠牲にせずに画像のディスク使用量を減らし、読み込み速度を速くする無料アプリ。圧縮パラメータを最適化し、不要なメタデータおよび不要な色プロファイルを削除
    • Imager - ウェブ上での画像の効率的な配布を目的とした自動画像圧縮
    • Grunt-imageoptim - Make ImageOptim, ImageAlpha, および JPEGmini を自動化されたビルドプロセスに組み込む
    • ImageOptim-CLI - Mac向けのImageOptim、ImageAlpha、JPEGminiを自動化し、画像のバッチ最適化を自動化されたビルドプロセスに組み込む
    • Tapnesh-CLI - Tapneshは、すべての画像を並列で簡単に効率的に最適化するCLIツールです！
    • Tinypng - PNG画像向けの高度な損失圧縮で、完全なアルファ透過を保持します
    • Kraken Web-interface - 画像を最適化し、ダウンロードは12時間で利用可能になります
    • Compressor - JPG、PNG、SVG、GIFに対応するオンライン画像圧縮サービス
    • mozjpeg - JPEGエンコーダーの改善
    • Jpegoptim - JPEGファイルを最適化・圧縮するユーティリティ
    • AdvPNG - PNGファイルを再圧縮して可能な最小サイズにします
    • Leanify - 軽量な損失なしファイル最小化・最適化ツール
    • Trimage - PNGおよびJPGファイルを損失なしで最適化するクロスプラットフォームツール
    • ImageEngine - 画像の最適化、サイズ変更、キャッシュをクラウド上で即時実行し、モバイル対応が優れているサービス
    • ImageKit.io - グローバル配信ネットワークとストレージを活用した、知能的なリアルタイム画像最適化および画像変換
    • Optimizt - CLIベースの画像最適化ツール。PNG、JPEG、GIF、SVGの損失圧縮および損失なし圧縮に対応し、また、ラスタ画像にはAVIFおよびWebPバージョンを生成できます
    • ResponsiveImage - ViteまたはWebpackプラグインを使用して、最適化された画像（WebP、AVIF）およびLQIPプレースホルダーを生成し、複数のフレームワーク向けのレスポンシブ画像マーカーをレンダリングします
    • Adaptive Images - 画像の圧縮、変換、リサイズ、配信最適化を行うツールです。 <img>

    遅延読み込み

    • lazyload - スタンドアローンJavaScriptのラグレーダー（約1kb）で、画像、iframes、ウィジェットを遅延表示します
    • lozad.js - レスポンシブ画像、iframesなどに最適化された、高パフォーマンスで軽量（約0.9kb）かつ設定可能な純JSのラグレーダー（依存関係なし）
    • quicklink - ビュー領域内のリンクを事前にフェッチ（Intersection Observerを用いて）し、今後のナビゲーションを速くします

    ローダー

    • HeadJS - レスポンシブデザイン、機能検出、リソースロードに必要なHEAD内の唯一のスクリプト
    • RequireJS - JavaScriptファイルおよびモジュールローダー。ブラウザ内での使用に最適化されていますが、RhinoやNode.jsなどの他のJavaScript環境でも使用可能です
    • Labjs - オープンソース（MITライセンス）プロジェクト。Getify Solutionsがサポートしている。LABjsの目的は、すべての場面に応じて、どこからでも、いつでも、どんなページにも、どんなJavaScriptリソースも読み込むことができる、汎用的なオンデマンドJavaScriptローダーであることです。
    • Defer.js - アシンクロナイズすべて：ページの本質部分を高速に読み込むために、このJavaScriptの小さなコードを活用してください。
    • InstantClick - マウスオーバー時にページを事前に読み込むことで、サイト内のリンクが即時的に反応するように見えます。
    • prerender.js - ナビゲーションの前にページとリソースを事前に読み込むことで、ページ間の切り替えを高速化します。
    • JIT - Grunt用のJIT（Just In Time）プラグインローダー。プラグインが多数ある場合でも、Gruntの読み込み時間が遅れません。
    • Guess.js - 分析と機械学習を用いて、予測的なプリフェッチとパフォーマンス最適化を実現します。

    指標監視

    • Phantomas - PhantomJSベースのウェブパフォーマンスメトリクス収集ツールとモニタリングツール。
    • Bench - Phantomas（PhantomJSをバックアップ）を使用して、ページのベンチマークを実施し、結果をMongoDBに保存し、組み込みサーバーで結果を表示します。
    • Keepfast - ウェブページのパフォーマンスに関連する指標をモニタリングするツール。
    • GTmetrix - ページのパフォーマンスをテストおよびモニタリングする無料ツール。ページのスコアをLighthouseで評価し、最適化のための実行可能な提案を提供します。
    • Pingbreak.com - レスポンス時間アラート付きの無料サイトおよびSSLモニタリング（Slack、Twitter、Mattermost、DiscordまたはカスタムWebhook）。
    • Pingdom site Speed Test - そのページの読み込み時間をテストし、分析し、ボトルネックを特定します。
    • Dotcom-tools - 世界20箇所の実際のブラウザから、あなたのウェブサイトのスピードを分析します。
    • WebPageTest - 世界中の複数の場所から、実際のブラウザ（IEおよびChrome）と実際の消費者接続速度を使って、無料のサイトスピードテストを実行できます。シンプルなテストを実行するか、複数ステップの取引、動画キャプチャ、コンテンツブロッキングなど、高度なテストを実行できます。結果には、リソース読み込みのウェーター図、ページスピード最適化チェック、改善提案などの豊かな診断情報が含まれます。
    • Sitespeed.io - ウェブパフォーマンスのベストプラクティスに従ってサイトをチェックし、Navigation Timing APIを使ってメトリクスを収集するオープンソースツール。XMLおよびHTMLレポートを出力します。
    • Grunt-phantomas - GruntプラグインとしてPhantomasをラップし、フロントエンドパフォーマンスを測定します。
    • Perfjankie - Web性能指標を継続的に収集・監視・通知するツールです。 Demo
    • BrowserView Monitoring - 世界の複数の場所から、インターネットエクスプローラー、Chrome、Firefoxでウェブページの読み込み時間を継続的にチェックします。
    • DareBoost - リアルブラウザモニタリング。YSlow、Page Speed、多数のカスタムアドバイスを用いて、ウェブパフォーマンスと品質に関する完全なレポートを提供します。
    • Perfume.js - 実ユーザーからのコアウェブビタルとその他のパフォーマンスメトリクスを収集する小さなライブラリ。
    • puppeteer-webperf - Puppeteerスクリプト内でウェブパフォーマンスメトリクスを収集するツール。
    • Telescope - Playwrightに基づいたクロスブラウザのウェブパフォーマンステストCLIおよびライブラリ。Chrome、Firefox、Safari、EdgeでHAR、Web Vitals、リソースタイミング、コンソールログ、スクリーンショット、フィルムストリップを収集。
    • WebPageTest API Wrapper for Node.js - WebPageTest API Wrapperは、Node.js向けのWebPageTest APIをモジュールおよびコマンドラインツールとしてラップしたnpmパッケージ。
    • WebPerformance Report - 毎週あなたのメールに届くウェブパフォーマンスレポート。モニタリングしたいエコノミーサイトまたはウェブサイトのウェブパフォーマンスおよびウェブ最適化の状態について、パーソナライズされたレポートを受信。Core Web Vitalsも含まれる。

    圧縮ツール

    • HTMLCompressor - 構造を壊さず、余分な空白、コメント、不要な文字を削除してHTMLまたはXMLを最小化する、小さな高速なJavaライブラリ。コマンドラインビルドを含む。
    • Django-htmlmin - PythonでHTMLを最小化するツール。HTML5の完全なサポートを提供。Django、Flask、および他のPythonウェブフレームワークに対応。静的サイトまたはデプロイスクリプト向けのコマンドラインツールも提供。
    • HTMLMinifier - 高度にカスタマイズ可能で、よくテストされたJavaScriptベースのHTML最小化ツール。lintのような機能を備える。
    • Grunt-contrib-htmlmin - HTMLを最小化するGruntプラグイン。HTMLMinifierを使用する。
    • Gulp-htmlmin - HTMLを最小化するGulpプラグイン。HTMLMinifierを使用する。
    • Grunt-htmlcompressor - HTMLの圧縮用のGruntプラグ及。htmlcompressorを使用する。
    • HTML_minifier - kangax html-minifier向けのRubyのラッパー。
    • HTML_press - RubyのgemでHTMLを圧縮し、すべての空白を削除して、残りはHTMLのみにする。
    • Koa HTML Minifier - html-minifierを使用して、あなたのHTMLレスポンスを最小化するミドルウェア。html-minifierのデフォルトオプションはすべて無効になっているため、オプションを設定しなければ何もしない。
    • HTML Minifier Online - kangax（HTMLMinifierの開発者）によるHTML最小化ツール。
    • Minimize - node-htmlparserに基づいたHTML最小化ツール。現在はサーバサイドのみ対応。クライアントサイドの最小化は計画中。
    • Html-minifier - HTML、Razorビュー、Webフォームビューを最小化するためのシンプルなWindowsコマンドラインツール。
    • UglifyJS2 - UglifyJSはJavaScriptで書かれたJavaScriptパーサー、最小化ツール、圧縮ツールまたは整形ツールキット。
    • Terser - 現代的なJavaScript最小化および圧縮ツール。UglifyJSの継承であり、ES6以降のサポートを提供。
    • SWC - 高速なJavaScriptおよびTypeScriptコンパイラおよび最小化ツール。Babel/Terserのトランスパイルに比べて非常に速い。
    • CSSO - 他のツールとは異なり、CSSの構造最適化も行うCSS最小化ツール。通常の最小化技術に加え、CSSファイルの構造を最適化し、他の最小化ツールに比べてファイルサイズを小さくする。
    • Grunt-contrib-concat - ファイルを結合するためのGruntプラグイン。
    • Grunt-contrib-uglify - A GruntプラグインでJavaScriptファイルを連結・最小化する.
    • Clean-css - node.js用の高速かつ効率的でよくテストされたCSS最小化ツール.
    • Django-compressor - リンクされたおよびインラインのJavaScriptまたはCSSを1つのキャッシュファイルに圧縮する.
    • Django-pipeline - Django用のアセットパッケージングライブラリで、CSSおよびJavaScriptの連結・圧縮、組み込みのJavaScriptテンプレートサポート、オプションのデータURIによる画像およびフォントの埋め込みを提供.
    • JShrink - PHPクラスでJavaScriptを最小化し、クライアントに速く配信する.
    • JSCompress - 最もシンプルなオンラインJS圧縮ツール.
    • CSSshrink - CSSはページのレンダリングに必須のパスにあるため、小さくなければなりません！それ以外は無意味です！
    • Grunt-cssshrink - これはCSS ShrinkのGruntラッパーです.
    • Gulp-cssshrink - Gulpでcssshrinkを使用してCSSファイルを縮小する.
    • Prettyugly - CSSコードをUglify（スペースを削除）またはPrettify（一貫したスペースを追加）する.
    • Grunt-contrib-cssmin - Grunt用のCSS最小化ツール.
    • Grunt-uncss - プロジェクトから使われていないCSSを削除するGruntタスク.
    • Gulp-uncss - プロジェクトから使われていないCSSを削除するGulpタスク.

    その他

    • Fontaine - フォントメトリクスに基づく自動フォントフォールバックにより、ウェブフォントの読み込みによって引き起こされる累積レイアウトシフト（CLS）を減らす.
    • Socialite.js - Socialiteは、さまざまなソーシャルシェアボタンを簡単に実装・有効化する方法を提供します。必要に応じて、ドキュメント読み込み時、記事のhover時、または任意のイベント時に使用できます.
    • uCSS - 大きなサイトをスクレイピングして、使われていないCSSセレクタを検出（使われていないCSSを削除しない）.
    • HTTPinvoke - ブラウザおよびNode.js用の依存関係のないHTTPクライアントライブラリ。プロミスベースまたはNode.jsスタイルのコールバックベースAPIを備え、進行状況、テキスト、バイナリファイルのアップロード・ダウンロード、部分的なレスポンスボディ、リクエストおよびレスポンスヘッダー、ステータスコードをサポートしています.
    • Critical - HTMLページにクリティカルパスのCSSを抽出・インライン化（アルファ版）.
    • Csscolormin - CSSカラーを最小化するユーティリティ。例：min(“white”); // 最小化され「#fff」に変換されます.
    • Lazysizes - 画像（レスポンシブおよび通常）、iframes、スクリプトに対する高性能な遅延ローダー。ユーザーのインタラクション、CSSまたはJavaScriptによって引き起こされるすべての可視性変更を検知。設定なしで動作。
    • react-virtualized - Reactによる大きなリストやテーブルデータの効率的なレンダリングを実現するコンポーネント
    • TMI - 画像が多すぎる：ウェブ上の画像のサイズを確認します

    SVG

    • SVGO - SVGベクターグラフィックス向けのNode.jsベースの最適化ツール
    • SVG OMG - SVGOMGはSVGOのGUIであり、SVGOのほとんど、あるいはすべての設定オプションを公開することを目的としています
    • Grunt-svgmin - GruntでSVGOを使用してSVGを最小化
    • Gulp-svgmin - GulpでSVGOを使用してSVGを最小化
    • Scour - オープンソースのPythonスクリプトでSVGファイルを積極的にクリーンアップし、ツールや作成者がドキュメントに埋め込む不要な部分を削除します
    • SVG Cleaner - バッチモード、多数のクリーンアップオプション、マルチコアCPUでのスレッド処理を活用して、不要なデータを削除するSVGファイルのクリーンアップツール

    Web Components

    • Polymer Bundler - Polymer-bundlerは、プロダクション向けにプロジェクト資産をパッケージ化するためのライブラリで、ネットワークのリクエスト回数を最小化します
    • Gulp-vulcanize - Vulcanizeを使用して、複数のWebコンポーネントを1ファイルに結合します

    Webサーバーベンチマーク

    • HTTPerf - HTTPワークロードとサーバーメトリクスの柔軟な生成により、ウェブサーバーのパフォーマンスを測定します
    • Apache JMeter - オープンソースの負荷テストツール：Javaプラットフォームアプリケーションです
    • Locust - オープンソースの負荷テストツール。Pythonコードでユーザー行動を定義し、システムに数百万の同時ユーザーをスワームします
    • Autoperf - httperfのRubyドライバーで、1つのエンドポイントまたはログの再実行を用いて負荷およびパフォーマンステストを自動化します
    • HTTPerf.rb - httperfのシンプルなRubyインターフェース（Rubyで記述）
    • PHP-httperf - HTTPerf.rbのPHP版
    • HTTPerf.js - HTTPerf.rbのJS版
    • HTTPerf.py - HTTPerf.rbのPython版
    • Gohttperf - HTTPerf.rbのGo版
    • wrk - HTTPベンチマークツール（リクエスト生成、レスポンス処理、カスタムレポートに向けたオプションのLuaスクリプトを含む）
    • beeswithmachineguns - アーマー（作成）する多くのビース（マイクロEC2インスタンス）を用いてターゲット（ウェブアプリケーション）に攻撃（負荷テスト）を行うためのユーティリティ
    • k6 - 開発者向けのオープンソース負荷テストツール。CIパイプラインへの統合が容易。テストはES6 JSで記述され、HTTP/1.1、HTTP/2、WebSocketを用いてAPI、マイクロサービス、サイトのテストが可能

    Webサーバーモジュール

    • PageSpeed Module - PageSpeedはサイトの読み込み時間を短くし、ページの表示速度を速くします。このオープンソースのウェブサーバーモジュールは、既存のコンテンツやワークフローを変更せずに、ページおよび関連する資産（CSS、JavaScript、画像）に対してウェブパフォーマンスのベストプラクティスを自動的に適用します。PageSpeedはApache 2.xおよびNginx -1.x向けのモジュールとして提供されています
    • WebP-detect - WebPとAcceptの交渉

    仕様

    • Web Performance Working Group - Rich Web Client Activityの一部であるWeb Performance Working Groupの使命は、ユーザーエージェントの機能およびAPIのアプリケーションパフォーマンスの側面を測定するための手法を提供することです
    • Page Visibility - この仕様は、ページの現在の可視性状態をプログラム的に確認できるようにし、電力消費やCPU消費を効率的に管理するウェブアプリケーションの開発を可能にするものです
    • Navigation Timing - この仕様は、ドキュメントのナビゲーションに関連する高解像度パフォーマンスメトリックデータを保存・取得するための一貫したインターフェースを定義しています
    • Resource Timing - この仕様は、ドキュメント内のリソースの完全なタイミング情報をウェブアプリケーションがアクセスできるようにするインターフェースを定義しています
    • User Timing - この仕様は、アプリケーションのパフォーマンスを測定するために、高精度のタイムスタンプにアクセスできるようにするインターフェースを定義しています
    • Performance Timeline - この仕様は、パフォーマンスメトリックデータを保存・取得するための一貫したインターフェースを定義しています。この仕様は個別のパフォーマンスメトリックインターフェースをカバーしません
    • CSS will-change - Web性能の測定・読み込み・ブラウザ動作に関する仕様です。 will-change
    • Resource Hints - この仕様はHTML Link Element（）のdns-prefetch、preconnect、prefetch、prerenderの関係を定義しています。これらのプリミティブは、開発者およびリソースを生成または提供するサーバーが、ユーザーエージェントが接続すべきオリジンや、取得および事前処理すべきリソースを決定するプロセスに支援できるようにします。これによりページパフォーマンスの向上が実現されます
    • RFC 9218: HTTP Prioritization - HTTPにおけるプロトコルレベルの優先順位決定メカニズム

    統計

    • HTTP Archive - ページサイズ、失敗したリクエスト、使用された技術といったウェブパフォーマンス情報を収集した恒久的なリポジトリ。このパフォーマンス情報により、ウェブがどのように構築されているかをトレンドとして見ることができ、ウェブパフォーマンス研究を行うための共通データセットを提供します
    • Chrome User Experience Report (CrUX) - Chromeユーザーからのオリジンレベルのリアルユーザーパフォーマンスデータ

    その他のAwesomeリスト

    コントリビューション

    コントリビューションする場合はcontributing.mdを確認し、IssueまたはPull Requestを作成してください。