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

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

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

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

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

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

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

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

畫像をアップロードする前に、実際の表示要件に従って処理をトリミングすることをお?jiǎng)幛幛筏蓼?。例え?/p>

• バナーの背景畫像を1920×1080ピクセルに設(shè)定可能

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

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

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

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

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

3.遅延ロードの有効化

レイジー?ローディング?テクノロジーは、畫像が実際に表示エリアに入ったときにのみ読み込みを開始し、最初の畫面への負(fù)擔(dān)を軽減します。

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

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

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

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

これらの條件が満たされると、ビューポートの位置までスクロールしたときに畫像がロードされるため、ページの初期リソースの負(fù)擔(dān)が軽減されます。

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

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

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

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

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

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

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

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

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

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

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

ページ內(nèi)に動畫が埋め込まれている場合は、それを推奨する：

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

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

III.Elementor設(shè)定の補(bǔ)助最適化オプション

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

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

パスWordPressバックエンド → Elementor → 設(shè)定 → 機(jī)能

このページでは、以下のオプションを有効にすることをお?jiǎng)幛幛筏蓼梗?/p>

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

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

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

パスElementor → 設(shè)定 → 詳細(xì)

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

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

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

IV.軽量ページ構(gòu)築の方向性の提案

畫像の最適化を組み合わせることに加えて、以下の點(diǎn)も推奨される：

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

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

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

V. まとめ

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

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