Clever Geek Handbook

バックエンドシステムのWebパフォーマンスが重要であり、最適化が必要なのはなぜですか？

ある日、国際貿易省（DIT）のサポートチームと興味深い会話をしました 。彼らは、Webアプリケーションの1つのパフォーマンスを改善したいと考えていました。このように話すことは、私が現在の立場で最も好きなことです。私は興味のあるトピックについて話し、新しい人々に会い、彼らが知らないかもしれない機会について話します。たとえば、アプリケーションのUXを改善する方法などです。



正直なところ、このサービスは内部使用であり、公開されていないことを知らされたとき、私は少し腹を立てました。これは、Webパフォーマンスを評価するための私の通常のgotoツールが利用できなかったことを意味しました。すなわち：



  • WebPageTest
  • PageSpeedインサイト
  • CrUXダッシュボード
  • 黄色のラボツール


これは私にアイデアを与えました：どのように内部サービスと製品をテストできますか？この記事で私は見つけようとします。



高速内部システムの最も重要な条件



ご存知のように、世界的大流行により世界は大きく変化しました 。広範囲にわたる封鎖のため、機会があったすべての人が自宅で仕事を始めました。これは、世界中のインターネットのパフォーマンスに大きな影響を与え、 トラフィックが多くなり、ダウンロード時間が長くなりました。このため、従業員が仕事を遂行するために必要なすべてのツールは、すばやくロードされ、インタラクティブである必要があります。



以前は、内部ユーザーがオフィスから作業し、ローカルエリアネットワーク（LAN）を使用していたため、このようなパフォーマンスの問題はありませんでした。問題は、多くの人が低速で不安定なインターネット接続のある小さな都市に住んでいるという事実によって悪化しています。または、逆に、競争係数（競合率）が高い都市では 。内部システムについて話しているので、ほとんどの場合、従業員はVPNを使用してオフィスネットワークにアクセスする必要があり ます。しかし、これもあまり便利ではありません。VPNはインターネットの速度を遅くすることがよくあります 。



従業員もユーザーであることを覚えておくことが重要です。したがって、Webアプリケーションのパフォーマンスの低下は従業員の作業に悪影響を与えるため、内部システムも最適化するようにしてください 。内部システムが通常プライベートである場合、どのツールを使用しますか？これについてはさらに話します。



WebPageTest



最初に明確にしておきたいのは、内部システムをテストしているときは、オープンソースバージョンのWebPageTestを使用 できないということです。ただし、プライベートを設定することはできます。これにより、内部ネットワークでの使用が可能になります。







起動後、すべての内部システムの膨大な量のデータへのアクセスが開きます。必ずガイドを読んで 、WebPageTestからできるだけ多くの情報を入手してください。独自のバージョンを設定することは、思ったほど難しくはありません。数分でAWSに自分でセットアップする方法に関するいくつかの素晴らしいチュートリアルがあります：



  • 5分でWebPagetestプライベートインスタンス-PatrickMeenan
  • 自動スケーリングプライベートWebPageTestインスタンスを設定するステップバイステップガイド-ロビン・オズボーン
  • AWSのプライベートWebPageTestインスタンス-PeterHedenskog
  • 「オールインワン」WebPageTestプライベートインスタンスを設定する-アンディ・デイヴィス


このオプションにより、WebPageTestを自動的に実行できるようになります。これはいくつかの方法で行うことができます。



  • Falco-オープンソースのWebPageTestランナー
  • WebPageTest API経由でWebPageTestを自動化する-ロビン・オズボーン
  • WebPageTestバルクテスター-アンディ・デイヴィス


このようにして、新しいシステム変更のパフォーマンスへの影響（プラスまたはマイナス）を追跡できます。



灯台



あなたがおそらくすでに持っている次のgotoツールは Googleの灯台です。コンピューターに







GoogleChromeのコピーをインストールしている場合、Lighthouseを使用して内部システムを監査するのは非常に簡単です。 [DevTools]タブで[Lighthouse]を見つけ、[Generatereport]をクリックします。







起動から1分後、上の図に示すように、監査によって結果が返されます。ブラウザ拡張機能はパフォーマンスに悪影響を与える可能性があるため、Lighthouseのテスト専用に新しいChromeプロファイルを設定することを強くお勧めします （ページでの動作によって異なります）。



しかし、Lighthouseは単なる監査ダッシュボードではありません。このツールを使用できるその他の方法は次のとおり



です。コマンドラインインターフェイス（CLI） を使用してLighthouseを



実行できます。サイトのすべてのページでLighthouseを簡単に実行でき ます。



パフォーマンスの前後をLighthouseCI Diff と比較する テスト



を実行することにより、複数のサイトで定期的にLighthouseを自動的に実行 します。 独自の監査を



追加し て、サイトの特定の部分を監視します



GithubGistと LighthouseReportViewerを介して結果を共有します 。



Sitespeed.io



多くの人が過小評価しているので、Sitespeed.ioをこのリストのトップの1つに入れ ました。これは、Webサイトのパフォーマンスを向上させるためのすばらしいツールセットです。簡単なコマンドdocker



または ですばやく簡単に構成できます npm



。また、Sitespeed.ioはローカルマシンで簡単に実行でき、すばやくテストできます。







sitespeed.ioを使用すると、Graphite / Grafanaにデータを送信してこのようなダッシュボードを取得することにより、必要な数のページを継続的に追跡できます 。基本的に、Sitespeed.ioは次のツールセットです。



  • Coachは、ページの読み込み速度を上げるのに役立つ自動化ツールです。
  • BrowsertimeはSitespeedの主要なツールです。テストブラウザ（Chrome、Firefox、iOS Safariなど）と相互作用し、パフォーマンスメトリック、画像、ビデオなどを収集します。
  • PageXrayは、HTTPアーカイブ（HAR）ファイルをJSONに変換して、読みやすく、使いやすくするために使用されます。（以下のHARファイルの詳細をお読みください）
  • Throttleは、パフォーマンステストのためにネットワーク接続を調整するためのコマンドラインツールです。


注： スロットルはコンピューター全体のインターネット接続をブロックするため、シャットダウンするときは必ずオフにしてください。



  • Compareは、HARファイルをすばやく簡単に比較するためのオンラインツールです（例：前後）。


ChromeのDevTools



最新のブラウザにはすべて、開発者ツールがすでに組み込まれています。FirefoxのFirebug以来、私たちは長い道のりを歩んできました 。最も重要なことは、DevToolsは、ブラウザーの新しいバージョンごとに、より強力になっていることです。これは開発者とユーザーの両方にとって便利です。サイトのバグが少なくなるはずだからですよね？ハ！







上の画像は、Webページのパフォーマンス監査が提供できる詳細情報を示しています（ [パフォーマンス]タブ）。ただし、Chrome DevToolsには、パフォーマンス測定タブの他に、他にも多くの機能があります。



  • [ネットワーク]タブには、ブラウザ内のすべての要求（および応答）に関する詳細情報が表示されます。
  • メモリ使用量に関する完全な情報と、そのバグを修正する方法を収集できます。
  • [カバレッジ]タブを使用して、ページ上の未使用のCSSとJavaScriptを検索します。
  • 他の多くの側面をカバーするDevToolsのパフォーマンス分析に関する詳細な投稿を読んでください。


また、このトピックに関するGoogle以外の記事をお探しの場合は、以下をご覧ください。



  • 16とChromeデベロッパーツールに反応して、パフォーマンスが反応プロファイリング-ベン・シュワルツ
  • ChromeDevToolsネットワークタブを使用したWebパフォーマンスのデバッグ-DebugBear
  • ChromeDevToolsを使用したJavaScriptメモリリークのデバッグ-DebugBear


FirefoxのDevTools



DevToolsを使用してパフォーマンスの問題を評価するのに役立つブラウザは他にもあります。私はFirefoxユーザーなので、このブラウザのツールを定期的に使用しています。Firefoxには、サイトの問題を見つけるために使用できるタブのフルセットもあります。







次のツールを使用して次のことができます。



  • ページ上の複雑なJavaScriptを識別してデバッグします。
  • コールドキャッシュとウォームキャッシュの両方を備えたページ上のリソースタイプを簡単に視覚化できます。
  • アクセシビリティの問題についてサイトをチェックします（Firefoxには便利なツールの素晴らしいセットがあります）。


分析データを拡張するためのライブラリ



これは内部ツールでは機能しない可能性がありますが、分析（Google Analytics、Fathom、Matomoなど）を使用して使用状況を追跡する場合は、収集したデータを拡張して、Webパフォーマンスに関するより完全な情報を含めることができます。







使用できるいくつかのライブラリ：



  • Perfume.jsは、分析ツールに転送するために大量のRUMデータを収集するように構成できます。
  • 解析- Perfume.jsプラグイン簡単に様々な分析ツールにWebパフォーマンスデータをプッシュするPerfume.jsのラッパーです。
  • web-vitalsは、他のWeb Vitalと同じように、Core WebVitals情報を正確にキャプチャします。


Perfume.jsは、収集されたデータの量に関して他のツールとは一線を画しています。RealUserMonitoring（RUM）。必要なだけ収集するように完全にカスタマイズできます。これを行う方法に関するいくつかのチュートリアルがあります：



  • 香水（.js）のタッチで最初の（満足のいく）ペイント-Leonardo Zizzamia
  • RUMと対話する時間-LeonardoZizzamia
  • ビデオ：Perfume.js + Analyticsを使用したサイトWebパフォーマンスの改善


JavaScriptアナリティクス



この記事ではJavaScriptの内部については説明していませんが、JavaScriptの使用を最小限に抑えることで、Webのパフォーマンスと全体的な安定性を向上させることができる と思います 。ただし、JavaScriptを使用する場合は、可能な限り最適化するようにしてください。







幸いなことに、これには多くのツールがあります。



  • bundle-wizard -JavaScriptバンドルの視覚化を作成するためのCLIツール（上の画像を参照）。これにより、不要なものをすべて削除できます。
  • バンドル恐怖症-npmパッケージをバンドルに追加するのにかかる費用を調べてください。
  • Webpack Bundle Analyzer-このインタラクティブなスケーラブルなマップツールを使用して、Webpack出力ファイルの内部構造を視覚化します。
  • source-map-explorer-ソースマップを使用して肥大化したJavaScriptコードを解析します（このツールはSassおよびLESSと連携してCSSを解析します）。


ツールや記事を分析するための特別なフレームワークも利用できます。



  • reactopt - ReactのCLIパフォーマンス最適化ツール-ページを再レンダリングする必要があるかどうかを判断します。
  • TracerBenchは、Webアプリケーション用の監視されたパフォーマンステストツールです。パフォーマンスの違いを明確で実用的かつ便利に分析できます。
  • Reactパフォーマンスアプリ-DebugBear


CSS分析



Chrome DevToolsで前述した[カバレッジ]タブの他に、コマンドラインインターフェイス（CLI）から実行できるツールもあります。彼らはその複雑さを考慮してCSSを解析し、Webサイト全体で未使用のセレクターを識別します。



  • analysis-cssは、コマンドラインインターフェイスから実行されるCSSセレクターの複雑さとパフォーマンスのアナライザーです。
  • uCSS-サイト全体をトラバースして、削除できる未使用のCSSセレクターを探します。


サーバーパフォーマンス測定



パフォーマンスの黄金律は次のとおりです。ユーザーがフロントエンドに費やす時間の80〜90％。



バックエンド/サーバーが最適化されていることを確認することをお勧めします。結局のところ、 「最初のバイトまでの時間は重要です」。







また、サーバーが高負荷で実行し続けることができるようにすることも重要です。これらの両方を行うのに役立つツールがいくつかあります。



  • httpstatは、curlから返される接続時間データを視覚化するための小さなPythonスクリプトです（上の画像を参照）。
  • h2loadは、HTTP / 2およびHTTP / 1.1をテストするためのコマンドラインインターフェイスツールです。
  • Hey — .
  • k6 — , JavaScript. API CLI.
  • Server- — , -. - .


Puppeteer



Puppeteerは、DevToolsプロトコルを使用してChromeまたはChromiumを制御するための高レベルAPIを提供するノードライブラリです。ブラウザで手動で行うことのほとんどは、Puppeteerで再現できます。これをWebパフォーマンステストにどのように使用できますか？ Addy Osmaniは、WebパフォーマンステストにPupperteerを使用することについてブログに投稿し、Githubでコードを共有しました。これらのテストは、CLIを介して簡単に実行し、内部Webサイトと外部Webサイトの両方をテストできます。



  • Puppeteerを使用したWebパフォーマンス測定の自動化
  • Puppeteerを使用したWebパフォーマンスレシピ


ブラウザ拡張機能



Webパフォーマンスの測定に使用できるブラウザ拡張機能はたくさんあります。起動時に、最小限の拡張機能を備えた別のプロファイルを使用することをお勧めします。これは、一部のブラウザ拡張機能がページと相互作用し、パフォーマンスを低下させ、誤った結果をもたらす可能性があるためです。次の拡張機能を使用できます。



  • slothは、ブラウザのCPUとネットワークの速度を低下させる拡張機能であり、低速のデバイスでページのパフォーマンスを簡単にシミュレートできます。
  • Perfmap-この拡張機能を使用すると、ブラウザーは、ブラウザーにロードされたリソースのヒートマップと、Resource TimingAPIに従って個々のパフォーマンスへの影響を作成します。
  • Web Vitals Chrome拡張機能は、アクセスしたすべてのページのWeb Vitalsコアメトリック（LCP、CLS、FID）を表示するChrome拡張機能です。注：これはまもなくChrome DevToolsに組み込まれ、Canaryで利用できるようになります。
  • perf-diagnostics.cssは実際にはブラウザの拡張機能ではなく、一般的なパフォーマンスの問題を修正するためにページに追加できる一連のCSSです。幅/高さの属性なしで画像を強調表示する簡単で効果的な方法。


特定のJavaScriptフレームワークを使用する際のパフォーマンスを向上させるために特別に設計された拡張機能もあります。



  • React Developer Tools — «Profiler» DevTools, React.
  • Angular Augury — Chrome Firefox, Angular.
  • Ember Inspector — -, Ember.




Network Throttling



ネットワークスロットリングは、ネットワーク接続を遅くする方法です。大都市では、多くのユーザーが高速で安定したブロードバンド接続を利用できないことを理解することが重要です。一方、ブロードバンドが貧弱でモバイル信号強度が非常に弱い地方にいる人もいます。独自のネットワーク接続を調整することにより、その特定のネットワーク環境でのユーザーのサイトのパフォーマンスに関する洞察を得ることができます。



「ChromeDevToolsに組み込まれているのに、なぜネットワークをブロックしたいのですか？」と質問するかもしれません。すべてのネットワーク規制方法がすべてではないことを理解することが重要 です同じように動作します。Chrome DevToolsを使用したスロットリングでは、応答ごとにブラウザレベルの遅延が適用されます。Lighthouseはテストをフルスピードで実行してから、接続速度をシミュレートし、メッセージ速度の精度を犠牲にします。次のツールははるかに正確です。それらは、はるかに低いレベルで機能するOSレベルのネットワークスロットリングを使用します。



注：以下のこれらのツールは、コンピューター全体の接続を規制するため、テスト時には不要なアプリケーションを閉じ、完了したらスロットルを無効にしてください。



  • ネットワークリンクコンディショナー
  • スロットル


throttle



とてもシンプルなのでいつも使っています 。 



# Enable 3G Slow
throttle 3gslow

# Use a custom connection profile
throttle --up 1600 --down 780 --rtt 250

# Disable throttle
throttle --stop


HARファイルの分析



この記事の前半で、HTTPアーカイブ（HAR）ファイルについて説明しました。これらのファイルを使用すると、WebブラウザとWebサイトのネットワーク相互作用を記録できます。これらのファイルの優れている点は、ブラウザー（内部または外部）からアクセスできるすべてのサイトで使用できることです。それらを見つけることのFirefoxとChromeの開発ツールでは非常に簡単です：



Firefoxの





クローム





あなたが表示し、分析に使用できる他のツールがあります。



  • HARアナライザーは、GoogleのブラウザーベースのHAR分析ツールです。
  • YSlowコマンドラインHARアナライザーはかなり古いサービスですが、HARファイルを分析してパフォーマンスを向上させることができます。
  • PageXray — HAR JSON, ( Sitespeed.io).
  • Compare — -, HAR (, “” “”).
  • HAR Viewer — - HAR .
  • Charles Proxy — HTTP- / HTTP-, HAR .
  • Fiddler — -, , -. HAR.


Web APIs



ブラウザブラウザのネイティブ機能に戻ると、ライブラリを使用せずにサイトのパフォーマンスを自分で測定するために使用できるAPIがいくつかあります。



  • performance.now（） -ブラウザのパフォーマンスnow()



    インターフェイスメソッドは、メソッドが呼び出されたときからの高精度のタイムスタンプを返します。2回の通話間の時間を非常に簡単に測定できます。特定のコードの前後にそれらを追加すると、それを測定して最適化することができます。
  • ナビゲーションタイミング-このAPIを使用すると、開発者はドキュメントナビゲーションに関連するタイミングデータを収集できます。
  • リソースのタイミング-このAPIを使用すると、開発者はドキュメントによってロードされているリソースの完全なタイミング情報を収集できます。
  • ナビゲーションとリソースのタイミングと実際の生活の中でのロード性能評価-ジェレミー・ワーグナー- 2つのAPI上でのウェブページの読み込み性能を測定するために使用することができる方法についてのA非常に詳細な記事を。


結果



うまくいけば、この記事にリストされているツールで、内部システムの改善に役立つツールが見つかるでしょう。サービスやウェブサイトを社内の従業員だけが使用している場合でも、最適化する必要がないという意味ではありません。最近は多くの人がリモートで作業しているにもかかわらず、誰もが高速で安定した接続を持っているわけではありません。したがって、あなたとあなたの同僚もユーザーであることを忘れないでください！


More articles:


All Articles