fucking awesome wpo

素晴らしいWPO

Web Performance Optimizationリソースのキュレーションリストへようこそ。このリポジトリは、ウェブサイトのパフォーマンスの最適化に関連する最良のツール、記事、ブログ、本、および講演を収集することを目的としています。開発者、デザイナー、パフォーマンス愛好家のいずれであっても、ここにはWebプロジェクトを充電するための貴重なコンテンツがあります。

カテゴリ

素晴らしいWPO /記事

？素晴らしいWPO /ブログ

素晴らしいWPO /本

素晴らしいWPO /ドキュメント

？素晴らしいWPO /イベント

？素晴らしいWPO /トーク

目次

このコレクションで説明されているカテゴリの簡単な概要を次に示します。

• アナライザー
• アナライザーAPI
• アプリケーションのパフォーマンス監視
• バンドルアナライザー
• ベンチマーク-CSS
• ベンチマーク-JS
• ベンチマーク-Php
• ブックマークレット
• CDN
• CDN-モニター
• CDN-ユーティリティ
• 拡張機能
• 画像オプティマイザー
• ジェネレーター
• Lazyloaders
• ローダー
• メトリックモニター
• MINIFIERS HTML
• MINIFIERS JS＆CSS
• その他
• SVG
• Webコンポーネント
• Webサーバーベンチマーク
• Webサーバーモジュール
• 仕様
• 統計
• 他の素晴らしいリスト
• 貢献

記事

記事にアクセスしてください。

ブログ

ブログにアクセスしてください。

本

WPOに関する最高の本

• ？ HTTP/2バリーポラードによるアクション - バリーポラード
• ？ Jeremy WagnerによるWebパフォーマンス - ジェレミーL.ワグナー
• ？速度の本 - ストーヤン・ステファノフ
• パフォーマンスのためのデザイン：美学とスピードの計量-Lara Calenender Hogan
• さらに高速なWebサイト：Web開発者向けのパフォーマンスベストプラクティス-Steve Souders
• 高性能ブラウザーネットワーキング：すべてのWeb開発者がネットワーキングとWebパフォーマンスについて知っておくべきこと-IlyaGrigorik
• 高性能JavaScript -Nicholas C. Zakas
• 高性能のWebサイト：フロントエンドエンジニアのための本質的な知識 - スティーブスーダーズ
• 高性能レスポンシブデザイン：デバイス全体のより高速なサイトを構築する - Tom Barker
• ？リーンサイト - バーバラ・ベルムズ
• 時間はお金：ウェブパフォーマンスのビジネス価値 - タミーエバーツ
• WebPagetest -Rick Viscomi、Andy Davies、Marcel Duranを使用
• Webページのサイズ、スピード、パフォーマンス-Terrence Dorsey
• ？ Web Performance Daybook Volume 2 -Stoyan Stefanov
• Webパフォーマンスチューニング - パトリックキレレア
• ？あなたはJSを知らない：Async＆Performance -Kyle Simpson
• ？ Linux、Apache、MySQL、PHPパフォーマンスエンドツーエンド-Colin McKinnon
• ？動作中のWebコンポーネント-Ben Farrell
• ？画像の最適化-Addy Osmani

ケーススタディ

• ？ WPOSTATS-ユーザーエクスペリエンスとビジネスメトリックに対するWebパフォーマンス最適化（WPO）の影響を示すケーススタディと実験。
• ？ Google開発者ケーススタディ - 他の開発者がWebを使用してユーザーに驚くべきWebエクスペリエンスを作成した理由と方法を学びます。

ドキュメント

• ？ブラウザダイエット - フロントエンドのパフォーマンスに関する共同ガイド。
• ？ PagesSpeed Insightsルール - PagesSpeedチームによって作成されたガイド。非推奨。これは非推奨であり、2019年5月に閉鎖されます。バージョン5は最新であり、Chromeユーザーエクスペリエンスレポートからの実際のデータとLighthouseのラボデータの両方を提供します。
• ？サイトを高速化するためのベストプラクティス - リストには、Yahoo！によって作成された7つのカテゴリに分割された35のベストプラクティスが含まれています。例外的なパフォーマンスチーム。

イベント

コミュニティが重要だからです！

会議

• ？私たちはスピードが大好きです - 私たちは、ウェブパフォーマンスの知識と経験を可能な限り広く共有したいという願望から生まれたスピードが生まれました。
• ？ PWAサミット - 無料のオンライン、シングルトラック会議は、進歩的なWebアプリで全員が成功するのを支援することに焦点を当てています。
• 速度 - 速度では、Web操作、パフォーマンス、およびDevOpsの専門家は、高速で回復力があり、非常に利用可能なサイトとアプリを構築することを学びます。
• ？ performance.now（） - performance.now（）会議はアムステルダムに戻ります！私たちは、14人の世界クラスのスピーカーとのシングルトラック会議で、今日の最も重要なWebパフォーマンスの洞察をカバーしています。
• ？ #perfmatters - #perfmatters Conferenceは、国際的に有名なパフォーマンス開発者によるオンラインWebパフォーマンス会議です。

ミートアップ

それらはContent/Meetups.mdに分類されます。

話し合い

それらはContent/Talks.mdに分類されます。

ツール

アナライザー

• ？ web.dev-web.devからの便利なガイダンスと分析を備えた独自のサイトやアプリでWebの最新の機能を取得します。
• 872 100?告白） - Phantomjsを使用して、Webページを頭を分析し、マニフェストを生成します。
• ？ Debugbear -Debugbearは、灯台に基づくサイト監視ツールです。各変化の原因を理解することに焦点を当てて、時間の経過とともにスコアとメトリックがどのように変化したかを確認してください。 Debugbearは、30日間の無料トライアルを備えた有料製品です。
• ？ページ速度-PageSpeedファミリのツールは、サイトのパフォーマンスを最適化するのに役立つように設計されています。 PageSpeed Insights製品は、サイトに適用できるパフォーマンスのベストプラクティスを特定するのに役立ちます。Pag​​eSpeed最適化ツールは、プロセスを自動化するのに役立ちます。
• 28533 9406? Lighthouse） - プログレッシブWebアプリケーション用の監査およびパフォーマンスメトリックツール。
• ？ Screpy -AIベースのSEO分析と監視ツール
• 2205 382? yslow） - yslowはWebページを分析し、高性能Webページの一連のルールに基づいてパフォーマンスを改善する方法を提案します。
• yslow for phantomjs -yslow for phantomjsは、自動化されたテストフレームワークの新しい出力形式を導入します：Tap（Test Anything Protocol）およびJunit。
• 35 3? grunt -webpagetest） - webpagetestを継続的に測定するためのグラントプラグイン。 （デモ）
• 91 15? grunt -aslow） - ヘッドレスWebキットブラウザーであるPhantomjsを使用したページパフォーマンスをテストするためのグラントタスク。
• 856 37? grunt -perfbudget） - パフォーマンス予算を実施するためのgrunt.jsタスク？パフォーマンス予算の詳細）。
• 2641 200? Webトレースフレームワーク） - Webトレースフレームワークは、複雑なWebアプリケーションのトレースと調査のためのライブラリ、ツール、視覚化装置のセットです
• 2469 280? yandex.tank） - 自動ロードテストスイートの一部として特に優れている高度なLinuxユーザー向けの拡張可能なオープンソースロードテストツール。
• イエローラボツール - フロントエンドの悪い練習を監査し、パフォーマンスの問題を明らかにし、プロファイルJavaScriptを監査するオンラインの迅速かつ簡単なツール。
• Pagelocity -Webパフォーマンスの最適化と分析ツール。
• ？ Varvy-サイトをテストして、SpeedのGoogleガイドラインに従うかどうかを確認します。
• Web Bloat Score Calculator-ページのサイズを同じページの圧縮画像と比較する
• 1865 23?スピードレーサー） - Chrome Headlessを使用して、ライブラリ/アプリケーションのパフォーマンスメトリックを収集します。
• ？ SpeedRank -SpeedRankは、バックグラウンドでサイトのパフォーマンスを監視します。 Lighthouse Reportsは時間の経過とともに表示され、改善のための推奨事項を提供します。 Speedrankは、14日間のトライアルを備えた有料製品です。
• ？最も軽いアプリ - ウェブページの読み込み時間は、変換と収益にとって非常に重要です。競合他社に対するWebパフォーマンスを視覚化します。

アナライザー-API

• 9 6? node -slowjs）-yslow.js on node.jsは、プログラムでPhantomjs yslow.jsをプログラム的に実行するための単純なnode.jsラッパーです。
• 3105 126? psi） - node.jsのPagesSpeed Insights-レポート付き。

アプリケーションのパフォーマンス監視

• ？ Datadog APM-すべてのテレメトリと相関するエンドツーエンド分散トレースとAPMの大規模なAPM。
• ？ BetterUptime-優れたWebサイト監視ツール（バンドルステータスページ、インシデント通知）
• ？ pingdom-あなたのウェブサイトの稼働時間を取得するためのツール（さまざまな場所からのプローブ付き）
• ？ Uptimerobot-別のアップタイム監視ツール（寛大な無料プランを使用）
• ？ Robomiri -Robomiriは、Cronjob、キーワード、ウェブサイト、ポート、Pingの幅広いモニターを提供する安定したアップタイムモニターです。 3分間のインターバルチェックで25回のアップタイムチェックを無料でチェックします。電話、SMS、電子メール、およびWebhookを介したアラート。
• ？ステータスリスト - アップタイム、デバッグの詳細を備えたパフォーマンス監視、および1つの簡単なダッシュボードでホストされたステータスページ。

バンドルアナライザー

• 4474 180?バンドルサイズ） - バンドルサイズをチェックしてください。
• 3846 101? Source-Map-Explorer） - ソースマップを介してバンドルスペースの使用を分析およびデバッグします。
• ？ Bundlephobia-フロントエンドバンドルにNPMパッケージを追加することのパフォーマンスへの影響を見つけるのに役立ちます。
• 12605 489? Webpack Bundle Analyzer） - バンドルコンテンツを便利なインタラクティブなズーム可能なトリマップとして表すWebpackプラグインとCLIユーティリティ。
• disc-プロジェクトバンドルを閲覧するモジュールツリーを視覚化し、膨満感を追跡します。
• 4 1? Lasso -analyzer） - ラッソによって作成されたプロジェクトバンドルを分析および視覚化します。
• ？ packtracker.io-すべてのプルリクエストでWebpackバンドル統計を確認し、時間の経過とともに追跡します。
• 1413 108?コンプレッションWebpackプラグイン） - コンテンツエンコードでサービスを提供するために、圧縮バージョンの資産を準備します。
• 583 20? Bundlestats） - バンドルレポート（バンドルサイズ、アセット、モジュール、パッケージ）を生成し、異なるビルド間の結果を比較します

ベンチマーク-CSS

• 573 21? CSS -PERF） - CSSパフォーマンスをテストする完全に非科学的な方法。これらのテストのほとんどは、効果的なCSSアーキテクチャを決定するための方法論と手法を中心に展開します。別の言い方をすれば、CSS戦略の特定の比較を考えると、何が最適かを知りたいです。

ベンチマーク-JavaScript

テストケースを作成し、JavaScriptのさまざまな実装を比較するためのツールのセット。

• JSPERF -JSPERFは、テストケースを作成および共有する簡単な方法を提供することを目指しており、ベンチマークを実行して異なるJavaScriptスニペットのパフォーマンスを比較することを目指しています。 Temporarily out, follow this issue for updates: https://github.com/jsperf/jsperf.com/issues/537
• benchmark.js-ほぼすべてのJavaScriptプラットフォームで動作する堅牢なベンチマークライブラリで、高解像度タイマーをサポートし、統計的に有意な結果を返します。
• 166 15? jslitmus）-JSlitmusは、アドホックJavaScriptベンチマークテストを作成するための軽量ツールです。
• 563 37?抹茶） - 抹茶を使用すると、コードのパフォーマンスを測定する実験を設計できます。各ベンチは、アプリケーションの特定の影響点に焦点を当てることをお勧めします。
• 1496 113? Timing.js）-Timing.jsは、ナビゲーションタイミングAPIを操作して、アプリケーションが時間を費やしている場所を特定するための小さなヘルパーセットです。スタンドアロンスクリプト、DevTools Snippet、またはブックマークレットとして便利です。
• 8780 1201? Stats.js） - このクラスは、コードのパフォーマンスを監視するのに役立つ簡単な情報ボックスを提供します。
• 1 0? Perftests） - JavaScript継承モデルのパフォーマンステスト。
• 2094 105? Memory -stats.js） - パフォーマンスメモリによるJSヒープサイズの最小モニター。

ベンチマーク-Php

• 53 4? phpench） - phpenchは、PHPベンチマークのグラフィカル出力を作成します。 gnuplotを使用してリアルタイムで機能のランタイムをプロットし、結果から画像を作成します。
• 13 1? PHPベンチ） - ベンチマークとプロファイルPHPコードは、パフォーマンスフットプリントを測定しながらブロックします。

ブックマークレット

• ？ Yahoo Yslow for Mobile/Bookmarklet -yslowはWebページを分析し、高性能Webページの一連のルールに基づいてパフォーマンスを改善する方法を提案します。
• 3790 126? Perfmap） - リソースタイミングAPIを使用してブラウザにロードされたリソースのフロントエンドパフォーマンスヒートマップを作成するブックマークレット。
• 559 52? Dom Monster）-Cross-Platform、クロスブラウザーブックマークレットでは、表示されているページのDOMとその他の機能を分析し、保健金額を提供します。
• CSSストレス-CSSストレスはテストとパフォーマンスプロファイリングです。
• 1143 86? Performance -bookmarklet） - リソースタイミングAPI、ナビゲーションタイミングAPI、ユーザータイミングを介して現在のページを分析します。として ？クロム拡張機能と？ Firefoxアドオンという名前のパフォーマンス分析剤。

CDN

コンテンツ配信ネットワークまたはコンテンツ配信ネットワーク（CDN）は、インターネット上の複数のデータセンターに展開されたサーバーの大規模な分散システムです。 CDNの目標は、高可用性と高性能でエンドユーザーにコンテンツを提供することです。ウィキペディアのCDNの大きなリストを参照してください。

• ？ CloudFlare CDN-次世代の技術を使用して高速で信頼性の高いCDNサービスを提供するコンテンツ配信ネットワーク
• ？ pagecdn- Brotli-11圧縮、HTTP/2サーバープッシュ、より良いHTTP/2マルチプレックスなどを使用した積極的なコンテンツ最適化を備えた最先端のOpenSource CDN。すでに数百のライブラリと2000以上のWordPressテーマをサポートしています。使いやすく、リンクしやすく、非常に速いです。
• 5705 2060? JSDELIVR） - Googleホストライブラリと同様に、JSDELIVRはオープンソースCDNであり、開発者が独自のプロジェクトをホストできるようにし、誰でもサイトのホストファイルにリンクできます。
• ？ Googleホストライブラリ-Googleホストライブラリは、最も人気のあるオープンソースJavaScriptライブラリのコンテンツ配信ネットワークです。
• ？ CDNJS -JQueryやModernizrからBootstrapまで、すべてをホストするCloudFlareが後援するJavaScriptとCSS用のオープンソースCDN。
• ？ Amazon CloudFront- Amazonのコンテンツ配信ネットワークは、他のAmazonサービスとうまく統合したり、Standaloneを使用できます。
• JQuery -JQuery CDN - Maxcdnを搭載した最新の安定バージョン。
• ?? upyun cdn -upyunが提供するCDN。
• ?? Bootstrap中文网开放CDN服务 - ブートストラップ中国のネットオープンCDNサービス（HTTPのみ）。
• ?? ？ Yandex CDN -Yandexコンテンツ配信ネットワークでは、人気のあるサードパーティJavaScriptおよびCSSライブラリ（ロシアでの使用に最適）をホストしています。

有料CDNの間で正しい選択をするために便利な詳細情報を見つけるには、CDNPlanetにアクセスしてください。

CDN-モニター

• cdnperf-あなたのサイトをきれいで幸せにする高速で信頼性の高いJavaScriptCDNを見つけます。

CDN-ユーティリティ

• 82 6? gulp-google-cdn） - スクリプトの参照をGoogle CDNの参照に置き換えます。

拡張機能

• 131 7?ブラウザカロリー） - パフォーマンス予算を測定する最も簡単な方法。

ジェネレーター

• 35 2? atbuild）-JavaScriptを作成できるJavaScriptコード生成ツールJavaScriptを出力します。ループを展開するのに適しています。ランタイムをコンパイルするライブラリを書き込みます
• 2550 169?接着剤） - 接着剤は、スプライトを生成するためのシンプルなコマンドラインツールです。
• 19 3? Pitomba -Spriter） - Spriterは、Pythonを使用したCSS用のシンプルで柔軟な動的スプライトジェネレーターです。 Pythonコードで使用するクラスを提供し、ファイルシステムに耳を傾け、静的が変更されるとすぐにCSSとSpriteを変更するウォッチャーを提供するため、同期および非同期の両方のCSSを処理できます。
• 1133 92? grunt -spritesmith） - 画像のセットをスプライトシートおよび対応するCSS変数に変換するためのグラントタスク。
• ？ grunt-sprite-css-replace-スタイルシートで参照された画像からスプライトを生成し、新しいスプライト画像と位置で参照を更新するグラントタスク。
• ？ grunt-svg-sprite-svgスプライト＆スタックの豊富 - 多数のSVGファイルを読み取り、それらを最適化し、SVGスプライトとCSSリソースをさまざまなフレーバーで作成するSVGスプライトの周りにグラントプラグインをラッピングします。
• 15 1? Gulp -sprite） - イメージスプライトを作成するためのガルプタスクと、ガルプ用の対応するスタイルシート。
• 334 45? Gulp-SVG-Sprites） - SVGスプライトを作成するためのGULPタスク。
• 2 1? SVGTOCSS） - CSS / SASSスプライトでSVGファイルを最適化およびレンダリングします。
• 36 6? Assetgraph-sprite） - CSS依存性グラフに基づいた自動生成スプライトのAssetGraph変換。
• スプライト牛 - スプライト牛は、スプライトシート内のスプライトの背景、幅、高さをコピー可能なCSSとして得るのに役立ちます。
• Zerosprites -Zerospritesは、VLSIフロアプランニングの分野で使用されるアルゴリズムを使用した面積最小化を目的としたCSSスプライトジェネレーターです。
• CSSスプライトジェネレーター-CSSスプライトを使用すると、複数の画像を単一のファイルに結合できます。
• 481 72?スプリティ） - 多くの機能を備えたモジュラー画像スプライトジェネレーター：網膜スプライトをサポートし、さまざまな出力形式をサポートし、画像のディレクトリなどからスプライトと適切なスタイルファイルを生成します...
• 621 76? Sprite Factory） - Sprite Factoryは、CSSスプライトを生成するために使用できるRubyライブラリです。ディレクトリから個々の画像ファイルを単一の統合スプライト画像に組み合わせて、Webアプリケーションで使用するための適切なCSSスタイルシートを作成します。

画像オプティマイザー

この不要なデータをすべて削除し、品質を低下させることなくファイルを提供する方法。

• ？ ShortPixel-画像の不要なバイトを削除して画像を圧縮し、Webp/Avifに変換します
• 83 18? grunt -smushit） - Yahoo Smushitを使用して、PNGとJPGの不必要なバイトを削除するグラントプラグイン。
• 33 2? gulp -smushit） - yahoo smushitを使用してPNGとJPGを最適化するためのGulpプラグイン。 Smoshの上で作られています。
• Smush It -Smush It Smush It Smushは、画像形式に固有の最適化手法を使用して、画像ファイルから不要なバイトを削除します。これは「ロスレス」ツールです。つまり、外観や視覚品質を変えることなく画像を最適化します。
• 5594 257? Imagemin） - node.jsで画像をシームレスにマニー化する
• 29505 1302? Sharp） - この高速Node.jsモジュールの典型的なユースケースは、多くの形式の大きな画像を、さまざまな寸法のより小さく、Webに優しいJPEG、PNG、およびWebP画像に変換することです。
• 6966 616? gm） - node.jsのGraphicsMagickとImageMagick
• 12734 1178? exexif） - jpegファイルからtiffおよびexifメタデータを抽出する純粋なエリキシルライブラリ。
• ？ ExifCleaner -GUIアプリは、ドラッグアンドドロップを備えた画像やビデオファイルからExifメタデータを削除します。無料でオープンソース。
• Optipng -Optipngは、情報を失うことなく、画像ファイルをより小さなサイズに再圧縮するPNGオプティマイザーです。
• 1215 175? grunt-contrib-imagemin） - グラントのためにpngおよびjpeg画像をマイニーします。
• 1905 156? gulp -imagemin） - gulpのイメージミンを使用して、png、jpeg、gif、およびsvg画像をマニー化します。
• 118 16? grunt -webp） - 画像をWebp形式に変換します。
• 220 18? Gulp -Webp） - Gulpの画像をWebpに変換します。
• ？ ImageOptim-画像をより少ないディスクスペースとロードをより速くするために、品質を犠牲にすることなく、より速くロードする無料のアプリ。圧縮パラメーターを最適化し、ジャンクメタデータと不必要なカラープロファイルを削除します。
• 479 18? Grunt -Imageoptim） - 自動ビルドプロセスのImageoptim、ImageAlpha、およびJPegminiの一部を作成します。
• 3461 127? ImageOptim -Cli） - Mac用のImageOptim、Imagealpha、およびJPegminiを自動化して、自動ビルドプロセスの一部の画像を最適化します。
• 21 3? tapnesh -cli） - tapneshは、すべての画像を簡単かつ効率的に最適化するCLIツールです！
• ？ Tinypng-完全なアルファ透明性を保持するPNG画像の高度な損失圧縮。
• ？ Kraken Web -Interface-画像を最適化すると、12時間ダウンロードできます。
• ？コンプレッサー - JPG、PNG、SVG、およびGIF用のオンライン画像コンプレッサー。
• ？ Shrinkray -GitHubリポジトリの画像のワンクリック最適化
• 5495 417? mozjpeg） - JPEGエンコーダーを改善しました。
• 1608 120? jpegoptim） - jpegファイルを最適化/圧縮するためのユーティリティ。
• 3447 329? zopflipng） - PNG画像を最適化するコマンドラインプログラム。
• ADVPNG -PNGファイルを再圧縮して、可能な限り最小のサイズを取得します。
• 835 75? Leanify） - 軽量のロスレスファイルミニフィーア/オプティマイザー。
• TRIMAGE-PNGファイルとJPGファイルを損なうことなく最適化するためのクロスプラットフォームツール。
• ？ ImageEngine-優れたモバイルサポートで、その場で画像を最適化、サイズ変更、キャッシュするためのクラウドサービス。
• ？ ImageKit.io-インテリジェントなリアルタイム画像の最適化、グローバル配信ネットワークを備えた画像変換とストレージ。
• 944 24? optimizt） - CLI画像最適化ツール。 PNG、JPEG、GIF、およびSVGのLossyおよびLosslessを圧縮し、ラスター画像用のWebPバージョンを作成できます。

Lazyloaders

• 938 158? lazyload） - lazyload画像、iframes、with Standalone javascript lazyloader〜1kb
• 7466 448? lozad.js） - 非常にパフォーマンス、ライト〜0.9kb、およびレスポンシブ画像、iframesなどの依存関係なしで純粋なJSの構成可能なレイジーローダー

ローダー

• 4156 348? headjs） - 頭の中の唯一のスクリプト。レスポンシブデザイン、機能検出、リソースの読み込み。
• requirejs -requirejsはJavaScriptファイルとモジュールローダーです。ブラウザー内の使用に最適化されていますが、Rhinoやnode.jsなどの他のJavaScript環境で使用できます。
• LABJS -Getify Solutionsがサポートするオープンソース（MITライセンス）プロジェクトです。 LABJSの中心的な目的は、任意の場所から任意のページにいつでも任意のJavaScriptリソースをロードできるようにする、万能のオンデマンドJavaScriptローダーであることです。
• 69 9? defer.js） - すべてを非同期：ページの肉をこのJSモルセルでより速くロードします。
• 5512 246? InstantClick） - InstantClickは、サイトに次のリンクを作成します。
• 509 32? jit） - grunt用のJIT（ちょうど間に合う）プラグインローダー。グラントの負荷時間は、多くのプラグインがあっても遅くなりません。

メトリックモニター

• 2257 142?ファントマ） - ファントムスベースのWebパフォーマンスメトリックコレクターと監視ツール。
• Showslow-さまざまなサイトのパフォーマンスメトリックを時間の経過とともに監視するのに役立つオープンソースツール。 Yslow、Page Speed Insights、WebPagetest、Dynatrace Ajax Editionの結果をキャプチャします。
• 25 4?ベンチ） - 幻腫を使用しています（ファントムJSが支援するクライアントパフォーマンスメトリックスクラッパー）。ページのベンチマーク、ストアの結果MongoDB、および組み込みサーバーを介して結果を表示します。
• 104 15? Keepfast） - Webページのパフォーマンスに関連するインジケーターを監視するツール。
• ？ gtmetrix -gtmetrixはGoogleページ速度とYahoo!を使用しますYSLOWサイトのパフォーマンスを評価し、これらの問題を修正するための実用的な推奨事項を提供します。
• ？ PingBreak.com-応答時間アラート（Slack、Twitter、Matter Most、Discord、またはCustom Webhook）を使用した無料サイトとSSLモニタリング。
• pingdomサイト速度テスト - そのページの負荷時間をテストし、分析し、ボトルネックを見つけます。
• ？ dotcom -tools-世界中の20か所から実際のブラウザでウェブサイトの速度を分析します。
• WebPageTest -Real Browser（IEおよびChrome）および実際の消費者接続速度で、世界中の複数の場所から無料のサイト速度テストを実行します。簡単なテストを実行したり、マルチステップトランザクション、ビデオキャプチャ、コンテンツブロッキングなどを含む高度なテストを実行できます。結果は、リソースを搭載した滝のチャート、ページ速度の最適化チェック、改善の提案など、豊富な診断情報を提供します。
• ？ Sitespeed.io -Sitespeed.ioは、Webパフォーマンスのベストプラクティスルールに対してサイトをチェックし、ナビゲーションタイミングAPIを使用してメトリックを収集するオープンソースツールです。結果のXML＆HTML出力が作成されます。
• 284 25? Grunt -Phantomas） - フロントエンドのパフォーマンスを測定するためのグラントプラグインラッピング幻腫。
• ？ Perfjankie-ランタイムブラウザのパフォーマンス回帰スイート（ 0 0?デモ））。
• ？ Browserview Monitoring -Internet Explorer、Chrome、FirefoxのWebページの読み込み時間を世界中の複数のポイントから継続的にチェックします。
• 新しいRelicブラウザの監視 - 実際のエンドユーザーのエクスペリエンスに焦点を当てて、ブラウザ側のアプリケーションをリアルタイムで監視します。
• ？ DAREBOOST -REALブラウザの監視。 YSLOW、ページ速度、多数のカスタムヒントを使用したWebパフォーマンスと品質に関する完全なレポートを提供します。
• ？ BYTESは実際のユーザー監視 - 完全な特徴の本物のユーザー監視ソリューションです。小さなサイト用の無料ティア。 GoogleのコアWebバイタルの監視が含まれています。

Metrics Monitor -API

• 1641 173? node.jsのWebPagetest APIラッパー）-WebPagetestAPIラッパーは、node.jsのWebPageTest APIをモジュールおよびコマンドラインツールとしてラップするNPMパッケージです。

Metrics Monitor-電子メール

• ？ WebPerformanceレポート - 毎週受信トレイでWebパフォーマンスレポート。 WebパフォーマンスとWeb最適化の観点から監視したいeコマースまたはWebサイトのステータスに関するパーソナライズされたレポートを取得します。コアWebバイタルが含まれています。

ミニファイヤー-HTML

• ？ htmlCompressor -HTMLCompressorは、コンテンツ構造を破ることなく、余分なホワイトスペース、コメント、およびその他の不必要な文字を削除することにより、HTMLまたはXMLソースを考慮して模倣する小さく、高速で非常に使いやすいJavaライブラリです。その結果、ページはサイズが小さくなり、ロードが速くなります。コンプレッサーのコマンドラインバージョンも利用できます。
• 542 73? django-htmlmin）-PythonのHTMLミニファイアのDjango-HTMLは、HTML 5を完全にサポートしています。Django、Flask、その他のPython Webフレームワークをサポートします。また、静的サイトや展開スクリプトに使用できるコマンドラインツールも提供します。
• 4962 576? htmlminifier）-htmlminifierは、糸くずのような機能を備えた、高度に構成可能で、よくテストされた、JavaScriptベースのHTMLミニフィーターです。
• 424 68? grunt-contrib-htmlmin） - htmlminifierを使用するhtmlをマイニルするグラントプラグイン。
• 726 57? gulp -htmlmin） - htmlminifierを使用するhtmlを監督するgulpプラグイン。
• 35 6? grunt -htmlcompressor） - htmlcompressorを使用したHTML圧縮用のグラントプラグイン。
• 12 7? html_minifier） - kangax html -minifierのルビーラッパー。
• 35 7? html_press）-HTMLを圧縮するためのRuby gemは、すべての空白のジャンクを除去し、HTMLのみを残します。
• 31 6? KOA HTML MINIFIER） - HTML -Minifierを使用してHTML応答を模倣するミドルウェア。 html-minifierのデフォルトオプションを使用しているため、すべてデフォルトでオフにされているため、オプションを設定する必要があります。
• HTML MINIFIER ONLINE -KANGAX（HTMLMINIFIER CREATOR）によるHTML MINツール。
• 162 18?最小化） - 最小化は、Node-HTMLParserに基づいたHTMLミニフィーターであり、現在、HTMLミニファイアは使用可能なサーバー側のみです。将来のリリースには、クライアント側のマイニフィスが追加されます。
• 133 86? HTML-MINIFIER） - HTML、Razor Views、WebフォームのビューをマイニングするためのシンプルなWindowsコマンドラインツールビュー

ミニファイヤー-JS＆CSS

• 3016 665? Yui Compressor）-JavaScriptコンプレッサーは、コメントや白いスペースを削除することに加えて、可能な限り小さな変数名を使用してローカル変数を難読化します。この難読化は、JSMINと比較して「評価」や「with」などの構成要素を使用している場合でも安全です（圧縮は最適ではありませんが）、平均節約は約20％です。
• 13204 1246? uglifyjs2） - uglifyjsは、javascriptで書かれたJavaScriptパーサー、ミニファイア、コンプレッサー、または美容剤ツールキットです。
• 3768 186? CSSO）-CSS他とは異なり。通常の模倣技術に加えて、CSSファイルの構造的最適化を実行することができ、他のミニファイアと比較してファイルサイズが小さくなります。
• 76 36? CSSMIN.js）-CSSMIN.jsは、YuicompressorのCSSミニフィーターのJavaScriptポートです。
• 812 170? grunt-contrib-concat） - ファイルを連結するためのgruntプラグイン。
• 1481 348? grunt-contrib-uglify） - JavaScriptファイルを連結および縮小するためのグラントプラグイン。
• 4178 323? clean-css） - node.jsの高速で効率的でよくテストされたCSSミニフィーター
• 2811 601? django -compressor） - リンクされたJavaScriptまたはCSSを単一のキャッシュファイルに圧縮します。
• 1520 371? django-pipeline）-Pipelineは、Djangoの資産包装ライブラリであり、CSSとJavaScriptの両方の連結と圧縮の両方、組み込みのJavaScriptテンプレートサポート、およびオプションのデータURI画像とフォント埋め込みを提供します。
• 750 150? jshrink）-Jshrinkは、JavaScriptを模倣するPHPクラスで、クライアントに迅速に配信できるようにします。
• JSCompress-最もミニマルなオンラインJSコンプレスツール。
• 1052 81? cssshrink） - cssはページをレンダリングするための重要なパスであるためです。小さいに違いない！またはそうでなければ！
• 28 4? grunt -cssshrink） - これは、CSSシュリンクのグラントラッパーです。
• 22 0? gulp -cssshrink） - cssshrink for gulpを使用してCSSファイルを縮小します。
• 6 1?かなり） - uglify（ストリップスペース）またはprettify（一貫したスペースを追加）CSSコード。
• 795 138? grunt-contrib-cssmin）-CSSミニファイアのグラント。
• 3825 174? grunt -uncss） - プロジェクトから未使用のCSSを削除するためのgruntタスク。
• 938 40? Gulp -uncss） - プロジェクトから未使用のCSSを削除するためのGulpタスク。

その他

• socialite.js-ソーシャル人は、いつでも希望するときに、多くのソーシャル共有ボタンを実装およびアクティブ化する非常に簡単な方法を提供します。ドキュメントロード、記事のホバー、あらゆるイベント。
• 1620 64? UCSS）-UCSSは、未使用のCSSセレクターを見つけるためにクロール（大きな）サイトのために作られていますが、未使用のCSSを除去しません。
• 343 21? httpinvoke） - 約束ベースまたはnode.jsスタイルのコールバックベースのAPIを使用したブラウザおよびnode.js用の依存性httpクライアントライブラリを進行して、イベント、テキスト、およびバイナリファイルのアップロードとダウンロード、部分的な応答ボディ、リクエストと応答ヘッダー、ステータスコード。
• 10052 372?クリティカル） - HTMLページ（アルファ）でクリティカルパスCSSを抽出してインラインで抽出します。
• 12 1? csscolormin） - css色を模倣するユーティリティ、例：min（ "white"）; //「#fff」に最小化します。
• 17585 1731? lazysize） - ユーザーインタラクション、CSS、またはJavaScriptを介してトリガーされた可視性の変更を検出する画像（応答性と正常）、IFRAME、およびスクリプト用の高性能レイジーローダー。
• パフォーマンス - パフォーマンスツールは、新しいパフォーマンスツールと既存のパフォーマンスツールを追跡するための共有リソースです。
• 1631 45? TMI）-TMI（画像が多すぎる） - ウェブ上で画像の重みを発見します。

SVG

• 21150 1390? SVGO）-SVGOは、SVGベクトルグラフィックファイルを最適化するためのNodeJSベースのツールです。
• ？ SVG OMG -SVGOMGは、SVGOのすべての構成オプションではないにしても、過半数を暴露することを目指しています。
• 433 40? grunt -svgmin） - svgoを使用してgruntを使用してSVGをマイニーします。
• ？ GULP -SVGMIN -GULPのSVGOを使用してSVGを縮小します。
• Scour -Scourは、SVGファイルを積極的にクリーニングし、特定のツールまたは著者がドキュメントに埋め込んだ多くの「Cruft」を削除するオープンソースのPythonスクリプトです。
• 1634 93? SVGクリーナー）-SVGクリーナーは、不要なデータからSVGファイルをクリーンアップするのに役立ちます。クリーンアップと最適化のための多くのオプションがあり、バッチモードで動作し、マルチコアプロセッサでスレッド処理を提供します。

Webコンポーネント

• 431 201?ポリマーバンドラー） - ポリマーバンドラーは、ネットワークのラウンドトリップを最小限に抑えるために、生産用のプロジェクト資産をパッケージ化するライブラリです。
• 100 25? gulp -vulcanize）-Webコンポーネントのセットを、加硫を使用する1つのファイルに連結します。

Webサーバーベンチマーク

• 992 156? httperf）-httperfは、Webサーバーのパフォーマンスを測定するためのツールです。さまざまなHTTPワークロードを生成し、サーバーのパフォーマンスを測定するための柔軟な機能を提供します。
• Apache Jmeter-オープンソースロードテストツール：Javaプラットフォームアプリケーションです。
• ローカスト - オープンソースロードテストツール。 Pythonコードでユーザーの動作を定義し、何百万人もの同時ユーザーでシステムを群がらせます。
• 179 23? autoperf） - autoperfは、単一のエンドポイントまたはログリプレイを通じて、Webアプリケーションの負荷とパフォーマンステストを自動化するのに役立つように設計されたHTTPERFのRubyドライバーです。
• 13 4? httperf.rb） - ルビーで書かれたhttperfのシンプルなルビーインターフェイス。
• 5 0? php -httperf） - httperf.rbのphpポート。
• 25 2? httperf.js）-JSポートオブhttperf.rb。
• 11 8? httperf.py） - httperf.rbのpythonポート。
• 4 0? gohttperf） - httperf.rbのポートに行きます。
• 38207 2955? WRK） - HTTPベンチマークツール（リクエスト生成、応答処理、およびカスタムレポートのためのオプションのLUAスクリプト付き）
• 6455 631? beeswithmachineguns） - 多くのミツバチ（マイクロEC2インスタンス）を攻撃（ロードテスト）（Webアプリケーション）に武装（作成）するためのユーティリティ。
• ？ K6-開発者向けに構築されたオープンソースロードテストツール。 CIパイプラインに簡単に統合できます。テストはES6 JSで記述されており、HTTP/1.1、HTTP/2、およびWebSocketを使用してAPI、マイクロサービス、およびサイトをテストできます。

Webサーバーモジュール

• ？ PageSpeedモジュール-PagesSpeedはサイトの速度を上げ、ページの読み込み時間を短縮します。このオープンソースWebサーバーモジュールは、既存のコンテンツやワークフローを変更することなく、ページおよび関連するアセット（CSS、JavaScript、画像）にWebパフォーマンスのベストプラクティスを自動的に適用します。 PageSpeedは、Apache 2.xおよびnginx 1.xのモジュールとして利用できます。
• 244 22? webp -detect） - 受け入れ交渉を伴うwebp。

仕様

• Webパフォーマンスワーキンググループ - リッチなWebクライアントアクティビティの一部であるWebパフォーマンスワーキンググループのミッションは、ユーザーエージェント機能とAPIのアプリケーションパフォーマンスの側面を測定する方法を提供することです。
• ページの可視性 - この仕様は、サイト開発者が電力とCPU効率の高いWebアプリケーションを開発するために、ページの現在の可視性状態をプログラム的に決定する手段を定義します。
• ？ナビゲーションタイミング - この仕様は、ドキュメントのナビゲーションに関連する高解像度のパフォーマンスメトリックデータを保存および取得するための統一されたインターフェイスを定義します。
• リソースタイミング - この仕様は、ドキュメント内のリソースの完全なタイミング情報にアクセスするためのWebアプリケーションのインターフェイスを定義します。
• ユーザーのタイミング - この仕様は、Web開発者が高精度のタイムスタンプにアクセスできるようにすることで、Web開発者がアプリケーションのパフォーマンスを測定できるようにインターフェイスを定義します。
• Performance Timeline - This specification defines a unified interface to store and retrieve performance metric data. This specification does not cover individual performance metric interfaces.
• ？ CSS will-change - This specification defines the will-change CSS property which allows an author to declare ahead-of-time what properties are likely to change in the future, so the UA can set up the appropriate optimizations some time before they're needed. This way, when the actual change happens, the page updates in a snappy manner.
• Resource Hints - This specification defines the dns-prefetch, preconnect, prefetch, and prerender relationships of the HTML Link Element (<link>). These primitives enable the developer, and the server generating or delivering the resources, to assist the user agent in the decision process of which origins it should connect to, and which resources it should fetch and preprocess to improve page performance.

Stats

• HTTP Archive - It's a permanent repository of web performance information such as size of pages, failed requests, and technologies utilized. This performance information allows us to see trends in how the Web is built and provides a common data set from which to conduct web performance research.

Other Awesome Lists

• 958 25? iamakulov/awesome-webpack-perf) - A curated list of webpack tools for web performance
• 32197 3561? bayandin/awesome-awesomeness).
• 338979 28117? sindresorhus/awesome).
• 823 61? imteekay/web-performance-research) - Research in Web Performance

貢献

For contributing, open an issue and/or a pull request.

ソース

8403 563? davidsonfellipe/awesome-wpo)