目次

はじめに

ご紹介ビデオ

どのくらい速くなるの？

どうやって高速化しているの？

新しいバージョンのDiviは、軽量テーマの敏捷性を備えた拡張ページビルダーとなっています♪

・ダイナミックPHPフレームワーク

Diviの新しいダイナミックフレームワークは、各ページで使用するモジュールと機能をレンダリングするために必要なロジックのみを処理するようになりました。

例えば、ページ内でDiviの50以上のモジュールのうち5つしか使用していない場合、Diviはそれらの5つのモジュールに必要な機能のみを処理し、残りはスキップします。これらの5つのモジュールが、スクロール効果、アニメーション、スティッキーオプション、境界線オプションなどのDiviの多くの機能の一部を使用しない場合、これらの機能も処理されません。

・ダイナミックCSS

Diviのスタイルシートも同じように高速化されています。

今回の新しいDiviは、大きなCSSファイルを取得し、それを何百もの小さなコンポーネントに分割しました。各ページで、これらのCSSコンポーネントが組み合わされて、使用しているモジュール、モジュール機能、およびテーマレイアウトオプションに基づいて特定のページのスタイルを設定するために必要な部分のみを含む一意のスタイルシートが形成されるようになりました。

その結果、Diviで作成する各ページのCSSファイルサイズが劇的に減少しています。未使用のCSSが読み込まれることはないため、不要にデータサイズが膨らんでしまう必要がありません。

(DIVIによるテストだと、CSSのサイズは860キロバイトから54キロバイトまで減少したそうです！)

・JavaScriptの最適化

DiviのJavaScriptファイルの大部分をモジュール化して、ページで使用している特定のモジュールで必要な場合にのみ、Diviが各JavaScriptライブラリをオンデマンドでロードできるようになりました。

また、スティッキーオプションやモーションエフェクトなどのDiviの機能の一部については、必要な場合にのみこれらの機能がロードされる仕組みとなりました。

さらに、不要なコードの大きなチャンクを削除し、最終的にDiviの基本JavaScriptファイルサイズを半分に削減することができたそうです。すごいですね。

どうやって高速化しているの？
CriticalCSSシステムとは？

Diviの新しいCriticalCSSシステムは、コンテンツのスタイルを設定するために必要なCSSを識別し、それ以外はすべて延期します。ページが最初に読み込まれるときに必要なのは重要なスタイルのみであり、レンダリングブロッキングアセットはページの速度に非常に重要な役割を果たすため、重要なスタイルと重要でないスタイルを自動的に分離するDiviの機能は、他の多くのWordPressテーマやビルダーよりも優れているとアピールされています。

DiviがCSSの処理を完了した後、すでに少量のCSSのごく一部だけが実際にウェブサイトの初期読み込み時間に考慮されます。

コンテンツはすぐに表示されることとなります。そのため「Googleからも高得点が与えられるでしょう」とアピールされています。（とても重要ですよね♪）

スピードブーストオプション

不要なリソースを削除し、レンダリングブロック要求を延期することを目的として、Diviにいくつかの速度向上オプションが追加されています。

・Google Fonts Caching

Googleフォントがキャッシュされ、ヘッダーにインラインで印刷されるようになりました。これにより、レンダリングブロック要求が削除され、読み込み時間が短縮されます。また、ペイロードを減らすためにレガシーフォントファイルを削除するオプションも追加されています。

・WordPressの絵文字の削除

WordPressにはネイティブの絵文字システムが付属していますが、最近のブラウザではネイティブの絵文字がサポートされているため、これは実際にはあまり必要ありません。

そして、ネイティブの絵文字はWordPressバージョンよりも感じいいですよね（笑）Diviには、ネイティブのWordPress絵文字を無効にするオプションがあり、ここでも不要なリソースが削除されます。

・グーテンベルクスタイルシート延期

デフォルトでは、DiviBuilderを使用しているページについては、Gutenbergブロックスタイルシートを遅延ロードするようになりました。万が一の場合に備えてロードされますが、レンダリングがブロックされることはなくなりました。

・ダイナミックアイコン

使用しているモジュールと機能に基づいて、オンデマンドでロードされるアイコンフォントサブセットが用意されました。

これにより、Diviのベースアイコンのフォントサイズが90kbから6kbに減少します。完全なアイコンセットは、必要な場合にのみロードされます。

子テーマまたはカスタムDiviモジュールを使用している場合、このオプションはデフォルトで無効になっています。

・jQuery延期

Diviは、jQueryをヘッダーから移動し、ヘッダーで不要な場合はフッターに非同期でロードされるようになりました。

これにより、レンダリングブロッキング要求が削除され、読み込み時間が短縮されています。スクリプトがjQueryを必要とするヘッダーにエンキューされている場合、競合を避けるためにスクリプトはヘッダーに戻されます。

(問題が発生する場合は、このオプションを無効にすることもできます。)

競合サービスと比べると？

このような競合サービスと条件を合わせた比較が行われています。

• Elementor、Helloテーマを使用
• グーテンベルクでは、アドオン、プラグイン、アストラのテーマを使用
• ビーバービルダーKadenceのテーマを使用
• Fusion BuilderとAvada

Google PageSpeedで、現時点で一番優れていることが分かります。

(これから、競合各社も検討すると思うので、ずっと一番早いことはないと思います。ただ、今の選択としてはとても優れていますね♫)

終わりに