問題タブ [web-performance]
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.
html - レンダリング ブロッキング CSS について
特定の設定で CSS がどのように評価されるかを理解しようとしています。
<head>タグに次のコンテンツがあるとします。
ここで、スクロールせずに見えるコンテンツまたは HTML の要素に直接影響を与えるいくつかのルールを想定reset.cssして含めましょう。style.cssただし、autocomplete.css後で一部の JavaScript によって使用されるクラスのみが含まれます。
reset.cssここで、ブラウザーが既にダウンロードされてstyle.cssいautocomplete.cssて、まだ保留中であるとさらに仮定しましょう。ページの最後にブロッキング スクリプト タグが表示された場合、ブラウザはどうなるでしょうか。明らかに、スクリプト タグまでの HTML をレンダリングできますが、スクリプトの実行は、不足しているためにブロックされていautocomplete.cssますか?
script タグは同期ではないことに注意してください。
私は読んだ: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp
そして、CSSOM が存在するまで JavaScript の実行がブロックされると書かれています。
今: 1. ページautocomplete.cssがまだ到着していなくてもレンダリングを開始しますか? 2. script.jsJavaScript の実行はブロックされるまでブロックされautocomplete.cssますか?
レンダリングとスクリプトの実行という 2 つの異なることについて言及していることに注意してください。
wordpress - Wordpress Yoast - 構造化されたデータタグを移動
Yoast プラグインは、構造化データ スクリプト タグをページの<head>セクションの上部近くに追加しています。これは、他のスタイルシート タグの上にあり、ブロックされているため、Google Page Speed アナライザーによってフラグが立てられていることに気付きました。
したがって、タグをヘッダーの下部に移動したいと思います。
まず、タグを完全に削除する方法があることを発見しました: How to remove action from yoast plugin
これで、タグをハードコードすることheader.phpができますが、プラグインによって動的に生成されるタグを再度追加した方がよいでしょう。
それは可能ですか？
service-worker - Service Worker への長時間の待機リクエスト
Service Worker がキャッシュからのアイテムで応答するのを待つ時間が、期待するほど速くないことに気付きました。sw-precache私は両方とカスタム作成された Service Workerで同じ待ち時間を見てきました。
この待機時間の考えられる原因は何ですか?また、どのように短縮できますか?
fetchカスタム サービス ワーカーでの私のイベントは次のようになります。