ja.allworldrating.com
記事

WordPressでクリティカルパスCSSを作成する方法

WordPressCSSを理解する

話を始める前に、WordPressで通常のCSSがどのように機能するかを理解しましょう。

各WordPressテーマは、サイトのスタイル設定に必要なすべてのコードを含むstyle.cssで構成されています。テーマ開発者は、ブログ投稿、コメント、製品ページ、メンバーシップページ、フォームなどを含むすべてのWordPress機能をサポートする必要があります。インストールする他のプラグインも同様のcssスタイルシートを追加できます。

これにより、cssファイルが肥大化し、200kb以上のサイズになる可能性があります。

クリティカルパスCSSとは何ですか？

CSSファイルが大きくなるにつれて、ブラウザはそれらの大きなファイルをダウンロードし、解析し、レンダリングする必要があります。レンダリングブロッキングとも呼ばれます。また、最初の意味のあるレンダリングと最初の意味のあるレンダリングをインクリメントします。

クリティカルパスCSSは、すべてのWebページで上記のコンテンツをレンダリングするために必要なCSSです。名前が示すように、「重要な」CSSは、完全なCSSファイルをロードする前にブラウザーがすばやく描画およびレンダリングするのに役立ちます。

通常、クリティカルパスのcssはヘッダーに埋め込まれ、ソースcssファイルは使いやすさのために非同期またはフッターにロードされます。

クリティカルパスCSSが非常に重要なのはなぜですか？

Google PageSpeedInsightsやGTmetrixなどのツールから「css配信を最適化する」または「未使用のcssを延期する」という警告が表示されているはずです。

重要なCSSは、ページの読み込み時間とは何の関係もありません。読み込み時間の増減はありません。しかし、はるかに優れたユーザーエクスペリエンスを提供します。 Webページをすばやく「レンダリング」または「色付け」するのに役立ちます。

  • First Content Draw（FCP）を改善
  • First Significant Payment（FMP）を改善します
  • 未使用のCSSを削除します（技術的には削除しませんが、「有用な」CSSを優先します）

これは、重要なCSSがある場合とない場合の私のブログの2つのスクリーンショットです。

    • 「重要なCSSパスがない」セクションでわかるように、モバイルデバイスで役立つものをユーザーに表示するのに約5秒かかりました。ブラウザは、レンダリングを開始するために、cssファイルに追加のHTTPリクエストを作成し、ダウンロードして、解析する必要があります。ただし、重要なcssを使用する場合は、必要なすべてのcssがインラインである必要があり、ブラウザーはHTMLファイルを1秒以内にロードした直後にレンダリングを開始できます。

    WordPressで重要なCSSを作成するにはどうすればよいですか？

    WordPressで重要なCSSを生成する方法はいくつかあります。

    キャッシングプラグインの使用

    WP Rocketは、非常にうまく機能するプレミアムキャッシングプラグインです。

    すべてのサイトでWPRocketを使用する理由の1つは、重要なCSS生成自体です。ホームページ、投稿ページ、カテゴリページ、製品ページなどに個別にクリティカルCSSを生成し、埋め込みます。テーマや設定に変更があった場合、重要なCSSを復元します。

    ボタンを押すだけですべてを行うことができます。

    重要なCSSを生成できるその他のキャッシングプラグイン

    Swift PerformanceとLiteSpeed（LiteSpeed / OpenLiteSpeedサーバーが必要）は、クリティカルCSSを生成できる同様のプラグインです。これらのプラグインはどちらも、サーバーにクラウドとフルキャッシュが組み込まれています。

    Autoptimize + Free Critical CSSGeneratorの使用

    あなたのサイトのURLを入力することによって重要なCSSを提供するサードパーティのオンラインツールがあります。 pegasaasはとても素晴らしい無料ツールです。

    方法は次のとおりです。

    ステップ1。 https://pegasaas.com/critical-path-css-generator/にアクセスして、URLを入力します。生成された「クリティカルパスCSS」をコピーします。

    ステップ2 自動最適化設定（詳細設定を有効にする）の[CSSオプション]で、[CSSのインライン化と延期]をオンにして、コピーしたCSSを貼り付けます。

    長所：

    • 無料

    マイナス：

    • さまざまなページタイプ（例：ホームページ、投稿ページ、カテゴリページ、製品ページなど）に個別の重要なCSSはありません。
    • テーマ/設定の変更時に自動的に再構築しない

    WordPress自体が重要なCSSを生成できないのはなぜですか？

    お気づきかもしれませんが、cssクリティカルパスを作成すると、外部サービスが有効になります。では、なぜWordPress自体がそれを生成できないのでしょうか？

    クリティカルCSSの作成は、クリティカル（Googleによる）、クリティカルCSS、ペントハウスなどのオープンソースプロジェクトによって可能になります。これらのプロジェクトはすべて、PHPではなくNodeJSに基づいています。そのため、サーバーにNodeJSをインストールする必要があります。ほとんどの共有/管理されたホスティングプロバイダーは、いくつかの理由でこれを許可していません。

    興味深い記事