5

クリティカル パス cssを読んだ後、これを自分のビルドに埋め込む方法を考えていました。すでにこれを行う完成したツールはありますか? インライン CSS が他の CSS と同期しなくなるのを避けるために、このプロセスは自動化できる必要があります。

現在そのようなツールがない場合は、この実験的なスクリプトを PhantomJS と一緒に使用して作成する方法 (たとえば、grunt プラグイン) を確認できますが、車輪を再発明する意味はありません (既にある場合)。

4

2 に答える 2

5

私も全く同じ考えでした。

クリティカル パス CSS ジェネレーター. （リンクしたツールも使用しませんでした。これは、疑似セレクター、メディアクエリ、-webkit 以外のプレフィックス付きの css ルールなどが欠落しているためです）。

より多くのドキュメントが準備中ですが、基本的にはまず PhantomJS をインストールしてから、次のようにスクリプトを呼び出します。

phantomjs penthouse.js http://youSite.com/page1 yourSite.css > yourSite-criticalcss-page1.css
phantomjs penthouse.js http://youSite.com/page2 yourSite.css > yourSite-criticalcss-page2.css

縮小された CSS と縮小されていない CSS を渡すことができます。一致しないセレクター、ルールを削除する以外は CSS を変更しません (そしてコメントを削除します)。

于 2014-06-05T07:42:56.593 に答える
1

IISpeed または Apache/Nginx PageSpeed モジュールを使用する

Google は、Apache および Nginx フロント サーバーで動作するPageSpeed という素晴らしいモジュールをいくつか維持しています。.NET の場合は、PageSpeed モジュールに相当する IIS であるIISpeed を使用してください。これは商用で 100 ドルの費用がかかりますが、フロントエンドの観点から見ると、その機能は非常に素晴らしく、(他の多くのものの中でも) Penthouse を使用する際の主な問題である、変化する/動的なコンテンツの生成を処理します。

これは、任意のページへの最初の訪問者の一部の頭に JavaScript を挿入し、どの CSS ルールが実際に使用されているかを分析することによって機能します。次に、いくつかのラウンドの後、これらの css ルールを収集し、head後続のすべての訪問者のためにそのページのインライン css として挿入します。

これは完全に自動化されており、どの ASP.NET ページでも機能します。これにより、スピードアップしたいすべてのページでペントハウス (上記) を手動で実行する必要がなくなり、その css を最新の状態に保つことを忘れないでください (そうしないと、いつか古くなってスタイルが台無しになります)。

ペントハウスは、コンテンツがほとんど静的なページには依然として優れています。

于 2016-12-14T14:17:01.397 に答える