Elementor 3.21: リストの再帰的ソートクエリ、パフォーマンスの改善など！

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

このリリースでは、ロード時間を短縮し、パフォーマンス評価を向上させるプロフェッショナルなデザインツールとパフォーマンスの強化に焦点を当てています。カテゴリクエリは、カテゴリとタグを円形のグリッドとカルーセルで表示する、ウェブサイトを一覧表示するための新しいツールです。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%改善されたほか、マークアップのクリーンアップ機能や、改善された遅延ロード背景画像機能が導入されました。