누적 레이아웃 변경(Cumulative Layout Shift)은 핵심 웹 바이탈(Core Web Vital) 지표입니다. 사용자가 웹사이트와 상호 작용하지 않았는데도 레이아웃이 예기치 않게 변경되는 횟수가 시각적 안정성 수준을 나타냅니다. 페이지 콘텐츠가 변경될 때마다, 링크를 클릭하는 등의 행위와 관계없이 레이아웃이 변경된 것으로 간주됩니다.
누적 레이아웃 변경 점수는 이러한 모든 변경 사항을 합산하여 결정됩니다.
누적 레이아웃 이동이란 무엇입니까?
가장 많이 보고되는 문제는 사진 로딩 지연입니다 CLS . 텍스트가 미디어 요소보다 먼저 로드되는 현상이 흔히 발생합니다. 또한, 모든 그래픽 구성 요소가 완전히 로드된 후에도 웹 페이지 구조가 변경되는 경우가 있습니다. 이러한 현상은 스크롤 여부와 관계없이 발생합니다.
웹페이지의 CLS 점수가 높더라도 페이지 로딩이 완료되었는지 확인하기 어려울 수 있습니다. 웹사이트의 복잡성과 미디어 콘텐츠 양이 많을수록 사용자가 레이아웃 변경을 경험할 가능성이 높아집니다.
워드프레스에서 누적 레이아웃 이동을 줄이는 방법은 무엇일까요?
구글 웹 바이탈 CLS 디버거를 활용하는 것이 웹사이트의 높은 CLS 점수에 기여하는 요소를 파악하는 가장 효과적인 방법입니다. 이 도구는 웹사이트의 모든 회전 요소를 보여주는 GIF 이미지를 제공합니다. 높은 CLS 점수는 대부분 광고와 미디어 콘텐츠 덕분입니다. CLS 점수를 높이려면 각 요소를 최적화해야 합니다.
이를 위해 웹사이트의 CLS 점수를 향상시키는 데 사용할 수 있는 몇 가지 방법은 다음과 같습니다
1. 모든 미디어 파일에 크기 속성을 추가합니다
웹 브라우저는 이미지를 로드한 후 크기와 레이아웃 방향을 확인해야 하므로, 속성이 불분명한 미디어 파일을 업로드하면 레이아웃이 변경될 가능성이 높아집니다. 특히 큰 사진이나 고화질 파일은 작은 파일보다 이러한 문제가 발생할 확률이 더 높습니다. 이미지 크기를 조정하세요 워드프레스 미디어 편집기에서
2. 글꼴이 로컬에 로드되었는지 확인하십시오
글꼴을 불러오는 동안에도 텍스트는 계속 표시되어야 합니다. 따라서 이를 위해서는 타사에서 글꼴을 호스팅하는 웹사이트에서 가져오는 대신 글꼴을 로컬에서 불러오는 것이 가장 먼저 해야 할 일입니다.
3. FOIT와 FOUT를 피하세요
현상 보이지 않는 텍스트가 잠깐 나타나는 (FOIT)은 대체 글꼴이 지정되지 않았을 때 발생합니다. 이로 인해 웹 브라우저가 글꼴을 로드하거나 대체 글꼴을 찾는 동안 텍스트가 표시되어야 할 자리에 빈 공간이 나타납니다.
스타일이 적용되지 않은 텍스트가 잠깐 표시되는 현상(FOUT, Flash of Unstyled Text)이 발생할 때 웹 브라우저는 사용자가 선택한 글꼴을 불러올 때까지 기본 글꼴을 사용합니다. 이 문제를 해결하려면 `font-display: switch` 속성을 추가하면 됩니다.
에서 이와 같은 글을 더 읽어보실 수 있습니다 Seahawk Media 블로그.
