OxygenBuilderバックエンドローディング時間テスト

この記事では、OxygenBuilderのバックエンドの読み込み時間を見ていきます。 多くの人がこれをこのWordPressPageBuilderの大きな欠点だと言っているので、いくつかの異なるデバイスでテストすることにしました。 何が発見されたか見てみましょう。

まず、同じデバイス上の異なるブラウザを比較します。 次に、同じブラウザを使用してさまざまなデバイスを比較します。 これにより、どのデバイスがOxygen Builderを最も速くロードするかだけでなく、どのブラウザーがこのタスクに最適であるかを特定できるはずです。

この比較が非常に複雑になるため、さまざまなホスティング設定のテストを除外します。 また、安価なホスティングを使用している場合、WordPressWebサイトのフロントエンドとバックエンドの両方で読み込み時間が遅くなることはよく知られている事実です。 これが事実であるならば、それは完全にあなた次第です。 （ただし、将来的にはこれを再検討する可能性があります）。

被験者

私たちのテスト対象は、私たちの聴衆のために私たちが作成した比較的標準的な酸素ビルダーのウェブサイトです。 ページの初期パフォーマンス、サイズ、および追加の側面を見てみましょう。

このテストWebサイトは、2GBのRAMと標準設定を備えた専用のDOプレミアムサーバーでホストされています。 速度、コスト、サポートの面で推奨されるホストであるCloudwaysによって管理されています。 テストの時点では、サイトで追加の速度最適化は完了していませんでした。 インスタンスを起動してから、サーバー設定は変更されていません。

読む：WordPressホスティングのためのCloudwayの5つのサーバーの選択肢の内訳

補足：これは、開発サイトやトラフィックの少ないサイトに最適なサーバーオプションであり、起動時に簡単にスケールアップできます。 サインアップ時にCloudwaysの割引を受けるには、コードISOTROPICを使用して、3日間の無料トライアル（CCなし）を取得してください。

テストされたページは、Webサイトのホームページです。 テストの時点では、次のようになりました。

読み込まれたページの主な要素は、Oxygen Builderメニュー要素、カスタム検索バー、デモ投稿の簡単な投稿グリッド（最初のセクション）、WSForm Oxygen要素、およびリピーターを含むOxyExtrasカルーサルでした。 このリピーターには9つ以上の投稿があり、MetaBoxフィールドに基づいて数十の条件がありました。

このページは、deals.isotropic.coサブドメインDNSがCloudflareを介してプロキシされたため公開されました。

合計ページサイズは5.05MBでした。 これは主に、テスト時に最適化された画像を使用したことが原因でした。 これは初期段階の開発Webサイトであることを忘れないでください（公開する前に高速化することをお約束します）。 このタイプのWebサイトは、通常の開発環境をシミュレートするため、OxygenBuilderのバック速度と読み込み速度をテストするための最良の方法であると思います。

使用中のプラグインは次のとおりです。

*ここで証明されているように、実際に使用しているプラ​​グインを確認します:)。

Oxygen Builder 3.9 Beta 2を使用していたことに注意してください。WooCommerce要素もインストールされていますが、WooCommerce自体はこの時点ではインストールされていません。

開発者のレポートによると、このバージョンのOxygenは、以前のバージョンのほぼ2倍の速度でバックエンドにロードされました。

さらに、OxyExtras、WPGridbuilder、OxyMade、およびWSFormはすべて、ビルダーのバックエンドに要素を追加したことに注意してください。 スキン/ワークフローツールであるSwissKnifeとHydrogenPackもバックエンドにロードされています。

基本的に、このテスト対象は、OxygenBuilderを使用する多くのユーザーがロードの経験があるページです。 ビルダーとサードパーティのプラグインの両方からバックエンドに読み込まれるアドオン、拡張機能、スクリプトがいくつかあります。

最後に、私のWiFiをざっと見てみましょう。

このテストの実行方法

このテストは、ページのバックエンドで[editwithOxygen]をクリックしてOxygenBuilderを直接ロードすることによって管理されます。

ボタンを押すと、そこからタイマーがスタートします。 コグアイコンが停止し、ブラウザが完全に初期化されると、テストは停止します。

私はiPhoneストップウォッチを使用してこれを手動で計時しているため、これは完全に正確ではないことに注意してください。ただし、どのデバイスとブラウザーがこのプラグインを最も速くロードするかについての適切な概算が得られるはずです。 また、注目に値します。ページは以前にfontendにロードされていますが、バックエンドビルダーにアドミンとしてロードされたことはありません。 ビルダーにアクセスするには、deals.isotropic.coをロードし、トップバーに移動し、[編集]ページをクリックしてから、[酸素で編集]ボタンをクリックします。

このテストの目的は、スピードランではありません。 このプラグインのバックタイムとロード時間に関する真の実世界のデータを取得して、速度と効率に懸念が必要かどうかを確認することです。 実際の時間の数値を見る代わりに、デバイスとブラウザに関しては、これらの数値の違いを調べることを検討してください。

最後に、衝動買いを促す場合に備えて、Amazonリンク（アフィリエイト）を含めました。

ブラウザによる酸素ビルダーの読み込み時間

まず、MacMiniM1にインストールされているすべてのブラウザにロードしてみましょう。 デバイスごとにテストすると統計が再表示されますが、これは2020 M1 Mac Miniで、8GBのRAMを搭載し、BigSurV11.3.1を実行しています。 これが私の「デイリーデスクトップ」です。

まず、ブラウザのテストから始めて、酸素をロードするのに最も速いものを決定します。 さまざまなデバイスをテストするときにこのブラウザを使用します。

Safari V14.1、Chrome V95.0.4638.69、およびFirefoxV94をテストします。

• Firefoxは05.59秒で到着します。
• Chromeは17.52秒で到着します。
• Safariは6.20秒で到着します。

ここでは、Chromeが明らかに外れ値でした。 もう一度実行して、読み込みに問題がないかどうかを確認しました。2回目の読み込みには約16.5秒かかったので、平均は比較的正確な数値だと思います。

ここでのポイントは、Firefoxが最速のブラウザであるということです。 これは、公式のFacebookグループでしばらくの間議論されているトピックであるため、この経験的データが、このブラウザーを使用する必要があることを証明することを願っています。 個人的には、Firefoxは高品質のフロントエンド開発者ツールがたくさんあるので、Webサイトを開発するのに私のお気に入りのブラウザーです。 ただし、Chromeと比較すると、セキュリティとパフォーマンスの監査が不足しています。

そのブラウザをデバイステストに使用します。

ブラウザによる酸素ビルダーの読み込み時間

このテストでは、すべて同じWi-Fiネットワーク上のデバイスを使用し、同じバージョンのFirefoxを使用して、以前と同じページをロードします。 差別化要因は、デバイスとその背後にある検定統計量です。 こちらがラインナップです。

2020 Mac Mini（テスト済み）

• AppleM1チップ
• 16GB RAM

05.59秒で酸素をロードします。

2019 XPS 13 9370

• Intel i7-8550U
• 16GB RAM

11.54秒で酸素をロードします。

2020 iPad Air 10.9in MYFT2LL / A

• AppleA14チップ
• 4GBのRAM

11.96秒で酸素をロードします。

読む：iPad Proでウェブサイトを開発できますか？

2019 Dell Latitude 7400

• Intel i7 8655U
• 16GB RAM

16.19秒で酸素をロードします。

2020 Macbook Pro 13in

• Intel Core i5
• 16GB RAM
• インテルアイリスプラスグラフィックス6451536MB

9.66秒で酸素をロードします。

2021 Macbook Pro 16in

• AppleM1Maxチップ
• 64GB RAM

5.43秒で酸素をロードします。

テスト中は、すべてのデバイスがバッテリー充電器に接続されます。 Firefoxブラウザは唯一の開いているアプリ/プログラムです。 なぜ私がこれらすべてのデバイスにアクセスできるのか疑問に思われるかもしれません。 私はこれらの電子機器をすべて個人的に所有しているわけではありません。代わりに、地元の大学からそれらを借りることができます。

大きなポイント

まず、何度か述べたように、これは不完全なテストです。 ラボ環境では実行されませんでした。 動的データが少ないページはバックエンドビルダーでの読み込みが速くなり、動的データが多いページは読み込みが遅くなります。 画像、DOM要素、およびスクリプトについても同じです。

これらの番号を任意に使用することをお勧めします。 OxygenがX.XX秒で読み込まれると言う代わりに、数値を使用してブラウザとデバイスを比較します。

要点1：ブラウザの問題

Facebookが一貫して述べているように、FirefoxはOxygenBuilderをロードするための最速のブラウザーです。 私は個人的にFirebox開発者版を使用しています。

要点2：デバイスの問題

最速の2つのデバイスは、Appleシリコンを使用した最新のAppleデバイスです。 意味あり; これらのプロセッサは、市場に出回っている他のほとんどのプロセッサよりもはるかに高速です。 そして、彼らはそれほど高価ではありません。 ベースのM1MacMiniは600ドル以下の再生品で、M1MacbookAirは899ドルです。

要点2B：プロセッサはRAMよりも重要なようです

また、プロセッサが強力であるほど、バックエンドビルダーの読み込み時間が長くなるように見えます。 たとえば、64GBのRAMを搭載したラップトップは、16GBのRAMを搭載したラップトップと同様にロードされます。 プロセッサの能力が低下すると、ビルダーのロード時間も低下します。

Chromebookや統計情報の低い別のデバイスにビルダーを読み込もうとすると難しい場合があります。

最終的な考え

このテストの平均酸素バックエンド読み込み時間は、大量の動的データを含む、最適化されていない大きなページで約10秒でした。 さらに、カスタムのグローバルCSSの膨大なコレクションとともに、ページに独自の要素をロードするアドオンがいくつかありました。 これは私の本では非常に受け入れられます。 コラボレーションプラグインを使用してビルダーをリロードすることなく、CSSクラスとグローバルオプションを同期できるようになると、さらに受け入れやすくなります。

ほとんどのプロジェクトでOxygenを使用するWeb開発者として、ビルダーの速度が私に影響を与えることはありませんでしたが、最適なセットアップが何であるかを真剣に検討したいと思いました。

独自の比較番号がある場合は、下のコメントセクションに投稿してください。