Elementorのウェブサイトの速度を効果的に向上させるには？

Elementorのエディタは、Wordpressのウェブサイトのエディタであり、ウェブサイトのバックエンドが有効になった後、それは、遅いラグ、Elementorのエディタを開くことができない表示されることがあります。下の図のように：

Elementorエディタのスピード問題を解決する9つの方法をご紹介します。

1.Elementorの機能を有効にする

Wordspressのダッシュボードにログインし、次のページに移動します。 エレメンタ → 設定 → 遅延読み込み背景画像、インラインフォントアイコンを有効にします：

インラインフォントアイコン
フォントアイコン（Font Awesomeやeiconsなど）を、ライブラリ全体を読み込むのではなく、SVGとしてインラインで読み込みます。これにより、CSSリクエストやレンダーブロックを引き起こすCSSの問題を減らすことができます。

背景画像の読み込み遅延
最適化プラグインと "lazy-bg "ヘルパークラスを使用すると、背景画像の読み込みを遅らせることができます。これにより、背景画像の読み込みがより簡単で効率的になります。

DOM出力の最適化
elementor-inner、elementor-row、elementor-column-wrapなどの不要なdivラッパーを削除することで、DOMサイズを縮小し、パフォーマンスを向上させます。

リソースロードの改善
ライトボックス、フルスクリーンライブラリ、ダイアログライブラリ、共有リンクライブラリを必要なときだけロードすることで、サイトのJavaScript負担を軽減します。

CSS読み込みの改善
使用中のウィジェットのCSSとアニメーションのみをロードし、同時にロードすることで、サイト上のCSSとレンダーブロッキングリソースの量を削減します。

データ共有を無効にする
プラグイン開発者とデータを共有するには、サーバーリソースが必要です。そのため、すべてのプラグインでこの機能を無効にすることをお勧めします。

2,CSSの印刷方法を「外部ファイル」に変更する。

この方法には長所と短所がありますが、外部CSSファイルを使用する方が、各外部CSSファイルをキャッシュでき、HTMLのサイズを増加させないため、通常は優れています。自分のサイトで結果をテストすることをお勧めしますが、私は通常、外部ファイルの使用をお勧めします。

3,デフォルトのGoogleフォントを無効にする

次のステップでは、必要なフォントだけをプリロードし、ローカルでwoff2フォーマットを使用します。

あるアドバンスでGoogle Fonts Font Awesomeを無効にする

ある一般でFont Awesomeを無効にする

フォント/CSSの設定を変更する場合は、CSSとCSS Elementorのツール設定でデータを再生成し、ウォーターフォールチャート（GTmetrixやChrome Developer Toolsなど）で結果をテストする。

4,Googleフォントの読み込みを「スワップ」に設定する。

Googleフォントの読み込みを"スワップ"を使用することで、ウェブフォントの読み込み中もテキストが表示されたままになります。しかし、Font Awesomeは フォント表示：ブロックアイコンの読み込みをノンブロッキングにするためだ。また フォント表示 属性。

追加 フォント表示：スワップ場所が見つからない場合は、フォントのCSSファイルを探すか、文字列ロケーターを使ってフォントの場所を検索してください。場所が見つからない場合は、単に フォント表示：スワップ フォントのCSSコードに追加するだけです。

Gutenbergのwp-block-libraryを無効にする

Elementorを使用しているため、Gutenbergを無効にすることができ、サイトに余分なCSSファイル（/wp-includes/css/dist/block-library/style.min.css）が追加されます。以下のことが可能です。アセット・クリーンアップの使用 プラグインGutenbergブロックライブラリのCSSキューをキャンセルする::

Gutenbergエディタを無効にする
Gutenbergは、Disable GutenbergプラグインまたはPerfmattersのスクリプトマネージャを使用して無効にすることができます。Gutenbergがウェブサイトの特定の部分でのみ使用されている場合、どちらのオプションでもロードされる場所を制御できるため、ウェブサイトのパフォーマンスを最適化できます。

5,アニメーションでtransform + translateを使用する

アニメーションは正確には推奨されないが 変える レイアウトの変更を防ぐ（CLS）。

これらのエフェクトは、Happy Addonsプラグインを使用して実現できます。CSSトランスフォームによってアニメーションの幅と高さを変更でき、CSSトランスレーションによってレイアウトを変更することなく要素を移動できます。これにより、アニメーションを維持しながらページの安定性が向上します。

6,未使用のプラグインを無効にする

WordPressサイトで使用するプラグインの数は、必ず管理してください。プラグインが多すぎると、バックエンドの動作が非常に重くなり、操作が困難になります。

以下は推奨事項である：

1. プラグインの数を制限するプラグインの数はなるべく15個以下にすること。
2. 重複機能プラグインを避ける例えば、SEOプラグインは、SEO Yoast、Rank Math、All in One SEOの中から1つを選んでインストールします。
3. 機能の重複を避けるすでにフル機能のプラグインを持っている場合は、重複した機能を持つプラグインのインストールは避けましょう。
4. 未使用のプラグインを無効にする使えないプラグインは常に無効にする。

特定のプラグインが特定のページや投稿にのみ必要な場合は、PerfmattersやAsset CleanUpを使ってアンインストールし、CSSやJavaScriptを減らすことができます。

Perfmattersの使用手順は以下の通り：

1. スクリプトマネージャーを有効にする設定 → Perfmatters → アドオン → スクリプト・マネージャーでスクリプト・マネージャーを有効にする。
2. テストモードの有効化スクリプトマネージャーの設定でテストモードを有効にすると、サイトを壊すことなくスクリプトマネージャーをテストできます。変更を公開するときはテストモードの無効化.

スクリプトマネージャーを表示し、使用していないプラグイン（ページ、投稿、現在のURL、正規表現などを除くすべての場所）をアンインストールします。

7,WebP画像の使用

画像を最適化するためには、3つの点に注意する必要があります：

1. 画像サイズのコントロール画像サイズは200KB以下にしてください。
2. Alt属性を追加するSEO最適化のために画像にAlt属性を追加します。
3. WebPフォーマットの使用ファイルサイズを小さくし、高画質を維持できるWebP形式が最適です。

WebP形式の画像は、WordPressサイトにアップロードする前にローカルで処理することをお勧めします。WordPressには 画像最適化プラグインこの問題を解決し、サイトのパフォーマンスに影響を与えたり、画質や解像度が落ちない程度に画像を自動的に縮小します。

8,軽量テーマを使う

軽量テーマを選択することは、ウェブサイトの速度を向上させる効果的な方法の一つです。ここでは、軽量テーマを選ぶ利点と、サブテーマを多用しないことの重要性をご紹介します：

1. シンプルなコード構造軽量テーマは通常、過剰な冗長性や不要な機能を避けたクリーンなコードを採用しています。これにより、ページの読み込みが速くなり、不必要なリソースの消費を抑えることができます。
2. 最適化されたパフォーマンスLightweight テーマは、CSSとJavaScriptの圧縮、読み込みの遅延、HTTPリクエストの最小化など、パフォーマンスの最適化に重点を置いています。これにより、サーバーの負担を軽減し、ページの読み込み速度を向上させます。
3. サブテーマが多すぎないようにする子テーマの数が多すぎると、ページが複雑になり、パフォーマンスが低下する可能性があります。また、子テーマを使いすぎると、不必要なコードやスタイルが導入され、ページのロード時間が長くなる可能性があります。そのため、1つのウェブサイトで同時に多くのサブテーマを使用することはなるべく避けてください。
4. 容易なメンテナンス軽量テーマは、コード構造がシンプルで明確なため、メンテナンスが容易です。そのため、テーマのアップデートやカスタマイズ時に発生する可能性のある問題を減らし、サイトの安定性を向上させることができます。
5. レスポンシブデザイン多くの軽量テーマがレスポンシブデザインに重点を置いているため、ウェブサイトはさまざまなデバイスで優れたユーザー体験を提供します。これは、より多くの訪問者を集め、ウェブサイトのSEOランキングを高めるのに役立ちます。

軽量テーマを選ぶ際には、ウェブサイトのニーズとパフォーマンスの目標に基づいて適切な軽量テーマを選び、あらゆる面で優れたパフォーマンスを発揮できるようにする必要があります。

9,CDNによるスピードアップ

CDNは、画像や動画などのウェブサイトの静的コンテンツを世界中のサーバーに保存することで、ウェブページの読み込みを高速化します。この利点は、訪問者がどこにいても、最も近いサーバーからコンテンツを取得できるため、待ち時間が短縮され、ウェブサイトの読み込みが速くなることです。以下はCloudflare CDNの設定手順です：

Cloudflareアカウントを作成する：

1. クラウドフレアへCloudflareの公式ウェブサイトをご覧ください。 クラウドフレア をクリックし、無料アカウントを作成する。
2. ウェブサイトを追加する指示に従ってウェブサイトを追加し、ドメイン設定を完了します。

ドメイン名解決設定を変更する：

1. ドメインレジストラへのログインドメイン名レジストラにログインし、ドメイン名の解決設定を確認します。
2. ネームサーバーの変更お客様のドメインのネームサーバーをCloudflareが提供するものに変更し、お客様のトラフィックがCloudflareを経由して最適化されるようにします。

CDN設定を選択します：

1. Cloudflareアカウントにログインするウェブサイトを選択してください。
2. 自動最小化」を有効にするSpeedタブでAuto Minifyを有効にすると、CSS、JavaScript、HTMLファイルのサイズが縮小され、読み込み速度が向上します。
3. ロケットローダー」を有効にするSpeedタブで、Rocket Loaderを有効にしてJavaScriptの読み込みを遅らせ、ページの読み込みを最適化します。

HTTPSを有効にする：

1. SSLモードの選択Cryptoタブで、SSLモードとして "Full (strict) "を選択し、サイトがHTTPSで暗号化されたデータを送信するようにします。

キャッシュを設定する：

1. キャッシュ・エブリシング」を有効にするCaching "タブで "Cache Everything "を有効にすると、ページ全体がキャッシュされ、読み込み速度が向上します。
2. キャッシュの有効期限の設定新しいコンテンツがタイムリーに更新されるようにする。

ファイアウォールとセキュリティを設定する：

1. ウェブアプリケーションファイアウォール（WAF）の有効化ファイアウォールタブでは、悪意のある攻撃からサイトを保護するためにWAFを有効にします。
2. 追加のセキュリティ設定の構成例えば、ボット管理やIPブラックリストなどです。

モニタリングと分析

1. Cloudflare分析ツールの有効化アナリティクスタブで、サイトのパフォーマンスとトラフィックを監視します。

テストと最適化：

1. ウェブサイトの読み込み速度をテストするCloudflare CDNでパフォーマンスを確実に向上。
2. テスト結果に基づく最適化例えば、画像の圧縮、CSSファイルとJavaScriptファイルの結合など。

概要

Elementorエディタを開いたときにラグが発生するなどの問題があり、ウェブサイトの速度とパフォーマンスを改善する必要があります。主な対策としては、Cloudflare CDNアクセラレーションの使用、軽量テーマの選択、WebPフォーマットへの画像の最適化、使用していないプラグインの無効化、ElementorとCSSの適切な設定などが挙げられます。これらの最適化は、ページの読み込み時間を短縮するだけでなく、ユーザーエクスペリエンスとSEOランキングの向上にもつながります。定期的にウェブサイトを監視し、最適化することで、常に最高の状態を保つことが、パフォーマンスの高いウェブサイトを維持するための鍵となります。