✍ 목 차
1. 레이아웃 이동이 페이지 성능에 미치는 영향
2. 대규모 레이아웃 변경을 피하는 방법
2-1 이미지 크기 지정
2-2 광고, 삽입 및 iframe으로 인한 레이아웃 이동 감소
2-3 기존 콘텐츠 위에 새로운 콘텐츠 삽입 방지
2-4 FOIT(Invisible Text) 플래시 방지
2-5 합성되지 않은 애니메이션 피하기
대규모 레이아웃 변경은 웹 페이지 성능에 영향을 미치며, 사용자 경험과 검색 엔진 최적화에도 영향을 미칩니다.
우리 쇼핑몰 속도를 사용하여 대규모 레이아웃 변경을 최소화하는 방법은 뷰포트 내에서 요소의 위치를 변경하거나 CSS 트랜지션 및 애니메이션을 사용하는 것입니다. 이러한 변경을 최소화하면 페이지 성능이 향상되고, 사용자 경험이 개선됩니다.
대규모 레이아웃 변경은 웹 페이지가 로드된 후에 화면의 디자인이 크게 바뀌는 것을 의미합니다. 이것은 사용자 경험에 부정적인 영향을 미칠 수 있습니다.
💡 레이아웃 이동은 페이지 성능에 어떤 영향을 줍니까?
웹페이지 방문 시, 사용자는 일반적으로 버튼, 문의 양식, 이미지, 비디오 또는 기타 유형의 콘텐츠와 빠르게 상호작용하려 합니다. 때로는 무언가를 클릭하거나 탭하려 할 때 화면이 아래로 이동하여 결국 다른 것을 클릭하거나 탭하게 될 수 있습니다.
'레이아웃 전환'은 특히 모바일 기기에서 웹사이트와 상호작용하는 방식에 영향을 미칩니다.
CLS 점수가 낮으면 페이지가 시각적으로 불안정함을 나타냅니다(업계에서는 '버벅거림'이라고 함)
CLS는 성능 점수에 큰 영향을 미치지 않지만(단 5%), Web Vitals에 포함된다는 것은 페이지 경험을 반영하는 유용한 측정항목으로서 CLS의 중요성을 의미합니다.
레이아웃 이동은 웹 페이지에서 요소의 크기, 위치 또는 스타일을 변경할 때 발생하는 일입니다. 이 작업은 브라우저에게 해당 요소와 다른 요소들 사이의 관계를 재계산하고 페이지를 다시 그리도록 요청합니다.
이로 인해 다음과 같은 문제가 발생할 수 있습니다:
▶ 성능 저하 : 레이아웃 이동은 브라우저의 계산 작업을 요구하므로 성능을 저하시킬 수 있습니다. 특히 페이지에 많은 요소가 있는 경우에 영향이 더 커집니다.
▶ 화면 깜빡임 : 레이아웃 이동이 발생하면 화면이 깜빡일 수 있습니다. 이것은 사용자 경험을 저하시키는 요인 중 하나입니다.
▶ CPU 부하 : 레이아웃 이동은 CPU 자원을 많이 사용할 수 있으며, 이로 인해 브라우저 및 디바이스 성능이 저하될 수 있습니다.
▶ 애니메이션 문제 : 웹 페이지에서 애니메이션을 사용하는 경우, 레이아웃 이동은 애니메이션의 부드러운 진행을 방해할 수 있습니다.
💡 대규모 레이아웃 변경을 피하는 방법은 무엇입니까?
다음과 같은 우수 사례를 개발 워크플로에 통합하여 대규모 레이아웃 변경을 방지합니다.
1) 이미지 크기 지정
웹사이트의 이미지 및 비디오 요소에 대해 너비와 높이를 모두 지정하여 이미지/비디오에 올바른 간격이 사용되도록 합니다. 또는 CSS 종횡비 상자를 사용하여 동일한 작업을 수행할 수 있습니다. 자세한 내용 은 이 문서를 참조하십시오 .
2) 광고, 삽입 및 iframe으로 인한 레이아웃 이동 감소
광고, 삽입 및 iframe으로 인한 레이아웃 이동을 줄이려면 다음과 같이 합니다.
▶ 광고 슬롯 크기(가장 큰 것)를 예약하고 광고 라이브러리를 로드하기 전에 크기를 지정합니다.
▶ 광고를 하단 또는 표시 영역 밖으로 이동합니다.
▶ 표시할 광고가 없는 경우 자리 표시자를 사용합니다.
3) 기존 콘텐츠 위에 새로운 콘텐츠 삽입 방지
사용자 상호 작용에 대한 응답이 아닌 한 기존 콘텐츠 위에 동적 콘텐츠(예: 배너, 양식 등)를 삽입하지 마십시오. 이는 예기치 않은 레이아웃 변경을 방지하는 데 도움이 됩니다.
4) FOIT(Invisible Text) 플래시 방지
FOIT(Flash of Invisible Text) 문제는 페이지의 CLS에도 영향을 줄 수 있습니다.
웹 글꼴을 미리 로드하거나 font-display 속성을 사용하여 웹 글꼴을 로드하는 동안 텍스트가 계속 표시되도록 합니다.
5) 합성되지 않은 애니메이션 피하기
가능한 경우 합성 애니메이션만 수행 하여 기본 스레드 작업 을 줄이고 페이지 로드 중에 픽셀을 다시 그리는 것을 방지합니다.
'E-커머스 쇼핑몰 운영' 카테고리의 다른 글
| [온라인 쇼핑몰 속도 최적화] 가장 큰 콘텐츠 렌더링 시간(LCP) (1) | 2024.10.13 |
|---|---|
| [온라인 쇼핑몰 속도 최적화] 누적 레이아웃 이동(CLS) (0) | 2024.10.13 |
| [온라인 쇼핑몰 속도 최적화] 과도한 DOM 크기 피하기 (0) | 2024.03.27 |
| [온라인 쇼핑몰 속도 최적화] CSS스프라이트를 사용하여 이미지 결합 (0) | 2024.03.26 |
| [온라인 쇼핑몰 속도 최적화] 언로드 이벤트 리스너 피하기 (0) | 2024.03.26 |