WordPress용 CLS(누적 레이아웃 이동)를 개선하는 방법

대부분의 웹사이트는 다양한 화면 크기와 해상도의 다양한 장치에서 액세스할 수 있도록 제작되었습니다. 따라서 여러 플랫폼에서 동일한 경험을 유지하는 것이 어려울 수 있습니다. WordPress는 플랫폼 간 웹 디자인을 더 쉽게 만듭니다. 그러나 모든 형태의 소프트웨어 개발에서 만능 솔루션을 구축하는 것은 복잡할 수 있습니다.

웹 개발의 경우 사용자가 웹 사이트의 페이지에서 페이지로 이동하는 경우 CLS(누적 레이아웃 이동)라고 하는 현상이 발생할 수 있습니다. 페이지의 시각적 요소가 갑자기 변경되거나 잘못 로드되는 경우입니다. 갑자기 텍스트가 커지거나 작아지고 이미지의 위치가 변경되거나 전체 페이지 레이아웃이 변경됩니다.

왜 이런 일이 발생하며 어떻게 고칠 수 있습니까? 이 가이드에서는 CLS가 무엇이며 웹 사이트에서 CLS를 방지할 수 있는 방법을 살펴봅니다.

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

감지할 수 있는 CLS의 가장 일반적인 형태는 이미지 로드의 지연입니다. 시각적 요소가 많은 복잡한 웹 사이트에서는 텍스트가 미디어 요소보다 먼저 로드되는 것을 종종 볼 수 있습니다. 또한 모든 시각적 요소가 최종적으로 로드되면 웹 페이지의 레이아웃이 변경됩니다. 이러한 사건은 스크롤 여부에 관계없이 발생합니다.

웹 페이지의 CLS 점수가 높으면 완전히 로드된 시점을 확인하기 어렵습니다. 웹 사이트가 복잡하고 미디어가 무거울수록 경험 레이아웃이 바뀔 가능성이 높아집니다.

예를 들어, 시각적 요소가 거의 없는 단순한 검색 엔진 웹 페이지에는 CLS가 거의 또는 전혀 없습니다. 그러나 이것이 모든 복잡하거나 기능이 많은 웹 사이트의 CLS 점수가 높다는 의미는 아닙니다. 예를 들어, Amazon의 온라인 상점은 위젯, 이미지 및 링크로 가득 차 있지만 눈에 띄는 변화 없이 빠르게 로드됩니다.

누적 레이아웃 이동의 원인은 무엇입니까?

CLS는 웹 브라우저가 다른 시간에 순차적으로 요소를 로드하기 때문에 발생하는 경향이 있습니다. 또한 웹사이트에 알 수 없는 속성(예: 치수)이 있는 미디어 요소가 있을 수 있습니다.

미디어 요소(예: 이미지)의 너비나 높이를 지정하지 않은 경우 웹 페이지가 완전히 로드될 때까지 웹 브라우저는 할당할 공간을 알 수 없습니다. 따라서 과감한 레이아웃 변경. 요약하자면, 대부분의 CLS의 주된 이유는 비효율적인 로딩입니다.

레이아웃이 실시간으로 이동하는 것을 눈치채지 못하더라도 반드시 이동이 발생하지 않는다는 의미는 아닙니다. 웹 브라우저는 종종 웹 사이트 데이터를 캐시하므로 웹 페이지를 다시 방문할 때 더 쉽게 로드할 수 있습니다. CLS 점수를 측정하는 것은 웹사이트가 상당한 레이아웃 변화를 겪고 있는지 판단하는 가장 좋은 방법입니다.

웹사이트의 CLS 점수를 측정하는 방법

CLS 점수는 웹 페이지가 수명 동안 경험하는 레이아웃 전환 횟수를 나타냅니다. 세션 창으로 알려진 것에서 CLS 점수를 도출할 수 있습니다. 세션 창은 5초 간격 내에서 발생하는 레이아웃 이동 수를 설명합니다. CLS 점수를 계산하려면 거리 비율에 충격 비율을 곱해야 합니다.

 CLS 점수 = 거리 비율 x 충격 비율

Impact fraction은 불안정한 요소가 두 프레임 사이의 인지 가능한 영역에 얼마나 영향을 미치는지 나타냅니다. 거리 비율은 요소가 프레임 간에 이동한 양을 나타냅니다. 0.10 이하(0.0 – 0.10)의 CLS 점수는 훌륭합니다. 0.10 이상 0.25 미만(0.10 -0.25)의 CLS 점수는 보통이며 개선이 필요한 반면 CLS 점수는 0.25 이상(0.25 <)입니다.

이러한 개념은 머리를 감싸는 데 약간 어려울 수 있습니다. 운 좋게도 웹 사이트의 CLS를 수동으로 계산할 필요가 없습니다. CLS 점수를 계산할 수 있는 수많은 온라인(및 오프라인) 도구가 있습니다.

현재 웹 페이지의 CLS를 측정하는 가장 일반적인 방법은 Google의 PageSpeed ​​Insights를 사용하는 것입니다. 이를 통해 모바일 및 데스크톱 반복 모두에 대한 웹사이트의 사용자 경험 통계를 확인할 수 있습니다.

기타 CLS 도구는 다음과 같습니다.

• GT 메트릭스
• Google Web Vitals CLS 디버거
• Google 크롬 Web Vitals 확장 프로그램
• 구글 등대
• 웹페이지 테스트

Google의 PageSpeed ​​Insights가 가장 친숙하므로 이 예를 사용하겠습니다.

CLS 점수를 측정하려면 PageSpeed ​​인사이트 홈 페이지로 이동하여 웹 페이지의 URL을 상단 텍스트 필드에 삽입한 다음 분석 버튼을 클릭하십시오. 웹사이트의 인기도와 인터넷 속도에 따라 PageSpeed ​​Insights는 몇 초 이내에 보고서를 제공해야 합니다.

CLS 점수를 찾으려면 핵심 성능 평가 섹션까지 아래로 스크롤하십시오.

Amazon의 홈페이지를 예로 들면 CLS 점수가 0.10 미만일 가능성이 높습니다. 테스트 중에 모바일 웹사이트의 CLS 점수가 0.01인 반면 데스크톱 버전의 점수는 0.05인 것으로 나타났습니다.

그러나 사이트가 리소스를 많이 사용하는 경우 어떻게 합니까? Amazon과 같은 CLS 점수도 얻을 수 있는 방법을 살펴보겠습니다.

CLS를 최적화하는 방법

높은 CLS 점수를 유발하는 요소를 확인하는 가장 좋은 방법은 Google Web Vitals CLS 디버거를 사용하는 것입니다. 웹 사이트의 모든 변화하는 기능의 GIF를 보여줍니다. 광고 및 미디어 파일은 높은 CLS 점수의 가장 일반적인 원인입니다. 다른 원인에는 글꼴, 비동기 CSS, 애니메이션 및 Iframe이 포함될 수 있습니다. CLS 점수를 높이려면 이러한 요소를 최적화해야 합니다.

웹 사이트에 훌륭한 CLS가 있는지 확인하는 것은 강력한 로컬 SEO 및 관련 콘텐츠가 있는지 확인하는 것만큼 중요합니다. Google의 검색 엔진은 우수한 사용자 경험을 제공하고 최적화된 웹사이트를 선호하는 경향이 있습니다.

이를 위해 다음은 사이트의 CLS 점수를 향상시키는 몇 가지 단계입니다.

모든 미디어 파일에 차원 속성 추가

속성을 알 수 없는 미디어 파일을 업로드하면 웹 브라우저에서 이미지 크기를 파악하고 로드 후 레이아웃 방향을 결정해야 하므로 레이아웃 이동의 위험이 높아집니다. 이러한 상황은 고해상도 이미지와 파일이 큰 경우 발생할 가능성이 더 큽니다.

크기 속성이 누락된 미디어 파일을 업로드하면 웹 브라우저에서 너무 많은 작업을 수행하게 됩니다. 업로드하는 모든 시각 미디어 파일에 대해 높이 및 너비 속성을 추가해야 합니다. 소스 코드를 보고 너비 및 높이 속성을 수동으로 추가하여 이를 수행할 수 있습니다.

글꼴이 로컬로 로드되었는지 확인

텍스트는 글꼴을 로드하는 동안 계속 표시되어야 합니다. 이를 달성하기 위한 첫 번째 단계는 글꼴이 타사 글꼴 웹 사이트에서 가져오는 대신 로컬로 로드되도록 하는 것입니다.

타사 웹사이트에서 글꼴을 가져오는 경우 OMGF와 같은 플러그인을 사용하여 글꼴을 로컬로 호스팅하고 더 빠르게 로드할 수 있습니다. 이는 CLS 점수를 향상시킬 뿐만 아니라 친환경 디자인을 향한 한 걸음이기도 합니다.

FOIT 및 FOUT 피하기

대체 글꼴을 지정하지 못한 경우 FOIT(Flash of Invisible Text)가 발생합니다. 웹 브라우저가 글꼴을 로드하거나 대체 글꼴을 찾으려고 하는 동안 사용자에게 텍스트가 있어야 할 빈 공간이 표시됩니다.

스타일이 지정되지 않은 텍스트(FOUT)가 깜박이는 동안 지정된 글꼴을 로드할 수 있을 때까지 웹 브라우저의 기본 대체 글꼴이 표시됩니다. 이 문제를 해결하기 위해 font-display: swap 속성을 추가할 수 있습니다.

Google에서 글꼴을 다운로드한 적이 있다면 이 태그가 각 URL 끝에 추가된다는 것을 알 수 있습니다. 이 속성을 직접 추가하는 가장 쉬운 방법은 WP에서 Swap Google Fonts Display 플러그인을 사용하는 것입니다.

그러나 이 플러그인은 Google 글꼴에서만 작동하며 자동으로 디스플레이 스왑 속성을 해당 URL에 추가합니다. 글꼴을 로컬로 호스팅하는 경우 String Locator 플러그인을 사용하여 모든 글꼴 파일을 찾아 변경할 수 있습니다. WP에서 글꼴 스타일시트를 열고 수정해야 합니다.

또는 글꼴 교체 속성을 추가하여 글꼴을 자동으로 최적화하는 것과 같은 캐싱 플러그인을 사용할 수 있습니다.

글꼴 미리 로드

글꼴을 로컬로 호스팅하고 있는지 확인하려면 다음과 같은 플러그인을 사용하여 글꼴을 미리 로드할 수 있습니다.

• WP 로켓
• 사전* 파티 리소스 힌트
• 영주권자

이 플러그인을 사용할 여유가 없다면 header.php 파일을 편집하여 글꼴을 미리 로드할 수 있습니다. 글꼴을 미리 로드한 후 사이트를 철저히 테스트했는지 확인하십시오. 너무 많은 글꼴을 미리 로드하면 웹사이트가 손상될 수 있습니다. 따라서 주요 백엔드 기회와 마찬가지로 사전에 WordPress 사이트를 백업하는 것이 좋습니다.

CSS 전달 최적화 비활성화

WP Rocket을 사용하여 CSS 전달을 최적화하거나 LiteSpeed ​​Cache로 CSS를 비동기식으로 로드하는 경우 스타일이 지정되지 않은 콘텐츠(FOUC)가 깜박일 수 있습니다. CLS 점수를 높이려면 해당 플러그인에서 이러한 옵션을 비활성화하는 것이 좋습니다.

또는 대체 중요 CSS로 알려진 것을 설정할 수 있습니다. 여기에는 Critical Path CSS Generator와 같은 도구를 사용하여 중요한 대체 스크립트를 생성하는 작업이 포함됩니다.

렌더링 차단 스크립트를 제거하면 CLS 점수도 낮아질 수 있습니다. 먼저 CSS 전달 최적화를 활성화한 상태에서 CLS를 테스트한 다음 비교를 위해 비활성화했을 때 테스트하는 것이 좋습니다.

애니메이션 비활성화

애니메이션을 사용하는 경우 애니메이션이 웹사이트의 로드 시간을 방해할 수 있으므로 웹사이트의 모바일 버전에서 애니메이션을 비활성화하는 것이 좋습니다. 웹사이트에 애니메이션을 적용하고 싶다면 CSS 변환 및 번역 옵션을 사용하는 것이 좋습니다.

또는 Happy Addons Elementor 플러그인을 사용할 수 있습니다. 이를 통해 레이아웃 이동 없이 요소에 애니메이션을 적용할 수 있습니다.

대부분의 레이아웃 변경을 제거하는 가장 좋은 방법은 웹 페이지가 로드되는 방식을 수정하는 것입니다. 결과적으로 WordPress 사이트의 속도와 효율성을 높일 수 있습니다. 항상 그렇듯이 사용자 경험을 개선하는 것입니다. 웹사이트의 반응성이 높을수록 사용자가 해당 웹사이트를 북마크에 추가하고 다시 방문할 가능성이 높아집니다.