Gravity Forms と最適化プラグイン: パフォーマンス戦略 (2024)

テクニカル -

サム・エストック著2023 年 12 月 5 日発行

このウサギは毎回このレースに勝ちます！最も人気のある WordPress プラグインの最適化戦略のうち、どれだけが現在の状況におけるサーバー、ブラウザ、資産テクノロジーの状態と一致しているかを調べてみましょう。

あなたはそれが必要であることを知っています

Web サイトのパフォーマンスは、オンラインの視聴者に熱心にサービスを提供する人にとって重要な考慮事項であるため、Web サイトを管理するほとんどの人が多くの時間を費やす重要な要素の 1 つです。パフォーマンスは、ユーザーエクスペリエンス、SEO ランキング、コンバージョン、およびエンゲージメントとリーチを監視するために使用するその他の多くの主要な指標に直接影響し、最終的にはプロジェクトの大きな成功に影響します。

WordPress の分野で、パフォーマンスを重視するほとんどの人が行う一番の行動は、最適化プラグインを探すことであり、素晴らしい選択肢がたくさんあることに失望することはありません。

大勝利

最適化戦略のこの厄介な側面に入る前に、よく作られた最適化プラグインのほとんどが Web サイトにもたらす、紛れもなく優れた機能をすべて書き留めておくことが重要です。次のような優れた機能が得られます。

サーバーがオブジェクトキャッシュをサポートしている場合、オブジェクトキャッシュなどの高度なキャッシュアプローチを簡素化する戦略
CDN によるリソースのオフロード
画像の最適化
遅延読み込み
遅延読み込みを持たないスクリプトへの遅延読み込みの適用
Cloudflareの統合

などなど。

あなたが開発者である場合、これらの戦略を独自に実装した方が、これらのプラグインのいずれかを使用してそれらを実現するよりも利点があることがよくありますが、WordPress はすべての人向けに作られているため、これらの便利なプラグインが活躍し、Web サイト管理者であれば誰でも利用できます。これらの高度な機能をすべて簡単に有効にすることができます。

そうは言っても、何かを作ることを約束するプラグインを使用するときの傾向は次のとおりです。良くなったねすることですすべてのことに取り組む。そうですね、私たちはサイト上で複数の最適化プラグインが有効になっているケースをたくさん見てきました。なぜなら、1 つよりも 3 つの方が優れているはずですよね? (そんなことはしないでください。あらゆる種類の災難がもたらされるので、この作業に複数のツールが必要になるべきではありません)。

全てを潰す

さて、この記事の本題へ。これらのプラグインのほとんどの重要な機能は、「すべての CSS と JS を単一のファイルに縮小して結合する」のような設定で、通常、これによりトラクターがスーパーカーに変わるという約束が続きます。

この主張と戦略にはまだある程度の正当性がありますが、それは主に、サーバーおよびブラウザ環境でアセット配信に関連する機能がはるかに制限されていたこと、およびアセット自体があまり最適ではない方法で構築されていたことに関係しています。この戦略がもう必要ない理由を長所と短所の観点から検討し、最後に Gravity Forms 独自の組み込みアプローチの分析を行います。

1、2、3、HTTP です

私たちの URL は次で始まります: ハイパーテキスト転送プロトコル (HTTP) は、インターネット経由でデータを送信するために使用されるプロトコルであり、HTML ドキュメントなどのリソースの取得を可能にします。これは、メッセージがどのようにフォーマットされて送信されるか、また Web サーバーとブラウザがさまざまなコマンドにどのように応答するかを定義します。

HTTP/1 は 1996 年にリリースされ、その 1 年後に HTTP/1.1 が登場しました。HTTP/1.1 は基本的に今日まである程度まで存続していますが、これは時代を超えてあらゆる Web ベースのテクノロジーにおける驚くべき偉業です。このトピックに関して私たちが気にする主な制限は、ブラウザとサーバー間のリソースに対する複数のリクエストの処理が非効率であることです (原因は次のとおりです)。行頭ブロック）。したがって、1998 年のように 32 個の JavaScript ファイルを提供できるようになれば、これらの最適化プラグインが HTTP/1.1 で推進しているファイル結合戦略の恩恵を受けることは間違いありません。ちょっと待って！ HTTP は実際に長いスリープから復帰しました。

2015 年に HTTP/2 が公開され、上記の複数のリソース要求の問題の優れた最適化が実現されました (多重化機能1 つの TCP 接続を介して)、2022 年には HTTP/3 がリリースされ、この点でさらに大きなメリットが得られました (誰が1つ目）。ブラウザの観点から見ると、HTTP/2 または 3 対応のサーバーは、すべてのアセットファイルを 1 つの大きなファイルに結合することで得られる利点をほとんど無効にし、他の要因によっては、ある意味で悪影響を与える可能性があります。これらの説明に入る前に、一部のアセットのスマートバンドルは、これらのプロトコルに有益な効果をもたらす可能性があることに注意することが重要です。たとえば、クリティカルレンダリングパス, しかし、私たちが議論しているような画一的なプラグインでこれを実現するのは難しいことで知られています。

この記事の執筆時点では、ほとんどのサーバーが HTTP/2/3 のいずれかをサポートしており、サーバーがサポートしているかどうかを確認するのは簡単です。たとえば、次の簡単な方法を使用します。Chrome拡張機能。ブラウザのサポート率は 90% 半ばです。

邪魔しないでください: スクリプトの延期

HTTP/1.1 が初期読み込みパフォーマンスに影響を与えるブラウザへの同時リクエストの送信をブロックするのと同様に、CSS とほとんどの JavaScript はレンダリングブロックを行っており、ブラウザが読み込まれるまでページのレンダリングを続行できなくなります。これが、ずっと前にフッターにできる限り多くのスクリプトをロードすることが一般的になり、少なくとも非クリティカルな JS についてはこれを非常に簡単に軽減することが一般的になった理由です。

Gravity Forms やそのエコシステムのようなプラグインの場合、状況はさらに困難になります。プラグイン環境は、他の要素が混在する中でスクリプトが必要なときに確実に利用できるようにする必要がある複雑な環境であり、Gravity Forms の古いバージョンでは、このニーズに対応するためにスクリプトが読み込まれるまでレンダリングをブロックしていました。

それはすべて、Gravity Forms 2.5 で変わりました。遅延属性すべてのテーマ側スクリプトに適用されます。私たちにとっては少々難しい取り組みではありましたが、お客様にとってはパフォーマンスが向上するため、それだけの価値はありました。これにより、すべてのスクリプトがページレンダリングをブロックすることがなくなり、HTTP/2/3 機能と組み合わせることで、すべての JavaScript をそのようなモノリスにバンドルすることで得られる利点がさらに無効になりました。

多くのオプティマイザープラグインは、これをファイルの組み合わせに対する別のオプション (通常は「すべてのスクリプトを延期する」などの設定) として提供しています。問題が発生しない場合は、これを有効にすることをお勧めします。

ファイルの結合による悪影響

次に、すべてを組み合わせる戦略の欠点について説明します。

最初の大きな問題はブラウザのキャッシュです。 Gravity Forms の場合、すべての遅延ファイルにバージョン文字列を提供し、最新のバンドルではコードを着実に移行して、さらに進んで各ファイルのファイルハッシュをバージョン文字列として使用します。これが意味するのは、訪問者のブラウザは、実際に変更されるまで (またはキャッシュが消去されるまで) それらのファイルをキャッシュすることになります。

したがって、Gravity Forms を更新しても、スクリプトの 1 つだけが変更された場合でも、再訪問者はブラウザのキャッシュを更新するのは、すべてのスクリプトではなく、その 1 つのファイルのみになります。これは、すべての JavaScript ファイルを 1 つに結合すると、サイト上の何かを更新するたびに、再訪問者全員が提供している JavaScript 全体を再読み込みする必要があるという事実と比較すると、特に効率的です。特に多くのプラグインを使用して継続的に最新の状態を保つサイトの場合は、これが非効率であることがおわかりいただけると思いますが、これは常に良い習慣です。

これに加えて、現在のバンドルや WordPress エコシステム内の他の多くのバンドルでは、コード分割必要な場合にのみスクリプトを動的に挿入します。これらの最適化コンバイナーは、コード分割を使用するシステムに迷惑な問題を引き起こす可能性があり、通常はほとんどメリットがない場合でも、これらの最適化コンバイナーに対応できるようにシステムを継続的に適応させる必要がありました。

まとめ

最適化プラグインは WordPress エコシステムにとって大きな資産であり、Web サイトのキャッシュやその他の最適化を必要とするユーザーにパフォーマンスを迅速かつ簡単に提供する上で重要な役割を果たします。

すべての CSS/JavaScript アセットを結合する機能を実際に使用していて問題が発生していることに気付いた場合、または可能な限りあらゆる角度から Web サイトのパフォーマンスを分析したい場合は、上記の情報を考慮してください。 HTTP/2/3 を使用しており、Gravity Forms 2.5 以降を使用しており、他のスクリプトを延期している場合は、おそらく有効にする必要はありません。

また、Gravity Forms をアクティブにしたままプラグインを使用したい場合は、スクリプトや、すでに遅延/コード分割されているその他のプラグインを無効にすることで、パフォーマンスの低下は発生せずに、より安定して信頼性の高いプラグインを使用できるようになります。ボックス。

ブログで起こっていることの最新情報を入手したい場合は、Gravity Forms ニュースレターにサインアップしてください。