WP Rocket 3.11 –新しい未使用のCSSの削除を開始

WP Rocketでは、一貫して製品をより強力でシンプルにすることに取り組んでいます。 Rocketeersに、パフォーマンスとシンプルさのためにこれまでで最高のプラグインを提供したいと考えています。そして、それを改善することを決してやめません。

また、どの最適化がサイトのパフォーマンスに影響を与える可能性があり、どの最適化に対処するのが難しいかについてもわかっています。 未使用のCSSを削除することもその1つです。 未使用のCSSは、読み込み時間と、最大のコンテンツフルペイントや最初のコンテンツフルペイントなどの重要なパフォーマンスメトリックに大きな影響を与える可能性があります。 CSSを削除または削減することで、PageSpeed Insightsのスコアを劇的に改善し、サイトを高速化する機会が得られます。

そのため、WP Rocket 3.11は、パフォーマンスの目標をより簡単に達成するのに役立つ、まったく新しい未使用のCSSの削除機能に焦点を当てています。

読み続けて、パフォーマンス結果にとって改善された機能が何を意味するかを調べてください。 WP Rocket 3.11がどのようにサイトの速度をさらに向上させるかを学びます。そして、さらに多くのことがあります！

WPRocket3.11の新機能

WP Rocket 3.11は、可用性、パフォーマンス、互換性の3つの角度から未使用のCSSの改良を削除することに焦点を当てています。 新しいRemoveUnusedCSSは今のところベータ版のままですが、すでにタイムラインがあります。記事の最後まで読んで詳細を確認してください。

新しいメジャーリリースをダウンロードすると、次のメリットが得られます。

• 可用性の向上–未使用のCSSの削除には、CSS配信を最適化するときにサービスがダウンするのを防ぐための非同期手法が付属しています。 結果として、UIにもわずかに異なるものがあります。
  
• パフォーマンスの向上–この新しいリリースでは、未使用のCSSを削除する際のフォントのプリロード機能の処理方法が大幅に変更されています。 以前に未使用のCSSを削除を使用したかどうかに関係なく、スコアにプラスの影響が見られるはずです。

• 互換性の向上–未使用のCSSバグの削除の可能性と、それらの修正にかかる時間について心配している場合は、これが最適です。

ビデオを見るか、次のセクションにジャンプして、変更点と、それぞれを活用してサイトのパフォーマンスを最適化する方法について詳しく知ることができます。

可用性の向上とは

WP Rocket 3.11には、ゼロから再構築された未使用のCSSの削除が付属しています。 なんで？ 共感と謙虚さが私たちのコアバリューの2つであり、私たちはそれらに固執しているからです。

WP Rocket 3.9で未使用のCSSの削除を開始して以来、まだベータモードを取り除くことができていません。 機能自体とその機能に満足していませんでした。 可用性は良くなく、サービスはしばしばダウンしていました。 そのため、機能を再構築し、同期方式から非同期方式に切り替えることにしました。 非同期モードでは、ページがキャッシュされ、API呼び出しが行われ、60秒後に使用済みCSSが生成されます。

この方法論の切り替えは、次の2つの理由でゲームチェンジャーです。

1. 可用性が向上するというメリットがあります。 つまり、WP Rocketが使用済みCSSを生成しようとしたときに、スタックすることはもうありません。 60秒ごとに100個のURLのUsedCSSを生成します。

2. 非同期方式は、同期方式を使用する場合には考えられなかった多くの新しい拡張機能の可能性を開きます。 これで、API呼び出しに依存して、使用済みのCSSを処理すると同時に発生する新しい強力な機能に取り組むことができるようになります。 新しいRemoveUnusedCSSを、WPRocketの将来のスニークピークと考えてください。

方法論の切り替えは、CSS最適化プロセスがユーザーインターフェイスに表示される方法にも影響を与えます。

WP Rocket 3.10までは、[未使用のCSSを削除]オプションを使用すると、CSSプロセスがどのように進行していたかがわかります。

CSSプロセス中、CSSプロセスが完全に完了するまで、PageSpeedInsightsの潜在的な改善を追跡することはできませんでした。 さらに、CSSの最適化には数時間かかる場合がありますが、サーバーが過負荷になっているため、それでも機能しません。 これらは、顧客がパフォーマンスを向上させるのを妨げるだけでなく、私たちが提供したい製品に値しない重大な問題でした。 そのため、私たちはそれらに対処するために一生懸命取り組みました。

まず、非同期の方法論と新しいサーバーインフラストラクチャにより、過負荷が防止され、過去に直面した問題が大幅に軽減されます。 ホームページが処理されると（90秒カウント）、CSS最適化プロセスが残りのページに対してバッチで（60秒ごとに）実行されます。 これは、パフォーマンスの向上を測定するために、プロセスが完全に完了するまで待つ必要がないことを意味します。 60秒ごとに、進行中のCSS最適化の恩恵を受け、PageSpeedInsights監査にすぐに反映されます。

この変更をこれまで以上に簡単にしているのは、WPRocket3.11にあるカウントダウンタイマーです。

[未使用のCSSを削除]オプションを有効にすると、ページの上部に、機能がホームページを処理するのにかかる時間を示すタイマーが表示されます。

ホームページが完成すると、サイト全体で行われている未使用のCSSの削除プロセスに関する新しいメッセージが表示されます。

キャッシュプリロードをまだ有効にしていない場合は、オプションを有効にすることを推奨するメッセージが表示されます。

以前のバージョンと同様に、[プリロードのアクティブ化]および[サイトマップベースのキャッシュプリロードのアクティブ化]オプションをオンにすると、ユーザーがページにアクセスして使用済みCSSを生成するのを待つ必要がなくなります。

これにより、Webサイト全体で使用されるCSSの作成が高速化されます。

未使用のCSSの削除とキャッシュのプリロードを一緒に使用することを強くお勧めします。これには、次の2つの相関する利点があります。

1. CSSのサイズを大幅に縮小します。
2. その結果、PageSpeed Insightsのスコアと、CoreWebVitalsの成績が向上します。

最も人気のあるページビルダーのいくつかでいくつかのテストを実行しました。 新しい未使用のCSS機能の削除を有効にし、改善点を追跡しました。 ご覧のとおり、CSSの節約は非常に大きく、全体的なパフォーマンスに影響を与えます。

CSSの保存は、それだけのためではありません。 このような機能強化により、パフォーマンスの結果がどのように向上するかがわかります。

ElementorとAstraを使用してテストサイトを構築しました。 WP Rocketをアクティブにし、LazyLoadを有効にしました。 最初のPageSpeedInsightsテストを実行し、67の成績を取得しました。

次に、遅延JS機能を有効にした後、別のテストを実行しました。 全体的なパフォーマンスグレードは大幅に向上しましたが、スコアは緑色にならず、Lighthouseメトリックの一部も向上しませんでした。

最後に、未使用のCSSの削除を有効にして、3番目のテストを実行しました。 PageSpeed Insightsのスコアは94グレードで、FirstContentfulPaintとLargestContentfulPaintもグリーンスコアを獲得しました。

パフォーマンスの新機能

この新しいメジャーリリースでは、フォントのプリロード機能の動作も変更されています。 WP Rocket 3.10まで、[未使用のCSSの削除]がオンの場合、プラグインは[フォントのプリロード]タブに含まれる情報を無視していました。

今、重要な変更があります。 [未使用のCSSの削除]オプションをアクティブにして使用済みのCSSを生成すると、WP Rocketはすべてのフォントを自動的に識別し、それらを自動的にプリロードします。 なんで？ 私たちのテストによると、サイトはより良いPageSpeedInsightsスコアを取得できるためです。

テストの結果を見て、[フォントのプリロード]オプションのおかげで、全体的なパフォーマンスグレードと特定のメトリックがどのように向上するかを確認してください。

シナリオ＃1-プリロードされたフォントなしでアクティブ化された未使用のCSSを削除する

シナリオ＃2 –プリロードされたフォントでアクティブ化された未使用のCSSを削除する

互換性の向上に伴うもの

このメジャーリリースは、新しいUIを提供し、未使用のCSSを削除するための可用性を向上させることだけを目的としたものではありません。 以前の未使用のCSSの削除機能を試し、問題やバグに遭遇した場合は、WPRocket3.11の方が互換性と精度が優れていることを知っておく必要があります。

平易な英語では、 WP Rocket 3.11は既知の未使用のCSSの削除の問題の90％を自動的に修正します。 残りと新しいものは、マイナーなWPロケットバージョンを必要とせずに簡単に修正できます。 それは大きな前進ですよね？

ベータ版はどのくらい続きますか？

未使用のCSSベータ版を削除するとどうなるのか疑問に思われるかもしれません。 すぐに言いました：サーバーをフルスケールでチェックするために、3〜4週間それを保持します。 私たちの目標は、95％のケースで、[未使用のCSSを削除]オプションを問題なく機能させることです。 これは非常に強力な機能であるため、近い将来、デフォルトで未使用のCSSの削除を有効にすることを目指しています。

もちろん、私たちはあなたをカバーしています。 Rocketeerであるため、ベータ版を削除するとメールが届きます。

まとめ

WP Rocket 3.11には、強力な新ブランドの未使用CSSの削除機能が付属しており、修正に時間がかかるバグや問題を心配することなく、CSS配信を最適化できます。

新しいRemoveUnusedCSSとFontPreloadのおかげで、サイトの速度が向上し、Lighthouseのパフォーマンスメトリックが最適化されます。何も心配する必要はありません。

このメジャーリリースで行われた変更のおかげで、パフォーマンスの最適化をより簡単かつ迅速にする新しい驚くべき機能を開発することが可能になります。 WPロケットの将来がどうなるかを見る準備はできていますか？