✍️ 목 차
1. LCP 이미지를 지연로드하면 페이지 성능에 미치는 영향
2. LCP 이미지의 지연 로딩을 비활성화하는 방법
2-1 네이티브 레이지 로딩
2-2 JavaScript/JavaScript 라이브러리 사용
2-3 CMS 플러그인 사용 (WordPress 또는 기타 CMS의 경우)
웹 페이지의 성능 향상은 온라인 쇼핑몰의 핵심 요소 중 하나입니다. 특히 LCP(Largest Contentful Paint) 이미지의 적절한 로드는 페이지에서 가장 큰 콘텐츠가 사용자에게 보여지기까지의 시간을 단축시키는데 중요합니다. 이는 쇼핑몰의 속도를 높이고, 이로 인해 사용자 경험을 향상시키는 데 기여합니다.
LCP 이미지의 지연 로딩은 웹성능에 영향을 미치는 중요한 요소입니다. 페이지에서 오프스크린 이미지는 지연 로드해야하나, 빠른 LCP를 달성하기 위해선 스크롤 없이 볼 수 있는 콘텐츠, 예를 들어 LCP 이미지는 지연 로드하지 않는 것이 좋습니다. 이렇게 함으로써 온라인 쇼핑몰의 속도를 최적화할 수 있습니다.
이처럼, 적절한 이미지 로딩 전략은 쇼핑몰 속도, 웹성능 및 온라인 쇼핑몰의 검색 엔진 최적화(SEO)에 크게 기여합니다. 그러므로 효과적인 LCP 이미지 로딩 전략을 강구하여 온라인 쇼핑몰의 성능을 극대화하는 것이 중요합니다.
💡 LCP 이미지를 지연 로드하면 페이지 성능에 어떤 영향을 줍니까?
LCP 이미지를 지연 로드하게 되면 사용자가 페이지를 불러오는데 더 많은 시간이 소요됩니다.
● 로딩 지연 : LCP 이미지를 지연 로드하면 페이지가 로딩되는 동안 사용자는 해당 이미지를 보지 못하므로 초기 로딩 시간이 늘어납니다.
이로 인해 사용자는 페이지가 완전히 로드되기까지 더 오랜 시간을 기다려야 합니다.
● 사용자 경험 저하 : LCP 이미지는 웹 페이지의 주요 콘텐츠를 나타내므로 이 이미지가 빨리 나타나지 않으면 사용자가 웹 페이지의 핵심 내용을 파악하기 어려워집니다. 이로 인해 사용자 경험이 저하될 수 있습니다.
● 검색 엔진 최적화(SEO) 문제 : LCP는 검색 엔진 최적화의 중요한 지표 중 하나이며, LCP 이미지를 지연 로드하면 검색 엔진 순위에도 부정적인 영향을 미칠 수 있습니다.
Google의 연구 에 따르면 LCP 이미지를 지연 로드하면 페이지의 LCP 타이밍이 늘어 날 수 있습니다.
다른 말로 하면, 이미지의 로딩을 스크롤 될 때까지 지연시키면(즉, 브라우저 뷰포트에서 보이는 상태가 될 때까지), 브라우저는 다른 중요한 리소스에 우선순위를 부여할 수 있습니다.
그러나 스크롤 없이 볼 수 있는 콘텐츠에 지연 로딩을 적용할 경우, 예를 들어 LCP 이미지의 경우, 브라우저는 다른 리소스를 위해 LCP 이미지를 지연시킬 수 있습니다.
LCP 이미지가 즉시 다운로드되지 않기 때문에, LCP 타이밍이 지연되고 페이지가 사용자에게 시각적으로 완전하지 않게 보일 수 있습니다.
LCP 이미지의 로딩을 지연함으로써 브라우저는 이를 마크업에서 감지하는 즉시 올바르게 처리하고, LCP 이미지의 빠른 로딩을 가능하게 합니다. 이는 LCP 타이밍을 개선하고 페이지가 사용자에게 더 빠르게 완전한 상태로 보이게 합니다. 이는 모바일 쇼핑 환경에서 더 큰 영향을 미칩니다.
💡 LCP 이미지의 지연 로딩을 비활성화하는 방법은 무엇입니까?
LCP 이미지의 지연 로딩을 비활성화하기 위해서는 몇 가지 방법을 사용할 수 있습니다.
첫째로, 이미지를 최적화하고 크기를 줄여서 다운로드 시간을 단축시킬 수 있습니다.
둘째로, 브라우저에게 이미지를 사전로드할 것을 알리는 preload 속성을 사용할 수 있습니다.
마지막으로, 이미지를 위한 별도의 서버를 사용하여 로드 속도를 향상시킬 수도 있습니다.
아래 내용처럼 웹사이트는 여러 가지 방법으로 지연 로딩을 구현할 수 있습니다.
1. 네이티브 레이지 로딩
네이티브 레이지 로딩은 HTML 이미지에 loading="lazy" 속성을 추가하여 브라우저의 지연 로드 기능을 활용하는 방법입니다.
LCP 이미지에서 loading="lazy" 속성을 제거하면 LCP 이미지의 지연 로딩을 비활성화할 수 있습니다. 이로써 LCP 이미지는 페이지가 로드될 때 즉시 로딩되어 빠르게 표시됩니다.
모바일과 데스크톱에서 LCP 이미지가 다를 수 있으므로, 스크롤 없이 볼 수 있는 모든 이미지에서 지연 로딩을 비활성화하는 것이 좋습니다.
2. JavaScript/JavaScript 라이브러리 사용
JavaScript 또는 JavaScript 라이브러리를 사용하여 이미지에 대한 지연 로드를 구현한 경우, LCP 이미지 및 스크롤 없이 볼 수 있는 이미지에서 지연 로드를 제외해야 합니다.
즉, LCP 이미지와 사용자가 스크롤 없이 볼 수 있는 이미지에는 지연 로딩을 적용하지 않아야 합니다.
3. CMS 플러그인 사용 (WordPress 또는 기타 CMS의 경우)
WordPress 및 기타 CMS 사용자는 플러그인을 사용하여 페이지 이미지 로딩을 지연시킬 수 있습니다.
예를 들어, WP Rocket 플러그인을 사용하면 이미지를 지연 로드할 수 있으며, 플러그인 설정에서 활성화할 수 있습니다.
스크롤 없이 볼 수 있는 이미지 (LCP 이미지 포함)를 제외하려면 플러그인 설정에서 해당 옵션을 선택하세요.
만약 사용 중인 플러그인이 이러한 기능을 제공하지 않거나 선택적으로 비활성화할 수 없다면, 다른 플러그인을 검토하거나 플러그인 작성자에게 추가 지원을 요청할 수 있습니다.
이와 같이, LCP 이미지의 적절한 로딩 전략은 쇼핑몰 속도, 웹성능 및 온라인 쇼핑몰의 검색 엔진 최적화(SEO)에 큰 기여를 합니다. 따라서, 최적화와 사전로드를 통해 LCP 이미지의 로딩을 개선하는 것은 온라인 쇼핑몰 운영에 있어 매우 중요합니다.
'E-커머스 쇼핑몰 운영' 카테고리의 다른 글
| [온라인 쇼핑몰 속도 최적화] 효율적인 이미지 인코딩 (0) | 2024.02.16 |
|---|---|
| [온라인 쇼핑몰 속도 최적화] 애니메이션 콘텐츠에 비디오 형식 사용 (0) | 2024.02.16 |
| [온라인 쇼핑몰 속도 최적화] 가장 큰 콘텐츠가 포함된 페인트 이미지 미리 로드 (0) | 2024.02.14 |
| [온라인 쇼핑몰 속도 최적화] 적절한 크기의 이미지 (0) | 2024.02.14 |
| [온라인 쇼핑몰 속도 최적화] 차세대 형식의 이미지 제공 (0) | 2024.02.14 |