速度の比較: 超高速の Divi 5 ビジュアル ビルダーを探索する

Web デザイナーおよび開発者として、私たちはパフォーマンスがすべてであることを知っています。遅いページ ビルダーが変更を読み込んだり表示したりするのを待つと、クリエイティブ フローが中断され、生産性が低下する可能性があります。そのため、Divi 5 の主な目標の 1 つは、ビジュアル ビルダーの速度とパフォーマンスに革命を起こすことです。私たちは Divi のコア構造を深く掘り下げ、それを一から再構築して、超高速でより応答性の高いビルダーを作成しました。

この投稿では、Divi 5 を以前のバージョンより高速にする Visual Builder 内のパフォーマンスの改善について説明します。 Divi 5 Visual Builder のすべてが速度を重視して最適化されています。

では、これが Web デザインのワークフローにどのような影響を与えるのか、そしてなぜ低速のページ ビルダーには二度と戻りたくないのかを見てみましょう。

すべてを書き直す: Divi 5 は何が違うのか?

Divi 5 は単なる増分アップデートではありません。これは、Divi のコアテクノロジーを完全に書き直し、パフォーマンス、安定性、拡張性を重視して再考されたものです。この根本的な変更により、ビジュアル ビルダーが中核でどのように動作するかを再考することになり、ビジュアル ビルダーが大幅に高速化され、より強力になりました。

Divi 4 はすでに何百万もの Web サイトで強力なツールとして機能していましたが、そのアーキテクチャは 10 年以上前のものでした。私たちはそれを改善し、限界を押し広げてきましたが、ついに新しい基盤を構築する時が来ました。

技術的負債により、特に複雑なレイアウトを操作する場合に、読み込み時間の低下、再レンダリングの遅延、および不安定性が発生することがありました。これに対処するために、Divi 5 チームはフレームワーク全体を白紙の状態で再構築し、パフォーマンスと将来の拡張性を考慮して最適化しました。結果はそれ自体を物語っています。ビルダーのロードから編集、変更のプレビューに至るまで、Divi 5 ではすべてが高速に行われます。

Divi 5 アルファをダウンロード Divi 5 デモを試す Divi 5 のバグを報告する

1. ビジュアルビルダーの再レンダリング速度の向上

一日中ツールを使って作業する場合、スピードが重要になります。ほんのわずかな遅延でも時間の経過とともに増大します。 Divi の以前のバージョンでは、デザイナーは新しい要素を追加したりスタイルを調整したりするときに、ビジュアル ビルダーが応答するまで一瞬待つ必要があることがありました。これは、長いドキュメント (モジュールとカスタム スタイルで埋められた数十のセクションを含む) を扱う場合に特に顕著でした。

D4 (左) でスタイルがちらつくことに注目してください。ボタンを押すと、複製されたセクションのスタイルが完全に適用されるまでに数ミリ秒かかります。これは、セクションの複製が D5 (右) よりも遅いことに加えてです。

Divi 5では再レンダリング速度が大幅に向上し、ラグなく作業できるようになりました。新しいモジュールを追加したり、表示モードを切り替えたり、スタイルを調整したりすると、ビジュアル ビルダーは即座に応答します。このレベルの応答性は、特に多くの微調整が必​​要な複雑な設計に取り組む場合に大きな違いをもたらします。

しかし、ビルダーをこれほど高速にするために正確に何が変わったのでしょうか?

高速な再レンダリングを支えるテクノロジー

このレベルの改善を達成する唯一の方法は、ゼロから始めることでした。私たちは過去 10 年間の Divi 開発で学んだすべてを取り入れ、最新のテクノロジーを使用して新しいアプリケーションを作成し、長年にわたる技術的負債を排除しました。私たちはさまざまなやり取りを監査し、ボトルネックを特定することに時間を費やしました。私たちはそれを今も続けており、Divi 5はアップデートするたびに高速化しています。

ショートコードからの移行により、複雑なデザインをより効率的に実行できるようになりました。明日の投稿では、なぜショートコードフレームワークを廃止しなければならなかったのか、そして Divi 5 はどうなっているのかについて説明します。

次の比較ビデオで違いがわかりますか?これは、Divi 5 のもう 1 つの大きな改善を強調しています。プリセット編集時のパフォーマンスの向上です。 Divi 5 では、プリセットはクラスベースです。すべてのプリセット要素が同じクラスを共有するため、ビルダーで必要な再レンダリングが少なくなり、フロントエンドで必要な CSS も少なくなります。

2. ロード時間の短縮 (二重リロードがなくなりました)

Divi の古いバージョンの大きな問題点は、Visual Builder を起動する際の 2 回のリロードでした。これは、サードパーティのモジュールとプラグインが誤って動的データを Visual Builder のキャッシュに挿入したときに発生します。この間違いは非常に蔓延したため、2 回のリロードが一般的な問題点となりました。

Divi 5 は、初期状態から非常に高速であるため、キャッシュを必要とせずにこの問題を「修正」します。何もキャッシュしていないため、キャッシュが無効になる可能性はなく、2 度のリロードが再び発生することはありません。

ロード時間は全体的に改善されました。 Divi 4 と比較して、Divi 5 のロードがどのくらい速いかを確認してください。私のテストではロードが非常に速かったため、派手な新しいプリローダー アニメーションを見る機会さえありませんでした。

この改善は、大規模なプロジェクトに取り組んでいるデザイナーにとって特に顕著です。以前は、Visual Builder で大規模なプロジェクトを開くと、完全に読み込まれるまでに数秒かかることがありました。

3. すべてのインターフェースアニメーションを削除しました

Divi 5 の新しいインターフェースでの最も注目すべき変更点の 1 つは (最新の再設計を超えて)、すべてのアニメーションが削除されたことです。

以前のバージョンでは、ビルダーと対話するとき (新しいモジュールの追加や表示モードの切り替えなど)、アニメーションによって視覚的なフィードバックが提供されていました。これらのアニメーションは、ある程度の遊び心を加えましたが、特に低速のシステムでは、設計プロセスにわずかな遅延をもたらしました。

Divi 5 の設計哲学は異なります。インターフェイスはユーザーに役立つためのものであり、それ以上のものではありません。それは最小限です。邪魔にはなりません。それはあなたのデザインと競合しません。見た目のカッコよさは関係ありません。その UI/UX はスピードと効率に根ざしています。

Divi 4 が使用している微妙なアニメーション (フェードインアウト、スライドインアウトなど) に気づきましたか?これらにより、UI が不必要に遅くなり、応答性が低く感じられます。 Divi 5 では、スタイルよりもスピードを重視したアプローチを採用しました。ビルダーを高速化して応答性を高めるために、これらのアニメーションを削除しました。現在は完全に機能に重点が置かれており、ビルダーで実行するすべてのアクションができるだけ早く実行されるようになります。

Divi 5 は今後どこへ向かうのでしょうか?

パブリックアルファが正式に開始されました。まず最初に、ここ数か月間、ディビ 5 のパブリック アルファを公開するために熱心に取り組んできたので、ご辛抱いただきありがとうございました。それは簡単な仕事ではありませんでした。そして私たちの取り組みはまだ始まったばかりです。

Nick が木曜日に話し合ったように、私たちはバックログ内の既知のバグと、コミュニティの皆さんが現在見つけている多くのバグを修正するのに約 1 か月を費やします。 Divi 5 のパブリック アルファはほとんどアルファですが、私たちはそれを製品化できる状態にするために精力的に取り組んでいます。ローカル サイトやステージング サイトで Divi 5 を試してみて、できる限りすべてのバグを見つけて、サポート チームに報告してください。私たちは発見されたバグをそれぞれ優先順位付けし、発生したときに最も差し迫った問題に取り組みます。

Divi 5 アルファレポートをダウンロード Divi 5 のバグ

テストするためのステージング サイトやローカル サイトがない場合でも、Divi 5 のデモ バージョンを試してみることができます。これは、新しいビルダーの再設計とレイアウトに慣れるのに最適な方法です。これはかなりの変化ですが、非常に必要とされていた変化です。

Divi 5 デモを試してみる

Divi の未来は早い

Divi 5 は、速度とパフォーマンスの点で大幅な進歩を示しています。 Divi は、超高速の再レンダリング、より速いロード時間、そしてスタイルよりも実用性を優先する再設計されたビルダーにより、より強力かつ応答性が向上しました。あなたが単独の Web デザイナーであっても、大規模な開発チームの一員であっても、これらの改善によりワークフローがより速く、よりスムーズになり、より効率的になります。

Divi 4 を使用したことがある場合は、Divi 5 の速さに驚かれるでしょう。一番いいところは？これはほんの始まりにすぎません。 Divi 5 フレームワークを最適化して拡張するにつれて、ビルダーはさらに高速かつ強力になります。 Divi による Web デザインの未来は急速に進んでいますが、私たちはまだ始まったばかりです。

今後数日で、Divi 5 がショートコードから脱却し、サイト移行システムと開発者関連の利点について詳しく説明する予定です。これらの最新情報などを入手するには、フォローして購読することを忘れないでください。