2분 만에 Elementor 히어로 이미지 속도 높이기!

더 빠른 Elementor 히어로 이미지

인기 있는 WordPress 페이지 편집기인 Elementor는 페이지 디자인을 단순화합니다. 안타깝게도 이로 인해 사이트 속도가 느려지는 경우가 많습니다. 때로는 사용자 오류 때문이기도 하고 때로는 Elementor의 디자인 선택 때문이기도 합니다. 제가 거의 매일 보는 한 가지 예는 Elementor가 히어로 이미지를 처리하는 방식입니다. 기본적으로 Elementor는 이러한 이미지에 배경 이미지를 사용하므로 매번 페이지 로드 속도가 느려집니다.

2026년 3월 Arjen Karel 최종 검토

Elementor 배경 이미지의 매력

Elementor는 기본적으로 히어로 이미지를 배경 이미지로 추가합니다. Elementor로 페이지를 편집하는 동안 첫 번째 컨테이너를 클릭하고 스타일로 이동하여 이미지를 추가하기만 하면 됩니다. 쉽고 편리하며 누구나 할 수 있습니다. 그것으로 충분하다면 여기서 읽기를 멈추셔도 되지만, 방문자를 생각한다면 계속 읽고 올바른 방법으로 Elementor 히어로 이미지를 만드는 방법을 알아보세요.

Elementor 배경 이미지의 문제점

그렇다면 배경 이미지의 문제점은 무엇일까요? 배경 이미지는 요소의 전체 배경에 걸쳐 표시되는 특징이 있습니다. 필요한 역할을 수행하지만 다음과 같은 성능 비용이 발생합니다.

• 늦은 발견(Late discovery): 기술적인 관점에서 배경 이미지는 이상적이지 않습니다. Elementor 배경 이미지는 HTML에서 즉시 발견되지 않습니다. 이러한 배경 이미지는 스타일시트에 연결되어 있습니다. 스타일시트는 별도로 다운로드하고 구문 분석해야 하므로 렌더링 프로세스 중에 훨씬 나중에 발견됩니다. 이로 인해 Largest Contentful Paint (LCP)가 지연됩니다.
• 속도에 최적화되지 않음: 배경 이미지에는 네이티브 지연 로딩(native lazy loading), fetchpriority 및 비동기 디코딩(async decoding)과 같은 최신 속성이 없기 때문에 속도에 최적화되어 있지 않습니다.
• 반응형이 아님: 마지막으로 Elementor 배경 이미지는 반응형이 아니며 작은 모바일 기기에서도 항상 전체 데스크톱 크기의 이미지를 로드합니다.

더 이상 자세히 설명하지는 않겠지만(배경 이미지가 나쁜 이유에 관심이 있다면 읽어보세요), 이러한 설정이 있는 페이지는 Core Web Vitals를 통과하지 못할 가능성이 높다는 것만 알아두면 됩니다.

느린 배경 이미지를 위한 2분 해결책

느린 배경 이미지가 문제가 될 필요는 없습니다. 간단한 CSS 조정만으로 빠르고 반응형인 이미지로 변환할 수 있습니다. 비결이 무엇일까요? object-fit: cover를 사용하여 이미지 크기를 조정하고 이를 컨테이너의 position: relative 및 이미지의 position: absolute와 결합하는 것입니다.

재미있는 사실: 오늘 Elementor 배경 이미지를 놀랍도록 빠른 반응형 이미지로 변환하면서 시간을 측정해 보았습니다. 2분도 채 걸리지 않았습니다!

1단계: 필요한 스타일 추가

느린 배경 이미지를 수정하려면 몇 가지 필수 CSS 스타일을 적용하는 것부터 시작하세요. 이러한 스타일은 이미지가 적절한 배경 커버 이미지처럼 작동하게 하고 Elementor 헬퍼 div(helper divs)와 충돌하지 않도록 합니다.

/* 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)으로 만듭니다.
• .relative .elementor-*: 레이아웃 충돌을 피하기 위해 Elementor 헬퍼 div를 재설정합니다.
• .heroimg: 이미지가 컨테이너 뒤에 있으면서 컨테이너를 덮도록 크기가 조정되게 합니다.

스타일 추가 방법:

• WordPress 알림판(Dashboard)으로 이동합니다.
• 외모(Appearance) > 사용자 정의하기(Customize)로 이동합니다.
• 추가 CSS(Additional CSS)를 클릭합니다.
• 위의 CSS 코드를 붙여넣고 변경 사항을 저장합니다.

이것으로 느린 배경 이미지를 반응형 최적화 히어로 이미지로 변환하기 위한 기초가 마련되었습니다. 다음으로, 히어로 섹션에 .relative 및 .heroimg 클래스를 적용하여 변환을 완료합니다.

2단계: 컨테이너 준비

스타일이 준비되었으므로 이제 새로운 히어로 이미지를 위한 컨테이너를 준비할 차례입니다. 기존 배경 이미지를 제거하고 컨테이너에 .relative 클래스를 적용하는 과정이 포함됩니다.

단계:

• 컨테이너 편집:
• Elementor 편집기로 이동하여 현재 히어로 이미지가 적용된 컨테이너를 선택합니다.
• 배경 이미지 제거:
• 스타일(Style) 탭으로 이동합니다.
• 이미지가 적용된 배경(Background) 섹션을 찾습니다.
• 휴지통 아이콘을 클릭하여 배경 이미지를 제거합니다.
• .relative 클래스 적용:
• 고급(Advanced) 탭으로 전환합니다.
• CSS 클래스(CSS Classes) 아래에 relative를 입력합니다.

3단계: 새 이미지 추가 및 새 클래스 적용

컨테이너가 준비되면 Elementor를 사용하여 반응형으로 최적화된 히어로 이미지를 추가할 차례입니다.

예상되는 상황: 마지막 단계에서 클래스를 적용하기 전에는 히어로 이미지가 정렬되지 않거나 이상해 보일 수 있습니다. 이는 정상입니다. .heroimg 클래스는 이미지를 배경 커버처럼 작동하는 반응형 전체 너비 히어로 이미지로 변환합니다. 완료되면 최적화된 히어로 이미지가 컨테이너 뒤에 위치하여 동일한 시각적 효과를 제공하면서도 성능은 크게 향상됩니다.

단계:

• 이미지 요소 추가:
• Elementor 편집기의 왼쪽 상단 모서리에 있는 플러스 아이콘을 클릭하여 새 요소를 추가합니다.
• 이미지(Image) 위젯을 드래그하여 상단 컨테이너(.relative 클래스가 있는 컨테이너)에 드롭합니다.
• 이미지 업로드 및 선택:
• 왼쪽 패널의 이미지 설정에서 이미지 자리 표시자(placeholder)를 클릭합니다.
• 사용하려는 전체 화면 이미지를 업로드하거나 WordPress 미디어 갤러리에서 기존 이미지를 선택합니다.
• .heroimg 클래스 적용:
• 이미지가 선택된 상태에서 Elementor 메뉴의 고급(Advanced) 탭으로 이동합니다.
• CSS 클래스(CSS Classes) 필드에 heroimg를 입력합니다.

결과: 77% 더 빠른 LCP

이제 히어로 이미지가 완전히 최적화되었습니다. 페이지를 게시한 후 요소를 검사해 보면 놀라운 점을 발견할 수 있습니다. 느린 배경 이미지가 반응성이 뛰어난 빠른 전경 이미지(foreground image)로 교체되었다는 것입니다. 이 이미지는 이제 높은 fetchpriority로 로드되어 훨씬 빠르게 표시되며 Core Web Vitals와 사용자 경험(UX)을 모두 향상시킵니다.

이 예시에서는 LCP가 2.6초에서 0.6초로 감소했습니다. 2분 만의 수정으로 77% 향상된 결과입니다.

보너스: 히어로 이미지 미리 로드(preload)

배경 이미지는 실제로 자동으로 미리 로드할 수 없습니다. 전경 이미지는 WP Core Web Vitals와 같은 플러그인을 사용하여 미리 로드할 수 있습니다. 이러한 반응형 이미지를 미리 로드(Preloading)하면 모든 스크립트보다 먼저 대기열에 추가되어 웹페이지의 시각적 측면을 우선시합니다.

이미지를 최적화하는 더 많은 방법은 완전한 이미지 최적화 가이드를 확인하세요.

YouTube에서 전체 과정 시청하기

제가 YouTube에서 Elementor 배경 이미지를 수정하는 과정을 시청하세요!