WP Rocket SaaS: 舞台裏

公開: 2024-09-12

この技術記事では、NodeJS、Puppeteer、および BullMQ を使用して、1 分あたり 15,000 を超える Web ページを処理できる Web クローラーの開発と最適化について詳しく説明します。未使用の CSS の削除 (RUCSS) 機能がどのように機能し、不必要な CSS を削除し、読み込み時間を改善し、主要なパフォーマンス指標を向上させることによって Web パフォーマンスを向上させるのかについて説明します。また、リソース収集に Puppeteer を活用し、JavaScript ライブラリをカスタマイズし、BullMQ を使用してキューシステムを実装することで、非効率な処理や安定性の問題などの初期の課題にどのように対処したかについても説明します。最後に、高品質の基準を維持し、迅速なイノベーションと効率的な顧客サポートを可能にすることを目的としたオペレーショナルエクセレンスをどのように達成したかについて概説します。

RUCSSとは何ですか？

未使用の CSS の削除 (RUCSS) 機能は、Web ページで使用されていないすべての CSS とスタイルシートを削除し、各ページに必要な CSS のみを保持するように設計されています。最適化が適用されると、Web サイトはユーザーがリクエストした特定のページに必要な CSS のみを提供するようになり、ページの読み込みが大幅に速くなります。

この最適化により、配信される CSS のサイズが平均 76% 削減されました。

RUCSS の利点

ページサイズの縮小: Web ページ全体のサイズを最小限に抑えます。
HTTP リクエストの削減: ロードする必要がある CSS スタイルシートの数を減らします。
読み込み時間の短縮: ページの読み込み速度が向上します。
強化された Core Web Vitals : Largest Contentful Paint (LCP)、First Contentful Paint (FCP)、Cumulative Layout Shift (CLS) などの主要なパフォーマンス指標を向上させます。
レンダリングをブロックする CSS の除去: CSS によるページのレンダリングの遅延を防ぎます。

未使用の CSS の特定: サージカルストライク

未使用の CSS を削除するプロセスは非常に複雑です。削除するすべての CSS ルールについて、そのページでそのルールが必要ないことを確認する必要があります。そうしないと、レイアウトが壊れる可能性があります。未使用の CSS が適切に識別されるようにするには、多くの要素を考慮する必要があります。

JavaScript インタラクション: JavaScript は DOM と CSS を動的に変更します。たとえば、ボタンをクリックした後にポップアップが表示され、新しい DOM 要素と CSS ルールが導入される場合があります。これらのインタラクションの処理は、使用されている CSS を正確に識別するために重要であり、さらに多くのスライダー、オフキャンバスメニュー、ギャラリーがあります。
CSS と HTML のバリエーション: WordPress テーマとプラグインには、CSS ルールの無限のバリエーションが導入されています。ネストされた CSS、エッジケース、さらには構文エラーを処理することは不可欠です。未使用の CSS を効果的に特定して削除するには、正確な HTML 解析が必要です。
ビューポートサイズ: 一部の CSS スタイルは、画面サイズの特定の条件下で適用されます。 CSS がモバイルユーザーとデスクトップユーザーに正しく提供されることを保証するために、さまざまな画面サイズに使用される CSS が提供され、訪問ごとに関連する CSS のみが提供されます。さらに、特定の最適化ルールがレスポンシブ CSS スタイルに適用されます。

SaaS ソリューションとしての RUCSS

ページリソースの処理と使用される CSS の生成は、リソースを大量に消費します。これらのタスクを顧客の Web サイトで直接実行すると速度が低下する可能性があり、すべてのサーバーやホスティングで実行できるとは限りません。したがって、未使用の CSS の削除など、WP Rocket の最も高度な機能の一部は、当社の SaaS によって強化されています。これらの最適化は、WP Rocket プラグインからのリクエストに応じてサーバー上で実行され、結果は Web サイトに自動的に適用されます。このアプローチには、お客様にとって次のような大きなメリットがあります。

リソースを大量に消費する最適化を実行し、ユーザーのサーバーの負荷を軽減します。
機能強化をできるだけ早く提供し、フィードバックに迅速に対処します。
サポートチケットを待たずに、問題やエラーを積極的に観察して修正します。
クライアント側の更新を行わなくても、すべてのユーザーが最新バージョンの恩恵を受けられるようにします。
WP Rocket プラグインを更新することなく、迅速に反復して改善を展開します。

舞台裏ではどのように見えるのでしょうか?

WP Rocket SaaS は、毎分最大 20,000 ページにアクセスして最適化し、CSS とスクロールせずに見える範囲の画像を処理しています。そのために、私たちは常に約 40 の異なるサーバー間で数千の Web ブラウザを動作させ、すべてのユーザーリクエストを 2 分以内に処理します。これを達成するために、私たちのチームは NodeJS、Django、Redis、CockroachDB、Kubernetes などの最先端のテクノロジーを活用し、group.One チームで運用しています。

主要な技術的課題

1. ページリソースの収集

私たちは、ヘッドレス Chrome または Chromium ブラウザを制御するための高レベル API を提供するノードライブラリである Puppeteer を広く使用しています。このツールは、実際のユーザーと同じように Web ページをレンダリングし、すべての動的要素を確実にキャプチャできるため、リソース収集戦略に不可欠です。これは、ビューポートサイズの制御、リクエストのインターセプトなど、プロセスを最適化するために利用する多くの強力な機能を提供します。

2. ページリソースの処理

WordPress のテーマとプラグインはさまざまな CSS と JavaScript を利用しているため、これらのファイルを処理するための堅牢なソリューションが必要でした。

Webpack、PostCSS、CleanCSS など、ページリソースを処理するための多くの方法をテストした後、最終的に、特定の要件により適した独自のカスタマイズされた JavaScript ライブラリをフォークして維持することにしました。これには、すべてのユーザーに対して最適化を確実に実行できるようにするための、エッジケース、ネストされた CSS ルール、多数の WordPress テーマやプラグインで見られる構文問題の処理が含まれます。

3. チームの専門知識による微調整

CSS の処理は非常に難しい場合があり、プロセスに十分な注意を払わないとページレイアウトが崩れる危険性が高くなります。私たちのチームは、人気の WordPress テーマとページビルダーに関する広範な知識を持っているだけでなく、最新の WordPress トレンドとの互換性について何十万人ものユーザーからのフィードバックを常に受けています。そのため、私たちはチームメイトが SaaS の CSS 処理ルールをリアルタイムで直接更新し、最適化を継続的に適応させ、互換性を毎日高めるための動的なセーフリストシステムを開発しました。

4. 1 分間に数千ページのフローを管理する

1 分あたり 15,000 の Web ページのフローを処理するために、BullMQ を使用してキューシステムを実装しました。このシステムは以下を提供します:

非同期処理:最適化プロセスをプラグインから非同期バックエンドにオフロードします。
負荷分散と同時実行管理: タスクを複数のサーバーに分散し、SaaS が多数の URL を効率的に処理し、簡単に拡張できるようにします。
信頼性と耐障害性: 送信されたすべてのタスクとその結果は、利用可能になると保存されます。これにより、サーバーの 1 つに障害が発生した場合、またはユーザーの Web サイトが結果をすぐに取得できない場合の回復力が提供されます。
優先順位付け: BullMQ キューを使用してタスクに優先順位を付け、より重要なタスクが最初に処理されるようにすることができます。たとえば、ユーザーがホームページの改善点をすぐに確認し、Pagespeed ですぐにテストできるように、ホームページの最適化が優先されます。

優れた運用性

SaaS 用のスケーラブルで信頼性の高いシステムを構築することは、顧客の使いやすさと効率性、そしてユーザー数の増加とページ処理リクエストの量の増加に対処するために不可欠です。ここでは、このような優れた成果を達成するための手順を詳しく説明します。

1. スケーラブルなアーキテクチャ

WP Rocket は、世界中の何百万もの Web サイトで常に使用されています。したがって、当社の SaaS は常に利用可能であり、期待どおりに動作する必要があります。このサービスは、さまざまな地域にある 40 台以上の物理サーバーでホストされています。これらは Kubernetes と連携して、コンテナのライフサイクルのデプロイ、スケーリング、管理を容易にします。当社は、liveness プローブ、ローリングアップデート、自動スケーリングなどの強力な機能を利用して、サービスに復元力をもたらし、あらゆる状況で稼働時間を維持します。さらに、カスタムゲートウェイサービスはジョブ管理を実行し、API セキュリティ (レート制限、認証など) を強制します。

2. 監視と警告

これらすべてのサービスとサーバーは、サービスの安定性を確保し、ユーザーに最高のパフォーマンスを提供するために、Prometheus と Grafana を介した技術的メトリックだけでなく、機能的メトリックでも常に監視および観察されます。詳細なモニタリングにより、ジョブの所要時間を短縮し、クラス最高の最適化効率を維持しながら、成功率を高く保つことができます。 Prometheus や Metabase などのツールからのアラートにより、何かが期待どおりに動作しない場合にリアルタイムで対応できます。

3. 顧客を支援するための可観測性

当社は、お客様が SaaS を使いやすいものにするよう懸命に取り組んでいますが、ファイアウォール、セキュリティルール、または競合するプラグインやテーマが多数ある WordPress Web サイトなど、非常に複雑な設定では問題が発生する可能性があります。 SaaS アプローチのおかげで、当社のサポートチームには、特定のユーザーに関連するデータにアクセスし、最適化ジョブと結果を観察するための Metabase を介した内部ツールが装備されているため、考えられる問題を迅速に特定することができます。その後、PostMan と Metabase を使用して、繰り返し、調整、微調整を行い、リアルタイムのフィードバックを得ることができます。その結果、問題を抱えている顧客を効率的に支援し、SaaS 最適化ルールを直接調整してユーザーのロックを解除することもできます。

4. 自動テストと継続的インテグレーション

エンジニアにとって、大幅な納期を維持しながら高品質の基準を維持することは課題となる場合があります。私たちは、コード変更ごとに信頼性の高い自動化を行うことで、この問題を解決します。自動テストから運用環境へのワンボタン展開まで、ミラーリング、シャドウリリースメカニズム、プログレッシブリリースロールアウトも活用しています。これらすべての強力なアプローチにより、当社のエンジニアリングチームはサービスの品質を危険にさらすことなく成長し、革新を続けることができます。このほとんどは自動化されているため、私たちはそれについて考える必要さえなくなり、ユーザーにとって最適な機能を構築するという重要なことに集中できます。

まとめ

要約すると、NodeJS、Puppeteer、および BullMQ を使用して Web クローラーを開発および最適化することで、1 分あたり 15,000 を超える Web ページを処理するための非常に効率的でスケーラブルなソリューションが実現しました。初期の課題に対処し、高度なツールと方法論を活用することで、未使用 CSS の削除 (RUCSS) 機能を通じて Web パフォーマンスを大幅に向上させる堅牢なシステムを作成しました。継続的な統合、自動テスト、およびスケーラビリティと信頼性への重点により、当社のサービスは一流であり続け、ユーザーに読み込み時間の短縮と全体的な Web エクスペリエンスの向上を提供します。