問題タブ [render-blocking]
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.
google-pagespeed - Googleのページ速度はインラインJavaScriptを使用すると言います
私のプロジェクト ( Preloaders.net ) には、Web アプリケーションであるため、多くのスクリプトがあります。「何らかの」css と js を持つ方法はありません。すべてを 1 つのファイルにマージしましたが、Google Pagespeed は「CSS と JS のレンダリングをブロックする」を削除するように言い続けていました。そこで、CSS と JS を HTML とインラインで表示するようにしました。Google のページ速度はインライン CSS に満足していますが、実際には馬鹿げているように見えます。JS と CSS が他のすべてのページにキャッシュされないためです。CSS と JS を分離することは、Web アプリが機能するためにすべて必要であるため、ほとんど役に立たず、不可能です。
だから今私は引き裂かれています-ユーザーパフォーマンスに最適なのはどちらですか:Googleの「愚かさ」またはレンダーブロッキングcssおよびjs?
よろしくお願いします。
javascript - レンダーブロッキングを解消する パフォーマンスの向上 javascript | 単一ページのアプリケーション| 角度 1.5x| Google ページ速度
現在、 Angular 1.xバージョンのアプリでパフォーマンスの改善を探しています。Google Page の速度を実行すると、RENDER BLOCKING STYLESHEETを受け取り、アプリケーションを最適化して 100/100 ページ スコアを取得しました。いくつかの興味深いサイトと、それを解決する重要なレンダリング CSS を生成するノード モジュールを見つけました。
受け取った解決策(静的ページで機能):
- クリティカル ノード モジュール
- https://jonassebastianohlsson.com/criticalpathcssgenerator/
- ペントハウス ノード モジュール
|| 直面している問題 || 疑問点 (解決策が必要):
- 単一ページ アプリケーションの場合、インライン クリティカル CSS を生成する方法。
- 400 の Web ページ (SPA ではない) がある場合、異なるコンテンツとテンプレート インジェクションを含む動的 Web サイトの各ページに重要な CSS を生成する方法。どうすればそれを生成できますか?それは可能ですか?
- ページが読み込まれるたびに、ページのそれぞれの重要な CSS を内部スタイル タグに自動的に挿入するように定義されたプラグインまたは方法はありますか?
- 400 の動的ページのサイトの重要な CSS をビルド時にのみ生成することは可能ですか? 特定のページに簡単に挿入できるように
- サーバー側レンダリング ページの重要な CSS をどのように生成できますか?
前もって感謝します.!! 多分質問は大きいです:(しかし、助けが必要です.!!