問題タブ [lighthouse]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
prefetch - Google Lighthouse が preconnect と dns-prefetch を認識しない
Google Lighthouse のパフォーマンス レポートでは、次の推奨事項が示されました。
「任意のオリジンへの複数の費用のかかるラウンドトリップを回避する」...次に、8 つのオリジンのリストに進みます。
そこで、サイトのセクションの上部に次のコードを追加しまし<head>た。href は各オリジンに対応しています。
<link rel='dns-prefetch' />また、それと他のブラウザのヒントを組み合わせて試してみました。
ただし、しばらくしてから再度実行しても、Lighthouse レポートには何も変化がありませんでした。Lighthouse でその問題を解決し、完璧なレポートに一歩近づくことができるように、誰かが私を正しい方向に導くことができますか?!
編集: これを行っても Lighthouse Report に違いが生じない理由は推測できます。それは、事前接続が完了する前にドキュメントでリソースが呼び出されるためです。したがって、技術的には少し早く開始され、数ミリ秒節約されますが、ドキュメントの残りの部分は非常に小さく、プリフェッチまたはプリコネクトが完了する前にそれらのリソースを要求します。論理的に聞こえますか？
javascript - Google フォントのプリロード
Light House の監査では、キー リクエスト、特に React アプリで使用している 2 つの Google フォントをプリロードするよう提案されています。Light House のメンバーは、次の使用を提案しました。
<link rel="preload" as="style" href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto:700" crossorigin>
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
ウォーターフォールに表示され、次のコンソール警告が表示されるため、リクエストを行っていることがわかります。
「リソースhttps://fonts.googleapis.com/css?family=Open+Sans|Roboto:700は、リンクのプリロードを使用してプリロードされましたが、ウィンドウのロード イベントから数秒以内に使用されませんでした。値であり、意図的にプリロードされています。」
残念ながら、この 2 つのフォントはアプリに表示されなくなりました。@font-face などを使用して CSS でこれらを定義する必要がありますか?
google-chrome - ローカル マシン上の Chrome ヘッドレス スクリーンショット
私は ember で作成されたローカルホスト Web サイトを持っていますが、これは正常に動作しています。
Lighthouse を使用して、時間の経過に伴うパフォーマンスに関するいくつかの指標を取得したいと考えています。もちろん、これを Chrome でヘッドレスにしたいです。NPM を使用して Lighthouse をインストールし、次のコマンドを実行します。
上記を実行すると、次のエラーが発生し、パフォーマンス メトリックとして疑問符が表示されました。
http-server パッケージで ember の dist フォルダを実行してみましたが、結果に違いはありませんでした。同じエラーが発生します。
テスト環境で google.com または Web サイトに対してテストを実行すると、エラーではなく結果が返されます。同僚が自分のローカル マシンで実行している場合、エラーは発生しません。私たちが見つけることができる唯一の違いは、彼がwin8.1を実行していて、私のマシンがwin10であることです.
ヘッドレス フラグなしで Chrome を実行すると、結果も得られますが、ヘッドレスで動作させるにはそれが必要です。
Lighthouse、Chrome、Windows10、ノードのすべての最新バージョンを使用しています。Chromiumも試しましたが、違いはありませんでした。
うまくいけば、誰かがアイデアを得た