penthouse
2.3.3
クリティカル パス CSS ジェネレーター
Penthouse はオリジナルのクリティカル パス CSS ジェネレーターであり、Web サイトのページ レンダリングを高速化するのに役立ちます。サイトの完全な CSS と重要な CSS を作成するページを指定すると、Penthouse はページのスクロールせずに見える範囲のコンテンツを完全にレンダリングするために必要な重要な CSS を返します。クリティカル パス CSS の詳細については、こちらをご覧ください。
このプロセスは自動で行われ、生成された CSS はそのまま本番環境で使用できます。舞台裏では、Penthouse は puppeteer を使用して、chromium:headless 経由で重要な CSS を生成しています。
(コードを記述したくない場合は、オンラインでホストされているバージョンを使用できます。)
yarn add --dev penthouse
(糸を使用しない場合はnpm install )
penthouse ( {
url : 'http://google.com' ,
cssString : 'body { color: red }'
} )
. then ( criticalCss => {
// use the critical css
fs . writeFileSync ( 'outfile.css' , criticalCss ) ;
} )https://github.com/pocketjoso/penthouse/tree/master/examples
Penthouse は、多くのジョブを並行して実行するために最適化されています。 1 つの共有ブラウザ インスタンスが再利用され、各ジョブは独自のブラウザ タブで実行されます。マシンのリソースが不足し始める前に、並行して実行できるジョブの数には限りがあります。多くのジョブを効果的に実行するには、多くの URL の例を参照してください。
urlとcssStringのみが必須であり、他のオプションはすべてオプションです。 url経由で見つかった HTML ファイルにはスタイルが設定されていることが想定されることに注意してください。 penthouseスタイルを挿入せず、単にcssString (またはcss ) を使用して重要な CSS をプルーニングします。
| 名前 | タイプ | デフォルト | 説明 |
|---|---|---|---|
| URL | string | アクセス可能な URL。ローカル HTML ファイルにはfile:///プロトコルを使用します。 | |
| css文字列 | string | 重要なCSSを抽出する元のCSS | |
| css | string | ディスク上の元の CSS ファイルへのパス ( cssStringの代わりに使用する場合) | |
| 幅 | integer | 1300 | クリティカルビューポートの幅 |
| 身長 | integer | 900 | クリティカルビューポートの高さ |
| スクリーンショット | object | スクリーンショットの構成 (デフォルトでは使用されません)。スクリーンショットの例を参照してください | |
| より大きなメディアクエリを保持 | boolean | false | 重要なビューポートよりも大きい幅/高さの値についてもメディア クエリを維持します。 |
| 力を含める | array | [] | クリティカル ビューポートに表示されない場合でも、クリティカル CSS に保持する CSS セレクターの配列。文字列または正規表現 (fe ['.keepMeEvenIfNotSeenInDom', /^.button/] ) |
| 強制的に除外する | array | [] | クリティカル ビューポートに表示される場合でも、クリティカル CSS で削除する CSS セレクターの配列。文字列または正規表現 (fe ['.doNotKeepMeEvenIfNotSeenInDom', /^.button/] ) |
| 削除するプロパティ | array | ['(.*)transition(.*)', 'cursor', 'pointer-events', '(-webkit-)?tap-highlight-color', '(.*)user-select'] ] | 重要な CSS から除外する CSS プロパティ |
| タイムアウト | integer | 30000 | MS;この時間が経過すると重要な CSS 生成を中止します |
| 人形遣い | object | 人形遣いの設定。カスタム Puppeteer ブラウザの例を参照してください | |
| ページロードスキップタイムアウト | integer | 0 | MS;この時間が経過したらページ読み込みの待機を停止します (ページ読み込みイベントが信頼できない場合のサイトの場合) |
| renderWaitTime | integer | 100 | MS;ページの読み込み後、重要な CSS 抽出が開始されるまでの待機時間 (スクリーンショットが使用されている場合は、その「前」も撮影されます) |
| blockJSRequests | boolean | true | JS をロードするには false に設定します (非推奨) |
| maxEmbeddedBase64Length | integer | 1000 | キャラクター。これより大きいインライン Base64 エンコードされたリソースを削除します |
| maxElementsToCheckPerSelector | integer | undefined | CSS セレクターごとに検査する要素の数を制限するように指定して、実行時間を短縮できます。 |
| ユーザーエージェント | string | 'Penthouse Critical Path CSS Generator' | ページをロードするときにどのユーザー エージェント文字列を指定するか |
| カスタムページヘッダー | object | URL のリクエストとともに送信される追加の http ヘッダーを設定します。 | |
| クッキー | array | [] | 各 Cookie の形式については、Puppeteer setCookie のドキュメントを参照してください。 |
| 厳しい | boolean | false | Penthouse が元の CSS の解析エラーをスローするようにします。従来のオプションです。推奨されません。 |
| allowedResponseCode | number|regex|function | サーバー応答コードがこの値と一致しない場合は、Penthouse を停止させます。 numberとregex型は、response.status() に対してテストされます。 functionも使用でき、引数として Response を取得します。関数はbooleanを返す必要があります。 |
ロギングは、 penthouse名前空間のdebugモジュールを介して行われます。ロギングの詳細については、ドキュメントを参照してください。
# Basic verbose logging for all components
env DEBUG= " penthouse,penthouse:* " node script.js不足している依存関係をインストールして、ヘッドレス Chrome を実行できるようにします。
sudo apt-get install libnss3
dist に応じて、deps のさらに長いリストが必要になる可能性があります。この回答を参照してください
良い最初のステップは、ホストされたクリティカル パス CSS ジェネレーターで URL + CSS をテストし、渡した入力 (CSS + URL) に問題があるのか、ローカル設定に問題があるのかを判断することです: https://jonassebastianohlsson.com /criticalpathcssgenerator
重要な CSS を適用した後にスタイルが設定されていないコンテンツが点滅して表示される場合は、何かが間違っています。以下は、最も一般的な原因と、それに関連する一般的なアドバイスです。
一般に、重要な CSS でスタイル設定するすべての要素がページの HTML に表示される (表示される) ことを確認する必要があります (JavaScript は無効になっています)。ページの最初のレンダリング (高速化に役立つ 1 つの重要な CSS) は、JS が読み込まれる前に行われます。そのため、Penthouse は JavaScript を無効にして実行されます。したがって、HTML が本質的に空である場合、または実際のコンテンツが読み込みスピナーなどの前に隠されている場合は、重要な CSS を使用することでパフォーマンス上の利点を得る前に、これに対処する必要があります。
HTML に問題はないが、ログインしているユーザー、サードパーティの広告などによって異なる場合は、ペントハウスが認識しない場合でも、 forceIncludeパラメーターを使用して、重要な CSS に特定の追加スタイルを強制的に残すことができます。重要な CSS 生成中にページ上で。
この問題は、DOM の早い段階で要素が表示されているが、(絶対位置または変換を使用して) 重要なビューポートの外に移動するようにスタイルが適用されている場合に発生する可能性があります。 Penthouse は絶対位置と変換値を調べず、要素がクリティカル ビューポートの一部ではないとみなします。そのため、Penthouse はそのスタイルがクリティカルであるとはみなしません (そのため、クリティカル CSS が使用されている場合はスタイルのない要素が表示されます)。解決策: 本当に DOM の早い段階でこのオブジェクトを表示する必要があるかどうかを検討してください。あるいは、 forceIncludeプロパティを使用して、それを「非表示」/移動するスタイルが重要な CSS に残されていることを確認してください。
変換後の → などの特殊文字に問題がありますか? CSS で正しい 16 進形式を使用していることを確認してください。この形式は、「→」 .charCodeAt(0).toString(16)と入力することで、ブラウザ コンソールからいつでも取得できます (この矢印グリフの答えは2192です)。 CSS で 16 進形式を使用する場合は、次のようにバックスラッシュを先頭に付ける必要があります: 2192 (fe content: '2192'; )
