ElementorがWebサイトのパフォーマンスに優先順位を付けて改善する方法

2021年のElementorの製品ロードマップ、特にパフォーマンスの最適化について話しましょう。 コミュニティから要求されたクールな新機能の計画と開発を続けていますが、今年はユーザーのWebサイトのパフォーマンスを向上させることを使命としています。 この投稿では、この目標を達成するために私たちがすでに取った行動のいくつかをあなたと共有し、来年に何が起こるかについて少し話したいと思います。

インターネットの黎明期から、WebサイトのパフォーマンスはWebクリエーターにとって問題となってきました。 私自身ウェブクリエーターなので、私はいつも次のような質問をします。

• 「私のサイトは遅すぎますか？ それは、ユーザーが私のGoogleランキングを離れたり、傷つけたりする原因になっていますか？」
• 「サイトの速度を向上させるために、特定の機能を手放す必要がありますか？」
• そしてもちろん、「いったい何がまだ私のパフォーマンスの問題を引き起こしているのでしょうか？ ここですべての拠点をカバーしたと思いました！」

そうです、私たちが使用しているプラ​​ットフォームやツールに関係なく、Webサイトから優れたパフォーマンスを引き出すことはWeb作成者にとって常に課題でした。 パフォーマンスに影響を与える関連要因が非常に多いため、解決策を見つけることは言うまでもなく、実際の問題を特定することは必ずしも容易ではありません。 これがまさに、パフォーマンスに関するこの5部構成のビデオコースを作成した理由です。 このシリーズでは、Elementorに関連しているかどうかに関係なく、サイトのパフォーマンスに影響を与える可能性のある各重要な要素について詳しく説明し、サイトを最適化する方法について説明します。

物事を本当に面白くするために、グーグルは最近、ウェブサイトのパフォーマンスがそのランキングアルゴリズムに公式に関与することを発表しました。 これにより、パフォーマンスの問題が脚光を浴び、世界中のWebサイト所有者の間で懸念が生じています。 そのため、過去6か月間、R＆DチームとSEOチームは、Elementor Webサイトがこの更新を通過し、飛んでいる色で合格するように精力的に取り組んできました。

グーグルの不思議なアルゴリズムに関して言えば、あなたが安全だと感じるには、私たちの言葉よりもはるかに多くの時間がかかることを私たちは知っています。 そのため、ユーザーとWebクリエーターコミュニティへのサービスとして、主要なSEO専門家による無料のWebパフォーマンスウェビナーを開催し、今後の変更について話し合います。 これは、更新自体をカバーするだけでなく、この変更がWebサイトにどのように影響するか、および準備のために何ができるかについても詳しく説明します。 ウェビナーは4月28日に開催されますので、必ず席を確保してください。

ただし、すべてのコースとウェビナーは別として、私たちの主な目標は、私たちの製品がサイトのパフォーマンスに悪影響を与えないようにすることです。 これは私たちにとって最優先事項であり、今後もそうあり続けます。 それでは、これ以上面倒なことはせずに、2021年の製品ロードマップに設定されているElementorのパフォーマンス最適化の取り組みについて詳しく見ていきましょう。

製品開発サイクルの最適化を超えて、Elementorのパフォーマンスを改善するためのビジョンは5トラックアプローチで構成されています。 これらの領域のいくつかではすでにいくつかの重要な改善が行われていますが、他の領域はElementorの今後のバージョンで対処される予定です。

また、パフォーマンスが開発およびリリースパイプラインの不可欠な部分になったことを誇りに思います。 Elementorのすべてのバージョンは、さまざまなパフォーマンスメトリックに対して検証され、Elementorで構築された既存のWebサイトに新しい機能、調整、または修正が悪影響を及ぼさないことを確認します。

それでは、トラックを1つずつ確認してみましょう。

Elementorがアセットをロードする方法を改善して、各ページで必要なものだけをロードするようにしています。 ElementorとElementorProの両方の最新バージョンでは、最適化されたアセット読み込み実験を導入して、ウェブサイトのフロントエンドパフォーマンスを改善し、必要な機能のみを読み込むことで各ページを高速化しました。 詳細については、こちらをご覧ください。

また、特定のウィジェットに遅延読み込みオプションを追加しました。今後も追加を続けます。 たとえば、ビデオウィジェットには遅延読み込みオプションが含まれており、埋め込まれたフルビデオプレーヤーを静止画像のサムネイルに置き換えることができます。 訪問者が画像を操作すると、画像は完全なビデオに戻ります。

これらの遅延読み込み手法を利用することで、最初のページ読み込み中にページサイズとHTTPリクエストの数を大幅に減らすことができ、訪問者のエクスペリエンスが大幅に向上します。

ほぼ5年前にElementorを立ち上げて以来、Webブラウザは大きく進化してきました。 現在、5年前に外部ライブラリを必要としていたいくつかの機能は、ネイティブブラウザサポートを使用して実装できます。 これにより、実装がはるかに効率的になり、場合によっては、JavaScriptの実行時間が大幅に短縮されます。

この一例は、場合によってはネイティブのIntersection ObserverAPIに置き換えられたWaypointsライブラリです。

これらのタイプのCSSおよびJavaScriptライブラリの使用を減らし、可能な限りネイティブブラウザサポートに置き換えることを目指しています。

Elementorの既存の内部JavaScriptおよびCSSを引き続き改善および最適化する予定です。

この例には、Google Fontsの読み込み方法を構成する機能や、FontAwesomeライブラリに追加されたfont-displayプロパティが含まれます。 これらの改善により、これらのファイルのレンダリングブロックプロセスが削減され、既存のCSSファイルとJSファイルがさらに最適化されます。

Elementor 3.0では、動的CSSの読み込みとレンダリングのメカニズムが改善されました。 Elementorは、ページの読み込みごとに動的な値を持つ要素についてページをスキャンするために使用されます。 Elementor 3.0以降、ページが作成されて初めてア​​クセスされると、Elementorは動的な値を持つすべての要素のキャッシュを作成します。 次に、ページにアクセスするたびに動的要素についてページをスキャンする代わりに、リストがキャッシュからフェッチされ、すぐにレンダリングされます。 これにより、サーバー側のレンダリング時間が大幅に改善され、顕著な改善が見られます。 将来的には、Elementorに追加の解析の改善を実装する予定です。 詳細については、このブログ投稿をご覧ください。

最後に、DOMのサイズを縮小するために、Elementorが生成するコード出力を引き続き改善およびスリム化する予定です。

Elementor 3.0でこれらの改善をすでに開始しました。そこでは、3つのラッパー要素を削除して、より小さなDOMを作成し、コード出力を簡素化しました。

Elementor 3.2では、DOMのサイズをさらに大幅に削減するために、さらに2つの要素を削除しました。 近い将来、さらに削減が計画されています。

ご覧のとおり、2021年以降、新機能、改善、およびオーバーホールが期待できます。 これはすべて、パフォーマンスの高いすばらしいWebサイトの構築を継続できるようにするために行われます。 まだ最新バージョンにアップグレードしていない場合は、これらの改善やその他の改善を楽しんでください。

ご存知かもしれませんが、WordPressWebサイトのパフォーマンスに影響を与えるElementorに関係のない要素はたくさんあります。 これらには、画像の最適化、Webホスティング、サーバープロバイダー、CDNなどが含まれます。 ユーザーが完全なWordPress最適化を実装できるようにすることを目的としているため、パフォーマンスの詳細を学ぶのに役立つ無料のチュートリアル、ウェビナー、記事の膨大なリソースバンクを作成しました。

• パフォーマンスに関するビデオコースを作成しました。この5部構成のシリーズでは、パフォーマンスに影響を与える可能性のあるすべての重要な要素と、パフォーマンスを最適化する方法について説明します。

• 4月28日に、主要なSEOエキスパートと一緒にCore Web Vitalsでウェビナーを開催し、今後のGoogleアルゴリズムの変更とそのWebサイトへの影響について話し合います。 ここに席を確保してください。

• また、WordPress Webサイトを高速化する方法に関する詳細なブログ投稿と、Webホスティングの選択、プラグインのキャッシュ、速度テストの実行、WPRocketの使用などのトピックに関するパフォーマンスに焦点を当てた他の記事も公開しています。

Webクリエーターコミュニティを引き続きサポートするために、WordPressのパフォーマンスの他の側面に対処するために、無料のウェビナー、ブログ投稿、およびビデオを引き続き作成します。