Elementor のヒーロー画像を2分で高速化！

Elementor ヒーロー画像の高速化

Elementor は人気の WordPress ページエディターで、ページデザインを簡素化します。残念ながら、サイトの速度を低下させることがよくあります。ユーザーのミスが原因のこともあれば、Elementor の設計上の選択が原因のこともあります。私がほぼ毎日目にする例は、Elementor がヒーロー画像を処理する方法です。デフォルトでは、Elementor はこれらに背景画像を使用しており、毎回ページの読み込みを遅くしています。

Elementor 背景画像の魅力

Elementor はデフォルトでヒーロー画像を背景画像として追加します。 Elementor でページを編集中に、最初のコンテナをクリックし、スタイルに移動して画像を追加するだけです。簡単で、 便利で、誰でもできます。それで十分であればここで読むのをやめてください。ただし、訪問者のことを気にするなら、読み続けて Elementor ヒーロー画像を正しい方法で作成する方法を学んでください。

Elementor 背景画像の問題点

背景画像の何が問題なの？と思うかもしれません。背景画像にはこのような特徴があります：要素の背景全体に広がります。必要な機能は果たします。しかし、パフォーマンスのコストがあります：

• 発見の遅延：技術的な観点から、背景画像は理想的とは言えません。Elementor の背景画像は HTML 内ですぐに発見されません。これらの背景画像はスタイルシートでリンクされています。スタイルシートは別途ダウンロードして解析する必要があるため、レンダリングプロセス中の発見がかなり遅くなります。
• 速度に最適化されていない：  背景画像はネイティブの遅延読み込み、fetchpriority、非同期デコードなどの新しいプロパティがないため、速度に最適化されていません。
• レスポンシブでない：最後に、Elementor の背景画像はレスポンシブではなく、小さなモバイルデバイスでも常にフルデスクトップサイズの画像を読み込みます。

これ以上の詳細には触れませんが（興味がある方は背景画像が悪い理由をお読みください）、このような設定のページは Core Web Vitals に合格できない可能性が高いと言えば十分でしょう。

遅い背景画像を2分で修正する方法

遅い背景画像は問題である必要はありません。シンプルな CSS の調整で、高速でレスポンシブな画像に変換できます。  秘密は？object-fit: cover を使用して画像をスケーリングし、コンテナに position: relative、画像に position: absolute を組み合わせることです。 

豆知識：今日、Elementor の背景画像を超高速なレスポンシブ画像に変換する時間を計りました。2分もかかりませんでした！ 

難しそうに聞こえても心配しないでください！ステップバイステップでご案内します。最後にはハウツー動画も用意しています！

ステップ1：必要なスタイルを追加する

遅い背景画像を修正するには、まずいくつかの重要な CSS スタイルを適用します。これらのスタイルにより、画像は適切な背景カバー画像のように動作し、Elementor のヘルパー div と競合しなくなります。

/* The relative parent container */
  .relative{
      position: relative;
  }
  
  /* Ensure Elementor helper divs are not relative */
  .relative .elementor-container, 
  .relative .elementor-column, 
  .relative .elementor-widget-wrap {
      position: initial;
  }
  
  /* The new and improved hero image */
  .heroimg, .heroimg img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
  }

これらの役割：

• .relative：親コンテナを相対配置にし、子要素をその中に配置できるようにします。
• .relative .elementor-*：Elementor のヘルパー div をリセットし、レイアウトの競合を回避します。
• .heroimg：画像がコンテナをカバーするようにスケーリングし、コンテナの背後に配置されるようにします。

スタイルの追加方法：

• WordPress のダッシュボードに移動します。
• 外観 > カスタマイズに移動します。
• 追加 CSS をクリックします。
• 上記の CSS コードを貼り付けて、変更を保存します。

これにより、遅い背景画像をレスポンシブで最適化されたヒーロー画像に変換するための基盤が整います。次に、.relative と .heroimg クラスをヒーローセクションに適用して、その効果を確認しましょう！ 

ステップ2：コンテナを準備する

スタイルが整ったら、次は新しいヒーロー画像用にコンテナを準備します。既存の背景画像を削除し、コンテナに .relative クラスを適用します。

手順：

• コンテナを編集する：
• Elementor エディターに移動し、ヒーロー画像が現在適用されているコンテナを選択します。
• 背景画像を削除する：
• スタイルタブに移動します。
• 画像が適用されている背景セクションを見つけます。
• ゴミ箱アイコンをクリックして背景画像を削除します。
• .relative クラスを適用する：
• 詳細設定タブに切り替えます。
• CSS クラスの下に relative と入力します。

ステップ3：新しい画像を追加してクラスを適用する

コンテナの準備ができたら、Elementor を使用してレスポンシブで最適化されたヒーロー画像を追加します。手順は以下の通りです：

注意点：最後のステップで、クラスを適用する前にヒーロー画像がずれたり、おかしく見えることがあります！これは正常です！.heroimg クラスが画像を、背景カバーのように動作するレスポンシブなフル幅ヒーロー画像に変換します。 完了すると、最適化されたヒーロー画像がコンテナの背後に配置され、パフォーマンスが大幅に改善された同じ視覚効果を提供します。

手順：

• 画像要素を追加する：
• Elementor エディターで、左上のプラスアイコンをクリックして新しい要素を追加します。
• 画像ウィジェットを上部のコンテナ（.relative クラスが付いたもの）にドラッグ＆ドロップします。
• 画像をアップロードして選択する：
• 左パネルの画像設定で、画像のプレースホルダーをクリックします。
• 使用するフルスクリーン画像をアップロードするか、WordPress メディアギャラリーから既存の画像を選択します。
• .heroimg クラスを適用する：
• 画像を選択した状態で、Elementor メニューの詳細設定タブに移動します。
• CSS クラスフィールドに heroimg と入力します。

完了、より高速なページをお楽しみください！

お疲れ様でした！この時点で、ヒーロー画像は完全に最適化され、より高速なページ体験を提供する準備が整いました。 

ページを公開して要素を検証すると、素晴らしいことに気づくでしょう：遅い背景画像がレスポンシブで高速なフォアグラウンド画像に置き換えられています。この画像は高い fetchpriority で読み込まれる可能性が高く、より速く読み込まれることで、Core Web Vitals と user experience の両方が改善されます。

より高速で効率的なページの作成おめでとうございます。訪問者はその違いに気づくでしょう！

変更前：2.6秒

変更後：0.6秒

ボーナス：ヒーロー画像をプリロードする

YouTube で完全なウォークスルーを視聴する