Elementor 3.25アップデート：CSSの最適化、新しいアンカーオフセットコントロール、検索ウィジェットのページネーション

ウェブサイトのスピードとユーザーエクスペリエンスを向上させ、機能を強化し、よりスムーズな操作体験をもたらします！

エレメンタ バージョン3.25では、サイトのパフォーマンスとユーザーエクスペリエンスを向上させるため、多くの重要な改良を行いました。このアップデートの主なハイライトは、継続的なCSSの最適化、よりスムーズなスクロール体験(ネイティブCSSと新しいアンカー・オフセット・コントロールで)、および検索ウィジェットのページング機能を追加しました。以下はアップデートの詳細です：

パフォーマンス向上：継続的なCSS最適化

ウェブサイトの読み込み速度は、ユーザー体験にとって非常に重要です。 SEOランキングElementor 3.25は、継続的なCSSの最適化により、ページの読み込み速度を大幅に改善し、不要なリソースの読み込みを削減することで、サイト全体のパフォーマンスを向上させます。

主な改善点

• Elementor ProプラグインのゼロCSSウェイト
  Elementor 3.25 では、Elementor Pro プラグインはデフォルトでゼロ CSS で開始します。これは、プラグインを初めて有効にしたとき、ウィジェットを追加したり機能を使い始めるまで、プラグインがCSSスタイルを読み込まないことを意味します。このアプローチにより、初期 CSS のサイズが大幅に削減され、サイトが最初から軽くなり、冗長な CSS の読み込みが回避されるため、読み込み速度がさらに向上します。
• WooCommerceウィジェットのオンデマンドローディング
  WooCommerceユーザーはこのアップデートによって大きな恩恵を受けるでしょう。これまでElementorは32個のWooCommerceウィジェットすべてのCSSを使用状況に関係なく読み込んでいましたが、バージョン3.25ではCSSが実際の使用状況に基づいて条件付きで読み込まれるようになりました。その結果、WooCommerceウィジェットに関連するCSSはページで実際に使用された時のみロードされ、最大197KBのCSSリソースを節約し、WooCommerceショップのロードをより高速にします。
• グローバルスタイルをオンデマンドでロード
  Elementor 3.25のグローバルスタイルは条件付きで読み込まれます。この改善により、グローバルスタイルファイルのサイズが最大65KB削減され、不要なCSSの負担がさらに軽減され、サイトの応答性が向上します。
• ウィジェットスタイルをオンデマンドでロード
  バージョン3.25では、Elementorのオンデマンドロードがウィジェットごとに細かく設定できるようになりました。一度に読み込まれていたスタイルは、実際に使用されているウィジェットに基づいて一度に一つずつ読み込まれるようになりました。これには以下が含まれます：
  • 6 テーマ要素ウィジェット
  • 3つの回転ウィジェット
  • 2つのフォームウィジェット
  この最適化により、Elementorは実際に使用されるCSSスタイルのみを読み込み、冗長なコードを読み込む必要性を回避し、ページの読み込み速度を大幅に改善します。

これらの最適化により、サイトの読み込み速度が大幅に改善され、デスクトップとモバイルの両方で訪問者にスムーズなブラウジング体験を提供するだけでなく、SEOスコアやWeb Vitalsの主要指標にもプラスの影響を与えました。

[Pro] ネイティブCSSでよりスムーズなスクロール：新しいアンカーオフセットの導入

Elementor 3.25では、スクロールのパフォーマンスも大きく改善されました。ElementorのテクニカルチームがAnchorJSライブラリをネイティブのCSSソリューションに置き換えたため、JavaScriptへの依存が減りパフォーマンスが向上しただけでなく、スクロールがよりスムーズになり、デバイス間で一貫性が生まれました。

新しいアンカー・オフセット・コントロール

このアップデートの主な特徴のひとつは"アンカーシフト"は、スティッキーな見出しやその他の要素を考慮し、アンカーリンクがページ上の正しい位置にスクロールされるようにします。以前は、アンカーリンクがスティッキーな見出しの後ろに隠れた位置にスクロールされることが多く、訪問者に混乱と不満を与えていました。アンカーオフセット」機能は、カスタムオフセット値を設定し、リンク部分が完全に表示され、付箋見出しの後ろに隠れないようにスクロール動作を調整することで、この問題を解決します。

アンカーオフセットの設定方法

アンカーオフセットを設定するには、ヘッダーの「Advanced」タブで「Motion Effects」までスクロールダウンし、「Stick to Top」または「Bottom」に設定してから、「Anchor Offset」フィールドに該当する値を設定します。

[Pro] 拡張検索ウィジェット：リアルタイム結果ページネーション

Elementor 3.25の検索ウィジェットがメジャーアップデートされ、リアルタイムの結果ページングが導入されました。以前は、ライブ検索ドロップダウンメニューの検索結果は一定数のアイテムしか表示されず、訪問者は追加の結果を表示するために別のページに移動する必要がありました。現在、Elementor 3.25ではライブ検索のドロップダウンメニューに直接ページングが導入され、訪問者は現在のページを離れることなく複数の結果グリッドを閲覧することができ、大量のコンテンツを検索する際によりシームレスな体験を提供します。

主なメリット

• 検索エクスペリエンスの向上：訪問者は、検索バーでより多くの検索結果を直接調べることができ、摩擦を減らし、訪問者の関心を引き付けます。
• コンテンツの発見を増やします：ページネーションにより、訪問者は探しているコンテンツを見つけやすくなり、訪問者の満足度向上につながります。
• エンゲージメントの向上と直帰率の低下訪問者が検索中に現在のページに留まることができるようにすることで、よりシームレスなエクスペリエンスを実現し、より長く滞在してもらうことができます。

ページングの設定方法 

ページネーションを "探す「ウィジェットは、まず"エレメント"の"結局"部分的に有効"リアルタイム結果「を選択します。リカーリングテンプレート"、そして"その他の設定"（同じタブ - "コンテンツ "の下）、数字および/または次/前のページングオプションを有効にするオプションがあります。また、"タイプ「タブでページネーションの外観をカスタマイズできます。オプションで、整列、垂直方向の位置、間隔、タイポグラフィを調整したり、ホバーやアクティブ状態のスタイルを追加したりできます。

Elementor 3.25のその他のアップデート

• フォーム送信はデフォルトですべてのサイトで有効です：フォーム送信はエディターにネイティブになり、すべてのサイトで有効になりました。ユーザーは Elementor > 設定 > 詳細WPダッシュボードからこの機能を無効にしたい場合は、WPダッシュボードの「無効にする」ボタンをクリックしてください。
• 最適化された新しいマーカー性能実験: Delete Button、PayPal、Stripeウィジェットの最初のラッパーディヴマークアップを簡素化し、全体的な DOM を削減するためです。
• Twenty Fifteenのテーマ：Elementor Canvas "テンプレートを使用しているページのテーマ背景色を削除するCSS互換性を削除しました。
• 機能的および実験的な最新情報：
  • グリッドコンテナ - Flexboxコンテナにマージし、"コンテナ "に名前を変更します。  
  • 最適化された制御負荷 - 既存のサイトに効果的で、定常状態にアップグレードされます。  
  • ネストされた要素 - 既存のサイトに適用されます。  
  • エディタトップバー - 既存のサイトに対応。
  • Show conditions (for elements) - エディタにネイティブの条件を表示します。

概要

Elementor 3.25のアップデートでは、特にパフォーマンスの最適化、スクロール体験、検索機能の分野でいくつかの改善が行われました：

1. 継続的なCSSの最適化不必要なCSSの読み込みを減らし、サイトの速度と応答性を向上させます。
2. 新しいアンカー・オフセット・コントロールナビゲーションバーが固定されたページで、より正確でスムーズなスクロールを提供します。
3. 検索ウィジェットページングリアルタイム検索機能を強化し、ページングによる検索スピードとユーザーエクスペリエンスを向上。

これらのアップデートは、ウェブサイトの読み込み速度を改善し、不必要なリソース消費を削減するだけでなく、ユーザーのブラウジング体験とインタラクティブ性を向上させ、ウェブサイトの全体的な最適化を強力にサポートします。