WordPress에서 누적 레이아웃 이동(CLS)을 줄이는 방법

검색 엔진 최적화(SEO)는 사용 설명서 없이 끊임없이 변화하는 게임입니다. 콘텐츠에 키워드를 추가하는 것보다 최적화에 더 많은 것이 있습니다. Google과 같은 검색 엔진은 사이트 로드 속도, 방문자가 사이트와 상호 작용하기 쉬운 정도 등과 같은 품질의 안전한 웹 경험 지표도 고려합니다.

CLS(Cumulative Layout Shift)는 웹 페이지가 로드될 때 재정렬되는 정도를 측정하기 위해 Google에서 사용하는 측정항목입니다. 사용자가 잘못된 링크를 클릭하거나 콘텐츠를 읽는 데 문제가 발생하도록 크게 움직이는 사이트는 나쁜 사용자 경험을 제공하고 Google에서 눈살을 찌푸리게 합니다.

사이트의 CLS 점수 및 기타 핵심 성능 평가를 검토하면 전반적인 상태를 개선하고 순위를 높일 수 있는 방법을 식별하는 데 도움이 될 수 있습니다!

이 문서에서는 CLS의 원인, 최소화해야 하는 이유 및 이를 줄이는 몇 가지 방법에 대해 설명합니다.

누적 레이아웃 이동이란 무엇입니까?

CLS(Cumulative Layout Shift)는 자산이 로드될 때 웹 페이지에서 이동의 심각도를 측정합니다. 웹 사이트를 열 때 이미지와 비디오가 다른 시간에 나타나고 로드될 때 다른 콘텐츠를 밀어내는 경우가 있다는 것을 눈치채셨을 것입니다.

여기에서 CLS가 작동하는 것을 볼 수 있습니다.

특히 긴 로드 시간과 함께 나쁜 CLS 점수는 방문자를 실망시킬 수 있습니다. 페이지가 갑자기 커서 아래로 이동했기 때문에 실수로 광고를 클릭하는 것보다 더 고통스러운 일은 거의 없습니다.

CLS는 WordPress 사이트의 사용자 경험에 어떤 영향을 줍니까?

웹 페이지를 탐색할 때 이동이 성가실 수 있습니다. 텍스트를 읽으려고 할 때 이리저리 이동하고 버튼을 클릭할 때 이동하며 다른 항목과 상호 작용하려고 할 때 광고나 링크를 실수로 클릭할 수 있습니다.

방문자가 페이지가 완전히 로드될 때까지 몇 초를 기다려야 하고 변화하는 요소와 싸워야 하는 경우 방문자는 단순히 사이트를 떠날 수 있습니다. 모든 페이지가 심하게 이동하는 경우 특히 그렇습니다. 방문자는 몇 번의 잘못 클릭이나 과도한 대기 시간 후에 이탈할 가능성이 높습니다.

CLS 점수에 영향을 주는 것은 무엇입니까?

낮은 CLS 점수는 페이지에 다른 시간에 로드되는 주요 사이트 요소로 인해 발생합니다. 사진, 동영상, 광고는 종종 텍스트보다 느리게 로드되고 화면 크기에 따라 조정해야 할 수 있기 때문에 최악의 원인이 되는 경향이 있습니다.

로드 시간을 줄이면 전체 UX가 향상될 수 있지만 실제로 이동하는 양은 줄어들지 않고 효과만 완화됩니다.

다음은 CLS 점수에 영향을 줄 수 있는 5가지 요소입니다.

1. 크기 속성이 없는 이미지 및 비디오

미리 설정된 크기 속성이 없으면 이미지 및 비디오와 같은 시각적 콘텐츠가 종종 더 작은 자리 표시자에 로드됩니다. 이 설정으로 인해 자리 표시자 주변의 콘텐츠가 로드될 수 있습니다. 그런 다음 이미지가 도착하면 더 많은 공간을 차지하고 인접 요소 주위로 이동합니다.

크기 속성을 설정하면 자리 표시자가 요소와 동일한 공간을 차지합니다. 따라서 동일한 영역에 로드되며 주변 콘텐츠의 배치에 영향을 미치지 않습니다.

다음 그림에서 GameStop 홈페이지에 로드되는 초기 요소를 볼 수 있습니다.

이미지는 몇 초 후에 로드되어 Top Sellers가 아래로 내려가 시야에서 사라집니다. 이것은 느린 로딩 이미지가 미리 설정된 경계 없이 채워질 때 빠르게 로딩되는 텍스트가 움직이는 대표적인 예입니다.

이 시나리오는 바로 사이트에서 피하거나 최소화하려는 것입니다.

2. 크기 속성이 없는 광고 및 삽입

웹사이트에서 광고를 판매하거나 표시하는 경우 광고는 이미지 또는 동영상 형식일 가능성이 높습니다. 위의 예에서와 같이 이러한 광고가 크기 속성 없이 로드되면 다른 콘텐츠보다 늦게 페이지에 도달하여 상황이 바뀔 수 있습니다.

이는 귀하를 위해 광고를 선택하는 일부 타사 서비스에 특히 해당됩니다. 이러한 광고는 항상 같은 크기이거나 같은 공간에 맞지 않을 수 있습니다.

작은 그래픽은 문제가 되지 않을 수 있습니다. 그러나 큰 동영상 광고가 느리게 로드되고 많은 공간을 차지하는 경우 페이지의 다른 요소가 크게 움직일 수 있습니다.

광고 및 포함된 콘텐츠를 빠르게 로드하도록 최적화하면 CLS 점수가 여전히 떨어질 수 있지만 성가심을 줄일 수 있습니다. 방문자가 의도하지 않게 사이트의 광고를 클릭하도록 하는 레이아웃 전환은 사용자가 속았다는 느낌을 갖게 하고 재방문 가능성을 떨어뜨릴 수 있습니다.

3. 사용자 정의 글꼴

사용자 정의 글꼴은 일반적으로 웹 서버에 저장됩니다. 블로그나 웹사이트에 더 많은 사용자 지정 옵션을 제공할 수 있지만 기존 텍스트 위에 로드해야 하는 경우가 많습니다.

예를 들어 오프라인에서는 Didot 글꼴을 볼 수 없을 것입니다(오래된 프랑스어 책을 찾지 않는 한). 이 글꼴은 형식적이고 우아한 느낌을 제공하며 고급 레스토랑이나 골동품 관련 웹사이트에 탁월한 옵션입니다.

그러나 이 글꼴이 서버에서 호스팅되는 경우 방문자가 사이트에 액세스할 때 각 방문자의 브라우저에 다운로드해야 합니다. 이 설정은 글꼴을 다운로드할 때까지 텍스트가 나타나지 않을 수 있습니다. 그런 다음 모든 글꼴이 갑자기 나타나 페이지에 이미 로드된 자산을 뒤섞을 수 있습니다.

또 다른 옵션은 모든 텍스트를 Serif와 같은 보다 기본적인 글꼴로 로드하는 것입니다. 그런 다음 브라우저에 로드되면 Didot로 대체됩니다. 다른 글꼴의 문자는 일반적으로 같은 양의 공간을 차지하지 않기 때문에 글꼴 변경은 텍스트를 이동하여 프로세스에서 인접한 요소를 밀거나 당깁니다.

이러한 교대는 CLS 점수를 높이므로 피하는 것이 가장 좋습니다. 운 좋게도 일부 해결 방법을 사용하면 로드 시간 지연을 해결하는 동안 사용자 정의 글꼴을 계속 사용할 수 있습니다. 이 방법에 대해서는 나중에 포스트에서 자세히 살펴보겠습니다.

4. 합성되지 않은 애니메이션

합성되지 않은 애니메이션은 많은 리소스를 필요로 하며 브라우저에서 한 번 이상 렌더링해야 합니다. 덜 까다로운 애니메이션을 사용하거나 편리한 시간에 로드하도록 애니메이션을 전략적으로 배열하여 이 문제를 완화할 수 있습니다.

브라우저가 기본 수준에서 웹 사이트를 로드할 때 시각적 개체를 렌더링하고 페이지에 "페인트"해야 합니다. 이 프로세스는 각 픽셀에 표시할 색상을 "알립니다". 불행히도 합성되지 않은 애니메이션으로 인해 렌더링 프로세스가 다시 시작될 수 있습니다.

결과는 부분적으로 로드된 페이지입니다. 브라우저는 이미 일부 작업을 수행한 다음 애니메이션이 트리거되어 강제로 다시 시작하고 모든 것을 다시 렌더링합니다. 이 프로세스는 특정 요소를 여러 번 렌더링해야 하고 레이아웃 변경을 유발할 수 있으므로 로드 시간을 연장합니다.

5. 동적으로 주입된 콘텐츠

동적으로 주입된 콘텐츠는 특정 요소에 따라 변경되는 웹 페이지 요소입니다. 종종 이러한 요소는 사용자에 따라 달라지므로 보다 개인화된 경험을 제공할 수 있습니다.

예를 들어, 온라인 상점은 방문자의 이력을 기반으로 제품을 제안할 수 있습니다. 날씨 웹사이트는 사용자 장치의 위치 데이터를 사용하여 해당 지역에 대한 결과를 표시할 수 있습니다.

동적 콘텐츠는 보다 관련성 높은 경험과 제품 제안으로 전환을 증가시킬 수 있습니다. 그러나 반동적인 성격은 리소스를 많이 소모하고 레이아웃 변경으로 이어질 수 있습니다.

위의 날씨 예에서와 같이 다양한 날씨 정보, 도시 이름 또는 사용된 언어도 페이지에서 다양한 양의 공간을 차지합니다. 맑은 하늘과 온화한 날씨가 있는 도시는 다가오는 허리케인의 조준선에 있는 도시보다 훨씬 더 간단한 진입점일 수 있습니다.

그 결과 전자의 예에서는 더 적은 콘텐츠가 로드되고 후자는 더 많이 로드되어 화면에서 인접 요소가 이동하는 방식에 영향을 줍니다. 크기나 양이 다양할 수 있는 동적으로 삽입된 모든 콘텐츠와 마찬가지로 이는 페이지의 CLS에 영향을 미칩니다.

WordPress에서 누적 레이아웃 이동을 줄이는 방법

WordPress의 레이아웃 변경에 대한 주요 기여자를 알았으므로 이제 그 영향을 줄이기 위해 노력할 수 있습니다.

웹사이트를 근본적으로 변경할 때마다 백업을 만들고 스테이징 사이트를 사용하여 문제가 발생하기 전에 문제를 파악하는 것이 좋습니다.

아래에서 CLS를 줄이고 사이트의 사용자 경험을 개선하는 솔루션을 찾을 수 있습니다.

1. Core Web Vitals용으로 설계된 플러그인 설치

핵심 성능 보고서는 세 가지 측정항목을 살펴봅니다.

• 누적 레이아웃 시프트(CLS)
• 첫 번째 입력 지연(FID)
• 최대 함량 페인트(LCP)

Jetpack Boost를 사용하면 WordPress 대시보드에서 직접 Core Web Vitals 및 기타 성능 지표를 모니터링하고 개선할 수 있습니다.

웹사이트를 스캔하고 개선할 영역이 포함된 성능 보고서를 반환합니다. 그러나 사이트 속도를 늦추고 사용자 경험을 손상시킬 수 있는 일반적인 문제에 대한 원클릭 솔루션으로 권장 사항을 뛰어넘습니다.

2. 이미지 및 비디오의 크기 설정

페이지의 다른 요소와 함께 이미지 및 비디오를 사용할 때 너비 및 높이 속성을 할당하는 것을 고려하십시오. 이러한 설정은 그래픽에 필요한 공간을 확보하고 이동을 방지합니다.

다행히 WordPress에서 치수를 설정하는 것은 매우 쉽습니다. 포함된 이미지를 클릭하고 이미지 크기 를 적절한 값으로 조정하기만 하면 됩니다.

또한 가로 세로 비율 상자를 사용하여 CSS가 로드되기 전에 시각적 요소를 위한 공간을 할당할 수 있습니다. 이 상자는 설정된 치수와 동일한 효과를 가지며 이미지 및 비디오를 위한 공간을 미리 할당하여 레이아웃 이동을 줄입니다.

3. 광고 및 포함된 콘텐츠의 크기 설정

위의 단계와 마찬가지로 페이지 이동을 유발할 수 있는 광고 및 기타 포함된 콘텐츠를 위한 공간을 만드는 것을 고려해야 합니다. 이러한 요소의 치수를 설정하거나 CSS를 사용하여 공간을 할당하면 됩니다.

광고가 제3자에 의해 채워지면 그 크기를 예측하기 어려울 수 있습니다. 따라서 광고가 로드될 때 다른 콘텐츠가 겹치지 않도록 따로 보관할 공간을 예상하고 상자에 넣을 수 있습니다.

이 설정으로 인해 작은 광고 주위에 추가 공백이 생길 수 있습니다. 그래도 일반적으로 페이지의 다른 요소를 극적으로 이동시키는 대형 광고(로드하는 데 시간이 오래 걸리는 경우가 많음)보다 낫습니다.

4. 사용자 정의 글꼴을 로컬로 호스팅하고 미리 로드

이전에 사용자 정의 글꼴과 이러한 글꼴이 이동을 일으키는 방법에 대해 논의했습니다. 다행스럽게도 이러한 글꼴을 서버에서 로컬로 호스팅하여 문제를 방지할 수 있습니다.

google-webfonts-helper로 이동하여 왼쪽 옵션에서 사용하려는 글꼴을 선택하면 됩니다.

그런 다음 사용하려는 옵션(대부분의 경우 기본값)을 선택하고 3단계의 Best Support 선택 항목에서 CSS를 복사합니다.

이 코드를 CSS 파일에 붙여넣습니다. 귀하의 사이트는 방문자가 이미 글꼴을 가지고 있는지 확인합니다. 그렇지 않은 경우 웹사이트는 서버에서 로드하므로 웹의 다른 곳에서 가져오는 것보다 빠릅니다.

WordPress에서 글꼴을 미리 로드하는 가장 쉬운 솔루션은 Google 글꼴 타이포그래피 플러그인입니다. 이 도구는 추가 글꼴 옵션을 제공하고 지연을 최소화하고 CLS를 방지하기 위해 더 효율적으로 로드합니다.

다른 솔루션은 더 기술적이고 자산이 사이트에 로드되는 순서를 다시 정렬해야 합니다. 이 방법은 웹 글꼴 파일을 로딩 순서에 먼저 삽입하여 필요할 때 준비되도록 합니다. 그러나 이 프로세스에는 일반 WordPress 사용자에게 약간 고급일 수 있는 사용자 정의 코딩이 필요합니다.

5. 동적으로 삽입된 콘텐츠에 대한 자리 표시자 설정

동적으로 삽입된 콘텐츠는 유용한 기능이 될 수 있지만 레이아웃 변경을 일으키지 않도록 전략적으로 구현해야 합니다. 핵심은 주변 요소가 넘치거나 이동하지 않고 주입된 콘텐츠의 가장 큰 버전에 맞도록 충분한 공간을 할당하는 것입니다.

주입된 모든 콘텐츠를 가능한 한 동일한 크기 또는 유사하게 만들어 이 프로세스를 단순화할 수 있습니다. 이 설정은 페이지에 다른 양의 공간이 필요한 다른 결과를 방지할 수 있습니다.

공간을 할당하는 실제 방법은 내용과 주입 방식에 따라 다릅니다. 그러나 일반적으로 로드되는 자산에 대해 고정 위치와 사전 설정 경계를 추가해야 합니다.

6. 애니메이션용 Elementor 플러그인용 해피 애드온 사용

애니메이션은 긴 로드 시간을 유발하고 CLS 점수를 손상시킬 수 있지만 때로는 웹 페이지에서 필수적인 요소입니다.

애니메이션을 계속 사용하고 싶다면 Elementor 플러그인용 Happy Addons를 사용하여 애니메이션을 안전하게 삽입하고 로딩 문제를 방지하는 것을 고려할 수 있습니다.

이 플러그인은 CSS를 처리하여 가능할 때마다 애니메이션 속성을 변환하고 변환합니다. Happy Addons는 이 프로세스를 최적화하여 로딩 시간을 최소화하고 웹사이트에서 이동의 영향을 줄입니다. 게다가 무료로 사용할 수 있습니다!

WordPress 사이트의 CLS 점수는 어떻게 측정합니까?

CLS는 웹 사이트의 핵심 성능 보고서의 중요한 부분이므로 대부분의 사이트 상태 보고서 또는 모니터링 도구에서 CLS를 강조 표시합니다. 다음은 사이트의 CLS 점수를 확인하기 위한 최상의 옵션입니다.

1. PageSpeed ​​인사이트

PageSpeed ​​Insights는 핵심 성과 보고서를 제공하는 간단한 리소스입니다. URL을 입력하기만 하면 여러 구성요소를 분석하고 점수를 매기고 개선을 위한 팁을 제공합니다.

PageSpeed ​​Insights는 모바일 및 데스크톱 장치에 대한 보고서를 실행할 수 있으므로 모든 유형의 방문자에 대해 웹사이트의 약점을 식별할 수 있습니다. 사이트의 성능 문제를 시각적으로 자세히 분석한 트리맵을 볼 수도 있습니다.

2. 구글 서치 콘솔

Google Search Console은 검색 결과와 관련하여 사이트 상태에 중점을 둔 Google의 보고서 생성기입니다. PageSpeed ​​Insights와 마찬가지로 FID, LCP 및 CLS와 같은 측정항목을 사용하여 사이트의 모바일 및 데스크톱 버전에 대한 보고서를 볼 수 있습니다.

Google Search Console을 사용하려면 먼저 도메인 소유권을 확인해야 합니다. 그런 다음 보고서는 사이트의 저조한 측면에 플래그를 지정하여 이를 정확히 찾아 해결할 수 있습니다.

3. 등대

페이지 품질을 평가하는 또 다른 Google 도구는 Lighthouse이며 Google Chrome 브라우저를 사용하는 사람이라면 누구나 쉽게 사용할 수 있습니다. 접근성, 성능, SEO 등을 위해 실시간으로 웹사이트를 모니터링합니다.

Google Chrome 브라우저 설정으로 이동하여 기타 도구 위로 마우스를 가져간 다음 하단에서 개발자 도구 를 선택하여 Lighthouse를 찾을 수 있습니다.

그런 다음 상단의 메뉴를 확장하고 Lighthouse 를 선택해야 합니다. 여기에서 현재 보고 있는 페이지에 대한 보고서를 실행할 수 있습니다.

원하는 옵션을 선택하고 보고서 생성 버튼을 클릭하기만 하면 됩니다.

각 기본 측정항목의 상단에 색상으로 구분된 점수가 표시됩니다. 그런 다음 각각을 클릭하고 아래로 스크롤하여 자세한 분석 및 개선 기회를 확인하십시오.

지금 내 CLS 점수를 어떻게 쉽게 최적화할 수 있습니까?

위의 도구와 팁을 사용하여 CLS를 포함한 핵심 성능 향상의 약점을 식별할 수 있습니다. 이러한 문제 중 일부를 수정하기 시작하면 사이트 상태가 개선되고 향후 유사한 문제를 방지하는 방법을 배울 수 있습니다.

WordPress 사이트에 Jetpack Boost 플러그인을 설치하는 것은 시작하기에 좋은 방법입니다. 이 도구는 사용하기 쉽고 CLS 점수를 즉시 향상시키는 데 도움이 될 수 있습니다.

위의 다른 솔루션을 활용하면 CLS 점수가 양호한 상태로 유지되어 사이트의 SEO 및 UX가 향상됩니다. 보고서를 사용하여 모든 것이 녹색으로 돌아올 때까지 LCP 및 FID와 같은 다른 Web Vitals 점수를 타겟팅할 수도 있습니다!

Jetpack Boost 시작하기

시작하려면 WordPress 플러그인 페이지(무료)에서 Jetpack Boost를 설치하기만 하면 됩니다.

도구가 활성화되면 대시보드 왼쪽에 있는 Jetpack 탭에서 Boost 를 선택합니다.

이제 모바일 및 데스크톱 장치에서 사이트에 대한 성능 점수가 표시됩니다.

페이지 아래에서 CSS 로딩, 비필수 자바스크립트 지연, 지연 이미지 로딩과 같은 추가 성능 최적화 설정을 켤 수 있습니다. 이러한 각 구성은 핵심 성능 평가 점수를 향상시킬 수 있습니다.

자주 묻는 질문

다음은 다이빙을 할 때 유용할 수 있는 WordPress의 CLS에 대한 몇 가지 자주 묻는 질문과 답변입니다.

좋은 CLS 점수는 무엇입니까?

0.1 미만이면 좋은 CLS 점수로 간주됩니다.

이 숫자는 원래 로드 사이트와 요소의 최종 배치 간의 차이입니다. 점수는 누적됩니다. 즉, 다른 요소의 여러 인스턴스를 사용합니다.

0.1에서 0.25 사이의 점수는 정상으로 간주되며 개선이 필요합니다. 0.25 이상의 모든 점수는 좋지 않습니다. 그들은 CLS가 사이트의 유용성에 부정적인 영향을 미치고 있다고 제안합니다.

레이아웃 변경이 불가피한 경우에는 어떻게 합니까?

때로는 지식이 부족하거나 단순히 페이지 요소의 특성으로 인해 레이아웃 변경이 불가피할 수 있습니다. 괜찮아요!

여기저기서 약간의 레이아웃 변경이 사이트에 큰 영향을 미치지 않아야 합니다. 결국 CLS는 페이지 전체에서 컴파일된 등급입니다. 점수가 평평한 0이 아니더라도 몇 가지 사소한 경우에도 여전히 좋은 전체 점수를 줄 수 있습니다.

일부 페이지에서는 시프트가 단순히 해결되지 않을 수 있습니다. 다시 말하지만, 사이트의 전체 UX에 있는 사소한 흠은 우려할 만한 주요 원인이 되어서는 안 됩니다.

사용자 상호 작용이 누적 레이아웃 이동에 영향을 줍니까?

아니! 레이아웃 이동을 트리거하는 사용자 활동은 CLS에 덜 영향을 미치고 결과가 작업 후 빠르게 로드되는 경우 등록되지 않는 것으로 여겨집니다. 가변 콘텐츠를 로드하기 전에 사용자 작업을 요구하는 것은 실제로 일부 상황에서 CLS를 방지하는 데 도움이 되는 유용한 트릭이 될 수 있습니다.

예를 들어 동적으로 주입된 콘텐츠를 사용하여 방문자를 위해 근처 상점의 지도를 로드한다고 가정해 보겠습니다. 이것이 자동으로 발생하면 사용자의 위치 데이터를 가져오고 지도를 로드하는 시간으로 인해 레이아웃이 변경될 수 있습니다. 그러나 사용자가 지도를 로드하기 위해 클릭해야 하는 버튼이 있는 경우 이 상호 작용은 레이아웃 전환이 페이지의 CLS 점수에 영향을 미치지 않도록 합니다.

WordPress의 누적 레이아웃 이동 개선

이제 WordPress에서 CLS(Cumulative Layout Shift)를 수정하는 방법과 이를 측정하는 방법을 알았으므로 웹사이트의 SEO 및 UX를 개선할 수 있습니다. 이동을 줄이면 방문자가 웹 사이트를 더 즐겁게 탐색할 수 있으며 검색 엔진 결과 페이지의 순위도 높아집니다.

CLS 점수를 최소화하려면 다음을 기억하십시오.

1. Jetpack Boost와 같은 핵심 웹 바이탈 플러그인을 설치합니다.
2. 이미지, 비디오, 광고 및 기타 포함된 콘텐츠의 크기를 설정합니다.
3. 웹 글꼴을 로컬로 호스팅하고 미리 로드합니다.
4. 동적으로 삽입된 콘텐츠에 대한 자리 표시자를 설정합니다.
5. 애니메이션용 Elementor 플러그인용 Happy Addons를 사용하십시오.

누적 레이아웃 이동은 사이트의 SEO에 영향을 미치는 한 가지 요소일 뿐이지만 눈에 띄는 UX 고려 사항이기도 합니다. 약간의 작업으로 검색 순위와 방문자가 도착한 후 방문자 경험이 지속적으로 향상될 수 있습니다.