精度で計測することが可能です。オブジェクトによりいくつかのメソッドを提供します。サイトを参照してください。計測する簡単なサンプルです。Developersウェブフォント読み込み中のテキストの表示この問題は、ウェブフォントが読み込まれ表示されるまでの間、ユーザが他の代替フォントでテキストが見れない場合に発生します。使用することで利用可能です。ユーザのデバイスがフォントを持っていれば問題ありませんが、フォントを持っていない場合はダウンロードする時間がかかります。日本語フォントの場合、使われている文字数の関係からファイルサイズが大きくなります。ダウンロードが完了するまで、代替フォントによるテキストの表示がなされない場合、空白の画面のまま待機することになります。プロパティによって制御することができます。つのいずれかを選択します。auto:フォントの表示戦略はユーザーエージェントが定義します。(デフォルト値)block:フォントに対して短いブロック期の後、永続的にスワップ期を置きます。swap:フォントに対して非常に短いブロック期の後、永続的にスワップ期を置きます。fallback:フォントに対して非常に短いブロック期の後、短いスワップ期を置きます。optional:フォントに対して非常に短いブロック期の後、スワップ期を置きません。損ねる場合があり、どの値を取るべきかはサイトの戦略次第になります。選ばれる傾向にあります。プロパティを用いた戦略については、以下のサイトを参照してください。プロパティに適切な値を設定し、ウェブフォントが表示されるまでの挙動を改善することです。解析、コンパイル、実行にかかる時間が大きい場合に発生します。出力したレポートには、カテゴリとかかった時間が表示されているため、何がボトルネックとなっているのかが分かります。制御するべきアニメーションなども記述できます。行えるような処理をスクリプト側で実装してしまうと、その分だけスレッドを独占します。この問題の解決方法は、ボトルネックとなっているメインスレッド上の処理をチューニング、またはリファクタリングすることです。レンダリングの邪魔にならないように、初期表示に不要な処理は遅延読み込みさせたり、何かしらのイベント発火にしてください。設定されていない場合に発生します。要求する際に、ある一定期間はダウンロードをしないキャッシュの仕組みです。画像ファイルなどはテキストファイルとは異なり変化しないリソースであるため、毎回ダウンロードする必要はありません。キャッシュしておくように指示することができます。長時間キャッシュするように指示された場合、ブラウザはローカルにファイルを保存しておきます。次回同じファイルをリクエストする場合に、キャッシュ時間内であれば、ダウンロードせずにローカルのファイルを参照します。ダウンロードするよりもローカルのファイルを参照した方が速いため、効率的なキャッシュはページの読み込み速度を短縮することができます。フォントや画像などは不変の静的アセットであるため、長時間キャッシュできます。キャッシュの時間内はブラウザ側でクリアしない限りアセットが更新されないため、サーバのファイルを入れ替えても古いアセットが表示され続ける点には注意が必要です。キャッシュについては、キャッシュ最適化によるパフォーマンス改善を参照してください。キャッシュ戦略については、以下を参照してください。Developersこの問題の解決方法は、静的なアセットに効率的なキャッシュを割り当てることです。どのファイルに、どれだけのキャッシュ期間を割り当てるべきかは、ファイルやサイトの特性に左右されるため一概には言えません。本サイトの数値は以下となりますので、参考にしてください。実行にかかる時間の低減この問題は、スクリプトの実行時間が長い場合に発生します。表示されているため、何のスクリプトがボトルネックとなっているのかが分かります。メインスレッドが完了する必要があります。そのため、メインスレッド上で大量のコードが実行されると、ユーザの操作できるまでの時間が伸びてしまうため、体感速度が低下します。大量のメモリを消費する場合、メモリ不足によって操作しにくい状態になります。メモリリークが発生すると、ページは完全にフリーズしてしまう可能性があります。起動最適化の詳細については、以下を参照してください。Developersこの問題の解決方法は、コードのチューニング、またはリファクタリングです。ユーザが必要とするコードのみを送信し、コードの縮小や圧縮、または未使用のコードの削除を検討してください。変更しないコードについてはキャッシュを利用することでネットワークトリップを減らすこともできます。Developersクリティカルなリクエストの深さの最小化この問題は、監査の合格や不合格を判定するものではありません。出力されたレポート情報は、ページの読み込み速度を改善するために利用できます。つのパスは別のチェーンになっています。チェーンには、リソース毎のダウンロード時間とバイト数の内訳も表示されています。そのため、クリティカルリクエストチェーンは、クリティカルレンダリングパスを最適化するための重要なレポートになります。このレポート情報を参考に、クリティカルなリソース数を最小化や削減、ダウンロード時間の短縮や、遅延や非同期、またはラウンドトリップ数の削減を行います。このような最適化を行うことで、ページの読み込み速度を上げることができます。最適化によるパフォーマンス改善、もしくは下記の記事を参照してください。Developers適切なサイズの画像この問題は、画像が適切なサイズで指定されていない場合に発生します。レンダリングされた画像のサイズをデバイスのピクセル比も考慮に入れた上で実際の画像のサイズと比較します。以下の場合、適切なサイズの画像ではないと判断します。デバイスに合わせた適切な画像サイズにするためには、レスポンシブデザインに対応する必要があります。画像の場合はベクタ形式であるため、画像を劣化させずに任意の大きさに変更できます。画像で代替できるかを検討してください。この問題を解決方法は、ページで使用している画像をデバイスの解像度を考慮したレスポンシブデザインに対応させます。詳細は、画像最適化によるパフォーマンス改善を参照してください。されていない場合に発生します。コメント文や空白文字について最小化できるかどうかを検証します。方がファイルサイズが少ない場合があります。最小化するためのツールはオンラインサービスを含めて様々なものがあります。最適化によるパフォーマンス改善を参照してください。されていない場合に発生します。ファイルサイズを縮小するためには、専門的な知識を必要としますが難読化という方法があります。難読化は最小化よりも優れたパフォーマンスを発揮しますが、コードに破壊的な変更を加えるために圧縮前のコードに厳密な制限をかけています。それらの制限が守られていないコードは難読化を実施できません。専門的な知識がない場合は、最小化の実施だけにとどめておくべきです。最小化、または難読化するためのツールは、以下の記事を参照してください。難読化ツールも以下の記事にリンクがあります。Developersテキスト圧縮の有効化この問題は、テキストタイプのリソースが圧縮されていない場合に発生します。圧縮し、前後比較を行います。未満の場合、テキストの圧縮は有効であると判断します。ブラウザがサポートしている圧縮エンコードリストが含まれています。どの形式を使用したのかを通知します。形式で圧縮したリソースを返した例になります。レスポンスヘッダの例この問題の解決方法は、テキスト圧縮を有効にすることです。圧縮によるパフォーマンス改善を参照してください。行う投機的な処理が含まれていない場合に発生します。行う投機的な処理とは、リンク先へ事前接続を行うことです。クリックする前からリンク先の読み込み処理を行うことで、クリックしてからの処理速度を短縮させることができる技術です。ルックアップを事前に行う。prefetch:ページ読み込み時のリソースダウンロードを事前に行う。prerender:ページ読み込み時のレンダリング処理を事前に行う。行う投機的な処理の記述は以下のとおりです。行う投機的な処理を記述することです。詳細は、以下の記事を参照してください。属性が付与されていない場合に発生します。クリティカルチェーンは、「クリティカルなリクエストの深さの最小化」の項目を参照してください。属性を付与されたリソースは優先的にダウンロードされます。行う投機的な処理に似ていますが、振る舞いは異なります。行う投機的な処理は、まだ接続されていないページ外のリソースに対して事前に接続を行います。属性は、ページ内のリソースに対して優先度を上げる目的で使用されます。属性はクリティカルチェーンにおいて優先的にダウンロードされます。属性を付与することです。アニメーションコンテンツの配信方法として選択している場合に発生します。単位のファイルサイズになります。用いることでサイズを確認することができます。他の形式に変換してファイルサイズを縮小することです。これらの形式は、品質を劣化させずにファイルサイズを縮小することができます。他の効率的な形式に変換するためにはいくつかのツールがあります。変換ツールや、ツールの使い方などの詳細は、以下の記事を参照してください。Developers過大なネットワークペイロードの回避この問題は、ページのリソース合計が大きすぎる場合に発生します。以上である場合、サイズが大きすぎると判断します。一般的なページでリソースの大半を占めているのは、画像や動画ファイルです。この問題の解決方法のひとつは、画像のファイルサイズを圧縮などによって最適化することです。詳細は、画像最適化によるパフォーマンス改善を参照してください。パターンとすることです。パターンは、ブラウザの読み込み処理を適切にスケジューリングすることで細かく読み込み、一度に大量のリソースを読み込まない方法です。パターンは有効である可能性があります。パターンの詳細は、以下の記事を参照してください。サイズが大きすぎる場合に発生します。サイズが大きすぎると判断します。多くのメモリを消費し、スタイルの計算に時間がかかり、レイアウトにおけるリフローのコストが大きくなります。最適化によるパフォーマンス改善を参照してください。セレクタを単純化させてください。含めて大幅な変更がありました。監査に失敗した場合の問題、および解決方法について提示しています。検出された問題の中には専門的な知識が必要になり、改修が非常に難しい問題も含まれます。無理に修正をすることだけを考えずに、サイトを運用していく上でのメンテナンス性も併せて考慮しましょう。2020このサイトについてmurashun@gmail.com@murashun。