WordPress의 CLS(누적 레이아웃 이동): 제거 방법

누적 레이아웃 이동에 대한 이 장을 통해 WordPress 사용자를 위한 핵심 성능 보고서에 대한 미니 시리즈의 끝이 가까워지고 있습니다. Largest Contentful Paint 및 First Input Delay에 대한 이전 장에서 이러한 용어의 정확한 의미와 각 용어에 대해 웹 사이트를 최적화하는 방법에 대해 이미 이야기했습니다. 이제 CLS에 대해서도 동일한 작업을 수행하려고 합니다.

다음에서는 누적 레이아웃 이동이 정확히 무엇인지, 계산 방법, 이 영역에서 웹 사이트의 성능을 테스트하는 방법 및 목표로 삼을 좋은 가치에 대해 설명합니다. 그런 다음 WordPress 사이트에 존재할 수 있는 CLS 문제를 개선하기 위한 단계별 지침을 제공합니다.

완료되면 이 시리즈의 다른 두 게시물과 함께 귀하의 웹사이트를 Google의 승인 스탬프에 맞게 만들 준비가 되셨기를 바랍니다.

누적 레이아웃 이동의 의미는 무엇입니까?

늘 그렇듯이 정의부터 시작하겠습니다. 한마디로 CLS는 사용자 상호 작용 없이 페이지의 요소를 이동(또는 이동)시키는 웹 페이지의 변경 사항을 측정합니다.

읽고 있는 기사의 양식이나 광고가 늦게 로드되어 읽고 있는 단락 아래로 이동하여 제자리를 다시 찾으려면 스크롤해야 할 수 있습니다. 또는 부적절한 순간에 버튼이나 링크의 위치를 ​​변경하여 원하지 않는 항목을 클릭하게 됩니다.

결과적으로 약간 성가신 것에서 노골적인 분노에 이르기까지 무엇이든 될 수 있습니다. 누적 레이아웃 이동은 문제를 이해하고 수정할 수 있도록 이 동작을 캡처하는 메트릭입니다.

왜 중요 함?

불안정한 웹 사이트는 현재 하고 있는 일을 완전히 방해하고 성가신 실제 결과를 초래할 수도 있습니다. 상상할 수 있듯이 이는 사용자 경험에 정말 좋지 않으며 방문자가 떠나게 할 수 있습니다. 이는 화면 크기로 인해 작은 변화가 데스크톱 컴퓨터보다 더 큰 영향을 미치는 스마트폰에서 특히 그렇습니다.

너무 파괴적이기 때문에 Google은 이 측정항목에 많은 초점을 두어 웹사이트를 판단하는 핵심 가치 중 하나로 만듭니다. 따라서 방문자와 검색 결과에 표시되는 위치를 결정하는 사람(즉, 로봇)을 모두 만족시키려면 웹 사이트에서 누적 레이아웃 이동을 제거하기 위해 최선을 다하십시오.

CLS의 원인은 무엇입니까?

웹 사이트 요소가 이동하는 원인은 일반적으로 웹 페이지의 파일이 다른 속도로 로드되기 때문입니다. 또 다른 요소는 페이지 로드 도중 또는 이후에 동적으로 추가되는 페이지 요소입니다. 일반적인 예는 다음과 같습니다.

• 크기가 올바르게 정의되지 않은 이미지 또는 동영상과 같은 시각적 개체
• 광고, 배너, 포함 또는 iframe과 같은 제3자 콘텐츠
• 처음에 표시된 대체 글꼴보다 작거나 큰 웹 글꼴

CLS의 또 다른 소스는 충돌하는 CSS 및 JavaScript 태그일 수 있습니다. 서로를 차단하면 웹 페이지 로딩 프로세스가 중단됩니다.

누적 레이아웃 이동은 어떻게 계산됩니까?

이전 버전과 달리 누적 레이아웃 이동의 계산은 조금 더 복잡합니다. 이를 이해하려면 먼저 몇 가지 용어를 정해야 합니다.

• 레이아웃 이동 — 페이지에 이미 표시된 요소가 이미 렌더링된 후 시작 위치에서 이동하는 경우입니다. 이러한 종류의 요소를 불안정한 요소 (크리에이티브, 알아요)라고 합니다.
• 예상 대 예상치 못한 레이아웃 이동 — 레이아웃 이동은 사용자가 기대하지 않는 경우에만 부정적입니다. 또한 웹 페이지와의 상호 작용 후(예: 양식 제출)와 같이 예상되고 환영받는 레이아웃 변경이 있습니다. CSS 애니메이션 및 전환은 예상되는 레이아웃 변경의 다른 예입니다. 이를 설명하기 위해 CLS는 예상되는 사용자 상호 작용의 500ms 이내에 발생하는 모든 레이아웃 변경을 고려합니다.
• Impact fraction — 움직이는 요소가 십진수로 영향을 미치는 뷰포트(화면에서 웹 사이트의 보이는 부분)의 비율(예: 화면의 50%에 영향을 미치는 경우 0.5).
• 거리 비율 — 교대 중에 불안정한 요소가 이동하는 화면의 백분율로 나타낸 거리입니다. 10진수로도 제공됩니다.
• 레이아웃 이동 점수 — 영향 비율에 거리 비율을 곱하여 계산합니다(예: 0.4 x 0.15 = 0.06). 결과적으로 멀리 이동하는 큰 요소는 짧은 거리를 이동하는 작은 요소보다 높은 점수를 얻습니다.

CLS는 5초 간격 동안 예기치 않은 레이아웃 이동 점수가 가장 많이 발생하는 항목을 캡처합니다. 당연히 낮을수록 좋습니다.

결국 세부 사항을 알 필요가 없습니다. 알아야 할 것은 CLS를 측정하는 방법과 사이트에서 추구해야 하는 가치입니다.

좋은 레이아웃 이동 점수는 무엇입니까?

좋은 점수는 CLS 값이 0.1 이하인 것입니다. 0.25까지는 개선이 필요하며 그 이상은 좋지 않으며 검색 성능이 저하될 수 있습니다.

누적 레이아웃 이동을 테스트하는 방법

웹사이트에서 CLS 점수를 향상시키려면 먼저 자신의 위치를 ​​알아야 합니다. 웹 페이지가 다른 장치에서 항상 동일한 방식으로 작동하는 것은 아니기 때문에 발생 여부를 알기 어렵습니다. 따라서 개발 사이트에서는 볼 수 없지만 방문자는 여전히 볼 수 있습니다. 따라서 테스트하는 것이 가장 좋습니다.

WordPress 사이트에서 누적 레이아웃 이동이 문제인지 확인하는 방법에는 여러 가지가 있습니다. 다른 Core Web Vitals 지표와 거의 동일합니다. 첫 번째 호출 포트는 항상 결과 페이지에 측정항목을 표시하는 PageSpeed ​​Insights여야 합니다.

실험실 결과와 Chrome 사용자 경험 보고서의 실제 데이터를 모두 사용합니다. 레이아웃 이동 및 소스 요소의 이미지도 표시됩니다. 그렇게 하면 문제가 무엇이고 어디서 발생하는지 더 잘 알 수 있습니다.

또한 PageSpeed ​​Insights는 각 요소가 CLS 점수에 기여하는 비율을 제공합니다. 이를 통해 가장 큰 부정적인 영향을 미치는 항목의 우선 순위를 지정할 수 있습니다.

그 외에도 다음을 사용할 수도 있습니다.

• Google Search Console 내부의 핵심 성능 보고서
• 크롬 브라우저 개발자 도구
• 등대
• 웹 바이탈 JavaScript 라이브러리

CLS Visualizer라는 Chrome 확장 프로그램도 있습니다. 웹 페이지에서 변화하는 요소를 강조 표시합니다. Firefox의 경우 SpeedVitals를 사용해 보십시오.

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

WordPress 사이트에서 CLS가 문제임을 알게 되면 문제를 해결하고 싶을 것입니다. 이것이 이 기사의 나머지 부분에 관한 것입니다.

미디어 차원 제공

위의 누적 레이아웃 이동 원인을 살펴보면 많은 솔루션이 이미 명확해졌습니다. 언급한 바와 같이 CLS의 일반적인 주범 중 하나는 정의된 width 및 height 값이 없는 이미지 및 기타 미디어입니다. 고정된 크기가 없으면 브라우저는 얼마나 많은 공간을 예약해야 하는지 알 수 없습니다. 지연 로딩과 같이 나중에 페이지에 표시되는 미디어의 경우 특히 그렇습니다.

안타깝게도 특정 이미지 크기를 지정하지 않는 것이 반응형 디자인의 일반적인 관행입니다. 대부분 이미지는 width 또는 max-width: 100%; 및 height: auto; . 그런 다음 이미지를 다운로드할 때 실제 크기를 파악하는 것은 브라우저에 달려 있습니다.

과거에는 그것이 종종 우리가 피하려고 하는 바로 그 유형의 행동으로 이어졌습니다. 이미지가 갑자기 나타나 다른 모든 것을 움직였습니다. 따라서 항상 시각적 개체의 크기 또는 최소한 CSS 종횡비를 제공해야 합니다.

다행스럽게도 WordPress를 사용하는 경우 웹사이트에서 자동으로 이미지 크기를 설정합니다. 따라서 일반적으로 문제가 발생하지 않습니다.

특정 이미지가 그렇지 않은 경우 Gutenberg 편집기에서 수정할 수 있습니다.

광고, 삽입 및 유사 콘텐츠 처리

페이지에 로드된 타사 콘텐츠는 종종 CLS의 가장 큰 소스 중 하나입니다. 최종 제품의 크기를 반드시 제어할 필요가 없는 경우입니다. 또한 게시자는 해당 콘텐츠가 표시되는 사이트에서 사용 가능한 공간이 얼마나 되는지 미리 알지 못합니다. 따라서 이미지와 같은 방식으로 크기를 선언해야 합니다.

다행스럽게도 WordPress 사용자에게는 Gutenberg 편집기를 사용하여 소셜 네트워크, 비디오 포털 또는 유사한 공급업체의 콘텐츠를 콘텐츠에 자동 삽입할 때 편집기가 자동으로 적절한 width 및 height 선언을 추가합니다.

이렇게 하면 콘텐츠가 페이지의 나머지 부분보다 로드하는 데 시간이 오래 걸리더라도 이미 올바른 크기가 예약되어 있습니다. 결과적으로 레이아웃이 나타날 때 이동하지 않습니다.

수동으로 추가하는 다른 유형의 콘텐츠의 경우 width 와 height 직접 추가해야 합니다. 광고 또는 기타 요소의 정확한 높이를 모르는 경우 최소한 min-height 속성을 추가하십시오. 여전히 더 큰 요소를 허용하지만 일부 공간을 예약하고 페이지에서 CLS를 제거하거나 최소한 줄일 수 있습니다.

타사 콘텐츠에 대한 WordPress의 누적 레이아웃 이동을 최소화하는 또 다른 기술은 페이지의 높은 위치에 배치하지 않는 것입니다. 위로 올라갈수록 아래로 밀어낼 수 있는 콘텐츠가 많아지고 CLS 점수가 높아집니다. 따라서 가능하면 중간이나 하단에 배치하십시오.

동적 콘텐츠 최적화

동적 콘텐츠는 페이지가 이미 로드된 후 페이지에 추가되는 페이지 요소입니다. 앞의 예는 지연 로드된 이미지였지만 일반적으로 배너, 양식 또는 스크롤에 표시되는 관련 제품과 같은 항목도 포함합니다.

당연히 제대로 계획하지 않으면 레이아웃 변경으로 이어질 수도 있습니다. 다음은 이를 방지하는 몇 가지 방법입니다.

• 미리 공간 확보 — 위와 유사하게 콘텐츠를 로드할 수 있는 고정 크기의 컨테이너가 있으면 나중에 들어와도 레이아웃을 안정적으로 유지합니다. 고정 컨테이너는 캐러셀 또는 이와 유사한 것일 수도 있습니다.
• 사용자 상호 작용과 연결 — 사용자 작업 후 콘텐츠가 동적으로 로드되는 경우 레이아웃이 변경되더라도 CLS에 대한 불이익이 없습니다. 그래도 500ms 컷오프를 명심하십시오.
• 화면 외부에서 콘텐츠 로드 — 표시 영역 외부에서 콘텐츠를 로드한 다음 사용자에게 콘텐츠를 사용할 수 있다는 알림과 해당 콘텐츠로 스크롤할 수 있는 옵션을 제공하는 경우에도 CLS가 없습니다. 소셜 미디어 플랫폼은 새로운 업데이트를 위해 그렇게 하는 것을 좋아합니다.

웹 글꼴 처리 개선

웹 글꼴은 레이아웃 변경을 유발할 수도 있습니다. 두 가지 일반적인 형태는 웹 글꼴이 들어오기 전에 스타일이 지정되지 않은 텍스트가 먼저 표시되거나(Flash of Unstyled Text 또는 FOUT) 처음에는 텍스트가 전혀 표시되지 않은 다음 웹 글꼴과 함께 표시됩니다(Flash of Invisible Text 또는 FOUT). FOIT).

둘 다 레이아웃 변경으로 이어질 수 있으며 이에 대해 수행할 수 있는 작업은 다음과 같습니다.

• 올바른 글꼴 형식 사용 — WordPress 웹사이트에 사용자 지정 글꼴을 로드하는 경우 WOFF2 또는 WOFF 형식을 사용해야 합니다. 설치 공간이 가장 작고 로드 속도가 가장 빠르며 위의 문제를 방지하는 데 도움이 됩니다.
• 올바른 대체 글꼴 사용 — 실제 글꼴과 매우 다른 대체 글꼴을 사용하는 경우 스위치가 발생하는 순간 레이아웃 이동으로 이어질 수 있습니다. 최종 제품에 가까운 폴아웃 글꼴을 사용하여 이를 방지할 수 있습니다. Font Style Matcher를 사용하면 글꼴 스타일을 쉽게 찾을 수 있습니다.
• 글꼴 미리 로드 — 문서의 앞부분에 웹 글꼴 리소스를 배치하고 rel=preload 추가합니다. 그렇게 하면 브라우저가 우선순위를 정합니다.

또한 글꼴을 로컬에서 호스팅하거나 최소한 CDN을 사용하여 사용자가 최대한 빨리 글꼴을 사용할 수 있도록 하는 데 도움이 됩니다. 이렇게 하면 로드 중에 늦게 글꼴을 전환하여 레이아웃이 변경될 가능성이 줄어듭니다.

누적 레이아웃 이동으로 인해 WordPress 사이트가 사라지지 않도록 하십시오.

누적 레이아웃 이동은 Google이 중요하다고 간주하는 세 가지 측정항목 중 하나이며 이 심층 시리즈의 마지막 측정항목입니다. 로드 중 및 로드 후에도 페이지 레이아웃의 안정성을 측정하므로 사용자 경험에 중요한 지표입니다.

Core Web Vitals의 다른 메트릭과 마찬가지로 사용자에게 중요할 뿐만 아니라 검색 순위에 포함되므로 웹 사이트의 성공에 중요합니다.

지금쯤이면 그것이 무엇인지, 어떻게 계산되는지, 무엇이 원인인지, 어떻게 테스트하고 처리하는지 알 것입니다. 당신의 레이아웃이 영원히 견고하기를 바랍니다, 친구.

WordPress에서 누적 레이아웃 이동을 방지하는 방법에 대한 추가 팁이 있습니까? 아래 댓글로 알려주세요!