クリティカルパスCSSジェネレーター

ネットワークとウェブ

無料
ダウンロード/インストールは不要です
登録不要

https://www.corewebvitals.io/tools/critical-css-generator

これは指定された URL を分析し、“フォルダの上に” HTML レンダリングを表示するために必要な CSS を連結します。つまり、“重要なCSSまたは重要なCSSパス'#8220;。

良いツールです。仕事それはなくてはならないものです。しかも、既に圧縮されたCSSバージョンを直接返します。

You しなければならない then incorporate this code into the head of your page(s), either manually, or with a dedicated plugin, or any cache or optimizer plugin.

これにより、外部の CSS ファイルを読み込むことなく、最初に表示される領域の上部をより速くレンダリングできるようになります。

これはあなたのGoogle指標を向上させますか？
一度限りの訪問者の体験を向上させるか：可能性が高い
リピーターのエクスペリエンスは向上しますか？いいえ（このCSSを追加すると、一度だけ読み込まれる外部ファイルに追加するのではなく、このCSSが追加されるすべてのページの重量が増加するため）。

ヒントその1： サーバーまたはプラグインのキャッシュをクリアする

ヒントその2： 最適化ルートに進む場合、最も適切な CSS を取得するために、サイト内の著しく異なるページグループごとにこのトリックを 1 回実行する価値があります。各グループはおそらく非常に異なる CSS を使用しています (例: フォーラムページ、通常の投稿、カスタム投稿タイプなど)。

ヒントその3： このCSSは純粋に静的なコード（意図的なもの）であるため、ページのCSSに大きな変更を加えるたびに更新する必要があります。

分野： ウェブパフォーマンス、ウェブ開発、SEO、WordPress開発。

Penthouseの無料代替ソフト、WP Rocket。

Critical Path CSSジェネレーターとPenthouseおよびWP Rocketとの比較
クリティカルパスCSSジェネレーター	ペントハウス	WPロケット
形態と用途：これはCore Web Vitalsが提供するオンラインジェネレーターです。URLを入力し、モバイルとデスクトップのビューポートサイズを設定すると、タイトル直下のheadタグ内のstyleタグに貼り付ける重要なCSSが生成されます。また、元のスタイルシートを遅延させる3つの方法も提供されています。	形態と用途： Penthouseは、元祖クリティカルパスCSSジェネレーターとして知られるNodeライブラリです。URLとCSS文字列またはファイルを指定して呼び出すと、クリティカルCSSが返されます。オプションには、ビューポートの幅と高さ（デフォルトは1300×900）、forceInclude、forceExclude、タイムアウトなどがあります。	形態と用途：これは有料のWordPressキャッシュプラグインです。「ファイル最適化」→「CSS配信の最適化」で「未使用CSSの削除」が有効になっていると、プラグインが生成されたCSSを自動的に挿入します。
CSSの生成方法：このツールは、カスタムNodeプラットフォーム上のChromeベースのブラウザでページを読み込み、複数のビューポートをチェックし、表示領域をレンダリングするスタイルシート部分を見つけ出し、それらをクリーンアップして最小化します。	CSSの生成方法：これはPuppeteerを介してヘッドレスChromiumを駆動し、複数のジョブが1つのブラウザインスタンスを共有できる。	CSSの生成方法： WP RocketはページURLを外部APIに送信し、APIがページにアクセスして使用されているCSSを生成します。生成されたCSSはgzip圧縮ファイルとして保存され、タイトルタグの後にIDがwpr-usedcssのスタイル要素として挿入されます。このCSSは30日ごとに再生成されます。
自動化と保守：出力は手動で貼り付けられます。このツールはベータ版であり、失敗した場合は5分後に再度試すようページに表示されています。	自動化と保守：例えばビルドステップ内でスクリプトを作成し、結果をファイルに書き込むことができます。	自動化と保守：キャッシュされていないページにアクセスした際に生成が開始されます。失敗した場合は、待ち時間を徐々に増やしながら最大5回まで再試行されます。
	要件： Node.js（npmまたはyarnを使用）と、Puppeteerを介したヘッドレスChromeが必要です。Linuxでは、libnss3などのシステムライブラリをインストールする必要がある場合があります。	要件：一般公開されているサイト、正常に動作するWP-Cron、およびプラグインのボットユーザーエージェントを許可するサーバーまたはファイアウォールが必要です。.htaccess認証の背後では動作せず、Cloudflare Bot Fight Modeを無効にする必要があります。
ライセンスと費用：そのページには、無料のオンラインツールだと記載されており、使用制限は明記されていない。	ライセンスと費用：このコードはMITライセンスの下で提供されています。	ライセンスと費用：有料プランは年間契約で、サイト数（1、3、50）に応じて料金が変動します。14日間の無料トライアル期間は、解約しない限り終了時に自動的に課金されます。

取り上げるトピック： クリティカルパス、CSSジェネレーター、URL分析、ミニファイされたCSS、ファーストビュー、HTMLレンダリング、最適化、パフォーマンス指標、ユーザーエクスペリエンス、サーバーキャッシュ、プラグイン統合、静的コード、Webパフォーマンス、ページレンダリング、外部CSS、サイト最適化、レスポンシブデザイン、ISO/IEC 25010、ISO/IEC 9126、ISO 9241、ISO/IEC 27001、およびISO 8601。