・はじめに

・どのくらい速くなったの？

・なんで高速にできたの？

・おわりに

モジュールにカーソルを合わせる、設定ポップアップを開く、デザイン入力を調整する、ビューモードを切り替える、ドラッグ、ドロップ、追加、削除など、すべての動作が以前よりもはるかに高速となっています。

「どのくらい速くなったのか」「なんで高速にできたのか」などについて、少しご紹介します。

（ちょっぴり専門用語も使用してしまっています。ご了承ください。）

様々なアクションについて、速さのBefore/Afterをご紹介します。

（画像出典元：Divi公式サイト）

数字の羅列だと少しイメージがつかないですよね、すみません (^^;

各動作について、違いを紹介します。

ホバーアクションの改善

モジュール、行、セクションにカーソルを合わせるなどの基本的なアクションがはるかに高速になりました。モジュールにカーソルを合わせたときにボタンが表示されるまでの時間は約2倍！ページ上でマウスを動かしているときに、すべてがはるかにスッキリと感じられます。

追加、削除、コピーなどのアクション

これらは、５−６倍も速くなりました。

新しい要素の追加は以前よりも高速で、新しい列を追加すると明らかに違うことがわかります。

モジュール編集の改善

設定ポップアップを開いたり閉じたりするのにかかる時間を大幅に短縮しました。たとえば、テキストモジュールの歯車アイコンをクリックしてから設定ポップアップが表示されるまでの時間が６倍以上速くなっています。

高速にできた仕組みが知りたい方は以下もご覧ください。

（ちょっと細かいです笑）

少しだけ専門用語も含めた紹介となりますが、ご了承くださいね。

ビルダー内の何かが表示、非表示、または変更されると、それらの要素をブラウザーで再レンダリングする必要があります。それらが再レンダリングされる速度は、コンピューターの能力、ブラウザーの速度、およびアプリケーション自体の効率に依存しています。

今回のパフォーマンス改善では、これらの再レンダリングを高速化し、不要な再レンダリングを減らすことで実現しています。

少し、具体例を載せますね。

一般的なコードリファクタリング

Diviには年々多くの機能が加わっていますが、その分ますます複雑になっています。

そのすべての要素を改めて見直し、不要な再レンダリングを高速化または削減するためにリファクタリングできる非効率性を探しながら変更を加えています。（めちゃくちゃ骨の折れる作業ですね…）

VisualBuilderでの条件付きレンダリング

パフォーマンス改善策の主な内容としては　「条件付きレンダリング」　です。

条件付きレンダリングとは何か？　それは、ブラウザのビューポート内に現在表示されているビルダーの一部のみをレンダリングすることです。ビューの外では、パフォーマンスに影響を与えないように、不要なオブジェクトを動的に削除しています。つまり、ページが大きく複雑になっても、パフォーマンスを一定程度維持できる仕組みです。

設定ポップアップ内でも同じことが行われています。これによって、Diviは新しい機能をより多く入れていくことができるようになっています。なかなかすごい技術ですね★

（画像出典元：Divi公式サイト）

今回ご紹介したパフォーマンス向上は、1/20現在使用できるDiviビルダーから反映されているので、ぜひ使用して見てくださいね。

また、今後もさらなるパフォーマンス向上を図っていくと宣言されています。

オススメです (^^)

画像出典元：Divi公式サイト