Elementorの読み込みが遅い？画像とメディア最適化の完全ガイド

利用するエレメンタ WordPressでウェブサイトを構築していると、ページを開くのが遅かったり、エディタのレスポンスが遅かったり、プレビューの読み込み時間が長かったりすることがよくあります。一般的なプラグインの競合やキャッシュ設定に加えて、最適化されていない画像やメディアリソースもElementorの読み込みを遅くする主な要因の一つです。

この記事では、ページを開く速度と全体的なパフォーマンスを向上させるために、画像やメディアリソースを最適化する方法を取り上げます。

I. Elementorのパフォーマンスに対する画像の影響

Elementorページの構造はビジュアルコンポーネントに基づいており、多くの場合、背景画像、回転グラフィックス、グラフィックモジュール、ビデオリソースが読み込まれます。これらのメディアファイルが特大以下のような現象は、圧縮されなかったり、合理的な方法で呼び出されなかったりすると、ページサイズがそのまま大きくなってしまうことに起因する：

最初の画面ロード時間の延長
スクロール時にページが遅れる
エディターの読み込みで立ち往生

そのため、画像の最適化はElementorのパフォーマンス向上にとって非常に重要です。

第二に、画像最適化の実用的な方法である。

1.アップロードされた画像のサイズをコントロールする

画像をアップロードする前に、実際の表示要件に従って処理をトリミングすることをお勧めします。例えば

バナーの背景画像を1920×1080ピクセルに設定可能

モバイルディスプレイの画像は800ピクセルに制限されています。
ロゴまたはアイコンの画像は200×200ピクセルを超える必要はありません。

サイズの大きいオリジナル画像を直接アップロードすると、ページサイズに深刻な影響を与える可能性があります。

2.サイズを小さくするための圧縮ツールの使用

オンラインツールまたはプラグインの使用圧縮画像は、読み込み速度を向上させるための重要な操作である。

推奨ツールは、TinyPNG、Squoosh.app、プラグインのオプションSmush、ShortPixelです、イマジファイいずれもバッチ圧縮をサポートし、画質を維持する。

3.遅延ロードの有効化

レイジー・ローディング・テクノロジーは、画像が実際に表示エリアに入ったときにのみ読み込みを開始し、最初の画面への負担を軽減します。

方法1：WordPressデフォルトのレイジーローディングを使う（5.5以上）

WordPress 5.5以降では、システムが自動的に loading="lazy" プロパティ。この機能は設定する必要はなく、以下の条件を満たすだけでよい：

ワードプレスシステム5.5以上（6.0以上を推奨）

画像はシステムのメディアライブラリを使ってアップロードされ、画像コンポーネント（Elementorの標準画像モジュールなど）を使ってページに挿入されます。

これらの条件が満たされると、ビューポートの位置までスクロールしたときに画像がロードされるため、ページの初期リソースの負担が軽減されます。

方法2：キャッシュ・プラグインで遅延ロードを拡張する

例えば WPロケットまたはLiteSpeed Cacheのようなプラグインを使用すると、遅延ロードの動作をさらに制御できます。

WP Rocketは画像とiframeの遅延読み込みを有効にすることができ、LiteSpeed Cacheも画像、動画、背景画像の遅延読み込み設定を提供する。これを行う方法は、通常、プラグインの設定インターフェイスに移動し、関連するスイッチをオンにし、それを保存することです。

4.WebPなどの最新フォーマットの使用

ウェブピーこの画像フォーマットは、JPGやPNGファイルよりも小さく、読み込みが速く、すでに主要なブラウザと互換性があります。

圧縮プラグインを使用してWebPのコピーを自動的に生成することもできます。シーディーエヌサービスでフォーマット変換が可能です。WebP対応ウェブサイトの全体的な読み込み速度が大幅に改善されます。

手順（例としてShortPixelを使用）：

プラグインのインストールと有効化 ShortPixel画像オプティマイザ

バックエンドの[設定] > [ShortPixel]に移動します。
WebP画像を作成する」にチェックを入れる。
ShortPixel CDNを使用して次世代画像を配信する」にチェックを入れます。

設定を保存すると、プラグインは新しくアップロードされた画像のWebPコピーを自動的に生成します。
古い画像との互換性を保つために、「バッチ最適化」をクリックして、過去のメディアライブラリを処理することができます。

5.映像リソースの合理的な使用

ページ内に動画が埋め込まれている場合は、それを推奨する：

YouTubeまたはVimeoを使う外部指揮系統ローカルアップロードの代わりに

ビデオの遅延ロードを有効にする
フルスクリーンのバックグラウンドビデオや自動再生設定を避け、ファーストスクリーンのリソース消費を抑える。

III.Elementor設定の補助最適化オプション

また、Elementorプラグインにはパフォーマンス最適化の設定が組み込まれており、新バージョンのインターフェイスで調整することで、ページのリソースを読み込む際の負担を軽減することができる。

1.パフォーマンスの最適化を有効にする（新しい機能ページ）

パスWordPressバックエンド → Elementor → 設定 → 機能

このページでは、以下のオプションを有効にすることをお勧めします：

最適化されたマークアップ不要なネストされたタグを削除し、HTMLの出力構造を最適化します。 DOM ノード数
エレメント・キャッシング: 静的コンテンツのコンポーネントレベルのキャッシュを有効にして、繰り返しページを読み込む際の速度を向上させます。

これらのオプションのステータスを アクティブそして、ページの一番下をクリックする 変更の保存 変更を保存する。

2.エディタロードモードの切り替え（バックエンド編集の効率化）

パスElementor → 設定 → 詳細

そのページで見つけてください：

エディター・ローダー方式
エディタの読み込みが遅い、または画面が白い場合は、このオプションを有効にしてみてください。

トグルローディングは、特定のホストや低メモリ環境でのElementorエディタの応答性を最適化します。

IV.軽量ページ構築の方向性の提案

画像の最適化を組み合わせることに加えて、以下の点も推奨される：

視覚的な混乱を避けるために、様式化された画像を使用する
ページスクロールの長さとモジュールの積み重ねを減らす
各画像に追加 alt 説明SEOはあなたにとって良いことだ！

CDNによるメディアロードの高速化

これらの操作は、画像圧縮やフォーマット変換とともに、ページのパフォーマンスを大幅に向上させます。

V. まとめ

Elementorページの読み込みが遅いという問題は、画像やメディアリソースの扱い方と密接に関係していることがよくあります。画像の適度な圧縮、遅延読み込みの有効化、WebPフォーマットの採用、動画の呼び出し方法の最適化などは、視覚的な品質を変えることなく、ページサイズを効果的に縮小し、読み込み速度を向上させ、編集やブラウジングをよりスムーズにすることができます。

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：info@361sale.com
④ 勤務時間: 月～金、9:30～18:30、祝日休み