バージョン3.21では、カテゴリやタグのリストを作成できるようになったほか、大幅なパフォーマンス向上やエキサイティングなAI新機能が追加されました。

このリリースでは、ロード時間を短縮し、パフォーマンス評価を向上させるプロフェッショナルなデザインツールとパフォーマンス強化に焦点を当てています。Category Queryは、カテゴリーとタグを円形のグリッドとカルーセルで表示する、ウェブサイトを一覧表示するための新しいツールです。AI Copilotは、ウェブサイト制作者が人工知能を使ってより速く、より効率的にウェブサイトを構築できるようにする、もうひとつのエキサイティングな第一歩です。このリリースでは、3つの主要なパフォーマンスの改善により、ウェブサイトも高速化されます。

リストの再帰的ソートクエリ 

今日は、もう一つの人気ダイナミックコンテンツウェブサイトビルダー、Elementorバージョン3.21を紹介したい。これまで、ループテンプレートを使って、ループグリッドやループカルーセルで商品や記事を一貫して表示することができました。カテゴリクエリを使えば、カテゴリやタグをループグリッドやカルーセルのアイテムとして表示することができる。例えば、アパレルショップでは、ループグリッドを使って、「シャツ」「パンツ」「帽子」「カジュアルウェア」などのカテゴリーを表示することができます。「カジュアルウェア "といった具合です。

タクソノミークエリは、表示するタクソノミーを選択し、表示する順序を選択する高度な機能を提供します。例えば、"Show All "を選択し、表示されるタクソノミーの深さをフィルタリングして、何レベルのサブカテゴリーをリストに含めるかを選択することができます。この方法は、複数のレベルのサブカテゴリを含む複雑なタクソノミースキームを持つサイトに推奨されます。あまり複雑でないタクソノミーを持つサイトを構築または管理する場合、「手動選択」オプションを選択して、リストに表示するカテゴリまたはタグを選択することができます。すべて表示」または「手動選択」のどちらを選択しても、リストはアルファベット順またはID番号順で昇順または降順に並べ替えることができます。動的なコンテンツ駆動型ウェブサイトとのシームレスなカテゴリ検索の互換性を確保するために、ACFやCustom Post Types UIなどのサードパーティプラグインと完全な互換性があります。

パフォーマンス向上 

バージョン3.21へのアップデートにより、サイトのパフォーマンスが劇的に改善されます。新バージョンでは、ロード時間を短縮し、Googleのパフォーマンススコアを向上させる3つの主要な機能強化が含まれています。

コントロールレンダリングの最適化

Frontend Performance Scoreは、ウェブサイトのロード時間と効率を測定する多くの異なるメトリクスで構成されています。顕著なメトリクスの1つはTime to First Byte (TTFB)で、クライアントとサーバーの最初の接触から、ブラウザに最初のバイト情報が到着するまでの時間を測定します。訪問者のブラウザでElementorウィジェットがレンダリングされる方法を最適化することで、このリリースではTTFBを20%-30%短縮しました。これは大幅な改善であり、パフォーマンススコアに大きな影響を与えます。

新機能を有効にするには、WordPressコントロールパネル → Elementor → 設定 → 機能にアクセスし、「コントロールの読み込みを最適化」を有効にします。

クリーナー・コード

このリリースがパフォーマンスを向上させるもうひとつの方法は、ウェブサイトのコードをクリーンアップすることだ。DOMには、ブラウザがウェブサイトのコンテンツや構造をどのようにレンダリングするかの命令（コード）が含まれています。一般的に、これらの命令がより効率的に記述されていれば、訪問者のブラウザはコンテンツをより速く読み込むことができます。このため、このバージョンではテキスト入力が空の場合はマークアップを含めず、生成されるコードウィジェットの量を最適化しています。したがって、アイコンボックスが使用され、指示が空白のままであれば、ウィジェットはより少ないコードを生成し、よりきれいなDOM出力を生成します。

背景画像の読み込み遅延の改善 

背景画像は、ブラウザが読み込むのに最も負担がかかるアセットのひとつであり、最適化するのが最も難しいものでもあります。そのため、Elementor 3.21では、バージョン3.9での試みを改良し、背景画像の遅延読み込みに新しいアプローチを採用しました。今回のアクティベーション実験では、背景画像のサイズとページ上の位置に基づいて、効果的に優先順位をつけて読み込みます。これにより、ブラウザは折りたたみ位置の上にある画像を最初に読み込み（読み込み後すぐにビューポートに表示されます）、次に残りの背景画像を読み込みます。背景画像の遅延読み込みは、コンテナ用に設定された背景画像にのみ適用されるため、コンテナを使ってウェブサイトを構築するもう一つの重要な理由です。特定の背景画像の遅延読み込みを無効にするには、CSSクラスを「e-no-lazyload」に設定します。

このバージョンから、この実験的な機能はデフォルトで有効になります。 Lazy Load Background Image」を有効にするには、WordPressのコントロールパネル → Elementor → 設定 → 機能にアクセスします。

AIコパイロット - ネットワーク構築のスーパーアシスタント

ウェブサイトを理解し、レイアウトやデザインに追加する要素を提案するAIアシスタント、AI Copilotの登場により、Elementor AIはウェブサイト制作者にとって完璧なパーソナルアシスタントへと進化しました。他の優れたパートナーと同様、コパイロットは一緒に作業するにつれて直感的に操作できるようになる。提案を受け入れたり拒否したりするたびに、あなたの好みやスタイルを理解することができるので、あなたのアイデアをより早く実現し、クライアントやチームメンバーに最初のドラフトを数分で提示することができます。

機能的・実験的アップデート

このリリースには、機能と実験に関する多数のステータス変更が含まれています。これらのいくつかは、すべての新しいサイトでデフォルトで有効化され、他のものはElementorの不可欠な一部となり、機能ページから有効化または無効化できなくなりました。

• 新しいサイトがデフォルトで有効になりました：カテゴリーフィルター、遅延ロード背景画像。
• 既存のサイトはデフォルトで有効になっている：グリッドコンテナ。

Elementor 3.21で、新しいカテゴリクエリとより高いパフォーマンスをお楽しみください！

このバージョンには、ループグリッドとカルーセルのためのタクソノミークエリも含まれており、レイアウト内のループアイテムとしてカテゴリとタグを表示することができます。バージョン3.21へのアップデートでは、サイトパフォーマンスが大幅に改善され、Time to First Byte (TTFB) メトリクスが20%-30%改善されたほか、マークアップのクリーンアップ機能や、改善された遅延ロード背景画像機能が導入されました。