검색엔진 최적화(SEO)란 무엇일까요? 이는 검색엔진이 웹사이트를 더 쉽게 이해하고 평가할 수 있도록 홈페이지의 구조와 개별 페이지를 체계적으로 개발·최적화하는 작업을 의미합니다. 이를 통해 검색 결과에서 더 높은 순위에 노출될 가능성이 커지며, 궁극적으로 사용자 유입 증가와 웹사이트의 가시성을 높이는 데 기여합니다.
여기서 중요한 것은 사람이 아닌 검색엔진 기준이라는 것입니다. 그래서 검색엔진이 좋아하는 사이트가 될려고 노력하는 작업이라고 생각해 오늘도 제 사이트를 알아봤습니다. 검색이 잘 되고 있으면 그 부분은 검색엔진이 좋아하는 것이라 생각됩니다. 하지만 우리가 눈여겨 봐야 할 것은 반대인 뭘 싫어 하나? 이겠죠?
저는 뭘 싫어하지? 를 알아보기 위해 가끔씩 웹사이트 속도체크 사이트에서 제 사이트를 체크 후 그 피드백을 분석 합니다. 이번 포스팅은 그 중 레이아웃 변경 횟수(CLS)라는 항목을 지적 받아 알아본 이야기 입니다. 아직 배워가는 입장이라 제 글의 정확성은 높지 않으니 이런 항목이 있었다 정도로만 봐줬으면 합니다.
웹사이트 속도체크
오늘도 내 사이트의 웹페이지 로딩 속도를 체크해보았는데, 구글 검색엔진이 싫어하는 항목을 하나 발견했습니다. 지난번에도 검색엔진 최적화를 위해 W3C 검증을 한 번 진행했었죠. 그 이후로는 그래도 긍정적인 변화를 느꼈고, 검색엔진이 좋아하는 요소들도 점점 늘어나면서 효과가 있었다고 생각합니다.
이번에 체크한 결과를 살펴보니, 대부분의 항목은 괜찮았지만 성능(Performance) 부분에서 개선이 필요해 보이네요. 그래서 좀 더 자세히 살펴보기 위해 하단의 상세 내용을 뒤져보았습니다.
진단 내용
많은 진단 내용이 있었지만, 오늘 먼저 살펴볼 첫 번째 진단 항목은 바로 이것입니다.
???? 대규모 레이아웃 변경 피하기
"레이아웃 변경 1건 발견"
와~ 어떻게 이렇게 정확하게 잡아냈지? ㅋㅋ ????
정확한 기억은 나지 않지만, 몇 달 전에 해당 부분의 코드를 전체적으로 수정하면서 모바일 친화적으로 개선했었죠. 그런데도 구글이 왜 이 부분을 싫어하는 걸까요? 도대체 뭐가 문제인지 좀 더 깊이 들여다봐야겠습니다. ????
그런데, 우측에 네트워크 요청이 늦어져 페이지 레이아웃이 조정됨???? 아래 부분이 가격을 나타내는 부분으로 페이지내 include 한 것인데, 메인 css를 로딩하는데 문제가 있다고 말하는 것 같기두 하구..ㅋㅋ 잘 모르겠네요.
윈도잉으로 인해 일부 레이아웃 변경은 CLS 측정항목 값에 포함되지 않을 수 있습니다.
"윈도잉으로 인한 변경은 예외일 수 있다?" 라는 문구를 보니, 어쩔 수 없이 발생한 변경이라면 비록 리포트 측정값에 포함되더라도 큰 문제는 아닐 수도 있다는 의미로 해석할 수 있을 것 같네요. 하지만 확실한 건 아니니, 더 정확히 알고 싶어 "윈도잉과 CLS 개선 방법 알아보기" 부분을 좀 더 자세히 살펴보기로 했습니다. 이게 진짜 괜찮은 건지, 아니면 개선이 필요한지 확인해봐야겠어요!
윈도잉, 레이아웃 변경 횟수(CLS)
CLS란 Cumulative Layout Shift의 약자로, 우리말로 하면 "누적 레이아웃 변경"이라고 해석할 수 있습니다. 참고 영상을 보니, 예상치 못한 레이아웃 전환이 발생하면 텍스트가 갑자기 이동해 읽던 도중 위치를 잃거나, 원치 않는 버튼이나 링크를 잘못 클릭할 수 있다는 의미가 와닫네요.
쉽게 말해, 사용자가 기대했던 것과 다른 페이지 구성이 갑자기 나타나면 혼란을 느끼고 여러 요소를 클릭하다가 결국 페이지를 이탈할 수 있다는 뜻으로 이해하면 될 것 같습니다. 영상에서는 주로 페이지 이동 중 발생하는 사례를 예로 들었지만, 제 경우는 그런 상황은 아니더라도 큰 변화가 있었기 때문에 CLS 측정 항목에 포함된 것으로 보이네요.
그렇다면, 당장 크게 걱정할 문제는 아닐 것 같지만, 더 정확히 어떤 부분이 영향을 미쳤는지 면밀히 살펴봐야겠습니다. ????
누적 레이아웃 이동 (CLS)은 안정적인 Core Web Vitals 측정항목입니다. CLS는 사용자가 예기치 않은 레이아웃 이동을 경험하는 빈도를 정량화하는 데 도움이 되므로 시각적 안정성을 측정하는 데 중요한 사용자 중심 측정항목입니다. CLS가 낮으면 페이지가 만족스러운 페이지가 될 수 있습니다.
음, 어렵네요. 정확하게 이해는 못했지만 페이지 사용자가 웹페이지를 이용 함에 있어 레이아웃 변경은 부정적인 결과를 나타낼 수 있으니 자제해라. 하지만 모든 레이아웃 변경이 나쁜 것은 아니고 적절한 조치를 하면 되고 그 조치로 css, 자바 등 다양한 방법이 있다고 하네요.
- 레이아웃 변경: 사용자 상호작용(예: 링크 클릭, 탭 전환, 버튼 누르기, 검색 입력 등)에 의해 발생하는 레이아웃 전환은 일반적으로 문제되지 않는다고 하지만, 이러한 변화도 CLS(Cumulative Layout Shift)에 포함된다고 볼 수 있겠네요. 특히, 페이지 전환 시 로딩 시간이 길어지면 사용자가 기다리지 않고 창을 닫거나 다른 메뉴를 클릭해 이탈할 가능성이 커집니다. 따라서 이러한 부정적인 영향을 최소화하려면, "검색 중...", "로딩 중..." 같은 애니메이션이나 로딩 표시를 제공해 사용자에게 진행 상태를 명확히 알리는 것이 효과적이고 하네요. 이를 통해 레이아웃 변경으로 인한 불편함을 줄이고 사용자 경험을 개선할 수 있다고 하니 참고 하세요.
결론
정확히 이해하지 못했을 수도 있지만, 결론적으로 구글 SEO 최적화를 위해서는 CLS 같은 요소도 측정된다는 점을 기억하면 될 것 같습니다. SEO는 정말 복잡하고 신경 쓸 부분이 많아 어렵게 느껴지네요.
다음 시간에는 또 다른 지적 사항을 살펴보도록 하겠습니다.
하나만 기억하면 됩니다!
검색엔진이 좋아하는 것을 따라가면, 결국 SEO에 최적화될 수 있다!