내가 이 글을 쓰는 이유

나는 지금 몇 개의 웹사이트를 운영하고 있는데, 시작한 이래로 내 성과는 매우 오르락내리락했습니다. 나는 때때로 그것이 정말 짜증나는 일이라는 것을 알았습니다. 로컬에서는 모든 것이 잘 작동하는 것 같지만, 서버 분석을 확인해보니 특정 국가의 경우 속도가 형편없었습니다.

항상 둘 중 하나인 것 같았어요CLS또는LCP그것이 나에게 문제가 되었습니다. 그래서 나는 내 경험을 공유하고 특히 당신이 같은 일을 겪고 있다면 다른 사람들이 이 문제를 이해할 수 있도록 도와야겠다고 생각했습니다. 아니면 이 문제로 인해 어려움을 겪었고 독특한 관점이나 솔루션을 갖고 계십니까? 나는 그것에 대해 듣고 싶습니다.

에 따르면검색 엔진 저널, 이 두 측정항목을 최적화하면 사이트의 가시성과 사용자 만족도가 크게 향상될 수 있습니다. 이론적으로는 훌륭해 보이지만 실제로 문제를 해결하는 것은 다른 이야기였습니다. 제가 배운 내용을 안내해 드리겠습니다.

CLS와 LCP가 정확히 무엇인가요?

제가 어려움을 겪기 전에 이것이 실제로 무엇인지 설명하겠습니다. 왜냐하면 Google Search Console에서 이 두문자어를 처음 봤을 때 그 의미가 무엇인지 전혀 몰랐기 때문입니다.

CLS(누적 레이아웃 변경)페이지 레이아웃이 로드되는 동안 얼마나 많이 이동하는지 측정합니다. 버튼을 탭하려고 할 때 전체 페이지가 이동하여 잘못된 것을 클릭하는 것을 알고 계십니까? CLS 문제입니다. 이는 사용자로서 매우 실망스러운 일이며, 검색 엔진도 이로 인해 불이익을 받는 것으로 나타났습니다.

콘텐츠가 포함된 최대 페인트(LCP)페이지에서 가장 큰 표시 요소를 로드하는 데 걸리는 시간을 측정합니다. 일반적으로 이는 히어로 이미지 또는 큰 텍스트 블록입니다. LCP가 느리면 방문자는 절반만 로드된 페이지를 바라보게 되며 많은 사람들이 그냥 떠나게 됩니다.

이 두 가지 모두 Google에 속합니다.핵심 웹 바이탈, 이는 검색 순위에 직접적인 영향을 미칩니다. 따라서 콘텐츠가 훌륭하더라도 CLS 및 LCP 점수가 낮으면 방해가 될 수 있습니다.

CLS 및 LCP에 맞게 웹사이트 최적화

🖼️

이미지 크기 설정
이미지의 너비와 높이 지정

📢

책임감 있게 광고를 사용하세요
예상치 못한 광고 크기 조정 방지

⚡

중요한 리소스 미리 로드
중요한 콘텐츠가 빠르게 로드되도록 보장

🔄

동적 콘텐츠 최소화
로딩 중 변경되는 콘텐츠 제한

📊

정기적으로 성능 모니터링
도구를 사용하여 CLS 및 LCP 점수 추적

내 CLS 악몽

CLS는 제가 처음으로 직면한 문제였습니다. 내 페이지는 괜찮아 보였지만 점수는 형편없었습니다. 많은 조사 끝에 주요 원인을 찾았습니다.

크기가 없는 이미지:내 이미지의 너비와 높이를 설정하지 않았습니다. 브라우저는 얼마나 많은 공간을 예약해야 할지 몰랐기 때문에 이미지가 로드되면 모든 것이 바뀌었습니다.
글꼴이 늦게 로드됨:페이지가 렌더링된 후 내 사용자 정의 글꼴이 로드되어 새 글꼴이 대체 글꼴로 대체되면서 모든 텍스트가 점프하게 되었습니다. 이것은 미묘했지만 합쳐졌습니다.
동적 콘텐츠:페이지가 로드된 후 콘텐츠를 주입하여 그 아래의 모든 항목을 아래로 밀어내는 일부 구성 요소가 있었습니다.

대부분의 CLS 문제에 대한 수정은 놀라울 정도로 간단했습니다. 나는 모든 이미지와 미디어에 대해 명시적인 크기를 정의하기 시작했습니다. 폴백이 즉시 렌더링되도록 글꼴 로딩에 글꼴 표시 스왑을 추가했습니다. 그리고 동적으로 로드되는 모든 콘텐츠를 위해 CSS로 공간을 예약했습니다.

다음과 같은 도구Google PageSpeed 인사이트여기서 큰 도움이 되었습니다. 어떤 요소가 레이아웃 변화를 일으키는지 정확하게 보여주므로 추측할 필요가 없습니다.

그런 다음 LCP 문제가 발생했습니다.

모든 일이 정리됐다고 생각했던 바로 그 순간,LCP 점수플래그를 지정하기 시작했습니다. 실망스러운 부분은 영국에서는 내 사이트가 빠르게 로드되는 반면 다른 국가에서는 내 분석 속도가 끔찍한 것으로 나타났습니다. 이것이 바로 LCP에 관한 것입니다. 사용자의 위치와 서버와의 거리에 따라 크게 달라집니다.

제가 발견한 주요 문제는 다음과 같습니다.

최적화되지 않은 대형 이미지:내 히어로 이미지가 너무 컸어요. 압축하지 않고 원본 해상도의 사진을 업로드하고 있었습니다.
서버 응답 시간:CDN이 없으면 내 서버에서 멀리 떨어진 사용자가 첫 번째 응답을 오랫동안 기다리고 있었습니다.
렌더링 차단 JavaScript:페이지가 완료될 때까지 렌더링을 차단하는 스크립트가 헤드에 로드되어 있었습니다.

처럼Backlinko의 연구LCP 점수가 좋은 사이트는 눈에 띄게 참여도가 높고 이탈률이 낮습니다. 이러한 문제를 해결하기 시작하자 내 분석에서 차이점을 확인할 수 있었습니다.

내 LCP에 실제로 도움이 된 것은 무엇입니까?

나는 모든 이미지를 압축하고 가능한 경우 WebP 형식을 사용하기 시작했습니다. 또한 필수적이지 않은 스크립트를 비동기식으로 로드하거나 완전히 연기하도록 이동했습니다. 내 사이트는 많은 에지 네트워크 작업을 처리하는 Vercel에서 호스팅됩니다. 하지만 기존 호스팅을 사용하는 경우CDN국제 교통에 큰 변화를 가져올 수 있습니다.

CDN은 전 세계 위치에 사이트 사본을 저장하므로 방문자는 단일 원본 서버가 아닌 더 가까운 곳에서 서비스를 받을 수 있습니다. 특정 지역에서 속도가 좋지 않은 경우 가장 먼저 살펴봐야 할 사항 중 하나입니다.

짜증나는 부분 - 실제로는 "고정"되지 않습니다.

아무도 당신에게 말하지 않은 것이 있습니다.CLS 및 LCP. 한 번 수정하고 계속 진행하지 마십시오. 새로운 기능, 새 이미지를 추가하거나 레이아웃을 변경할 때마다 점수가 다시 바뀔 수 있습니다. 그것은 계속되는 일이다.

Google Search Console의 모든 것이 녹색으로 표시된 몇 주를 보냈는데, 새 구성 요소 하나를 추가했는데 갑자기 CLS에 다시 플래그가 지정되었습니다. 정말 짜증나는 일이지만 이제는 중요한 변경이 있을 때마다 핵심 웹 바이탈을 확인하는 방법을 배웠습니다.

CLS 및 LCP가 사용자 경험에 미치는 영향

0.1초

사용자 허용 오차

32%

반송률 증가

전환율 하락

핵심 웹 바이탈

SEO 순위 중요성

보고서금융 브랜드느린 웹사이트가 수익 손실로 직접적으로 이어질 수 있는 방법을 강조합니다. 그것은 지루하다고 느껴질 때에도 그것을 계속할 수 있는 충분한 동기 부여입니다.

나에게 가장 큰 도움이 된 도구

동일한 문제를 다루고 있는 경우 제가 실제로 사용하고 도움이 되는 도구는 다음과 같습니다.

구글 검색 콘솔:이것이 내가 처음으로 내 문제를 발견한 곳이다. Core Web Vitals 점수를 페이지별로 분류하여 표시하고 주의가 필요한 사항을 정확하게 알려줍니다.
PageSpeed 통계:변경한 후 모든 페이지를 실행합니다. 막연한 조언보다는 구체적이고 실행 가능한 권장 사항을 제공합니다.Shopify의 웹 성능 가이드또한 훌륭한 동반자 리소스입니다.
웹 바이탈 확장:이 Chrome 확장 프로그램은 귀하가 자신의 사이트를 탐색할 때 CLS, LCP 및 기타 측정항목을 실시간으로 표시합니다. 개발하는 동안 계속해서 유지하고 있습니다.

성능 문제를 확인한 후 다음을 사용하세요.Google 검색 AI 순위 도구개선 사항이 실제로 더 나은 검색 가시성으로 전환되는지 확인합니다. 순위에 도움이 되지 않는다면 점수를 고칠 이유가 없습니다.

당신이 이 문제를 겪고 있다면 나의 조언

당신의 성과가 나만큼 오르락내리락했다면, 나는 다음과 같이 제안하고 싶습니다:

공포에 질리지 말 것.CLS 및 LCP 문제는 매우 일반적입니다. 당신이 모든 것을 잘못하고 있는 것은 아닙니다. 이러한 지표는 단지 민감할 뿐입니다.
국가별 분석을 확인하세요.귀하의 사이트는 귀하에게는 빠르지만 다른 곳의 방문자에게는 느릴 수 있습니다. CDN은 이 문제를 신속하게 해결할 수 있습니다.
먼저 이미지를 수정하세요.내 경험에 따르면 최적화되지 않은 이미지와 누락된 치수가 대부분의 CLS 및 LCP 문제의 원인입니다.
모든 변경 후에 테스트하십시오.중요한 업데이트가 있을 때마다 PageSpeed Insights를 실행하는 습관을 들이세요.
인내심을 가지십시오.Google Search Console 데이터를 업데이트하는 데 며칠 또는 몇 주가 걸릴 수 있습니다. 대시보드가 아직 변경되지 않았기 때문에 수정 사항이 작동하지 않는다고 가정하지 마십시오.

나는 아직도 배우고 있고 이 문제를 다루고 있습니다. 내 점수는 예전보다 나아졌지만 완벽하다고는 말할 수 없습니다. 귀하에게 적합한 솔루션을 찾았다면 진심으로 그 솔루션에 대해 듣고 싶습니다. 또한 다음을 통해 성과 데이터를 시각화해 볼 수도 있습니다.무료 온라인 차트 작성기시간 경과에 따른 개선 사항을 추적합니다.

결론은 이렇습니다.CLS 및 LCP사라지지 않습니다. 그것들은 SEO와 사용자 경험에 중요하며, 저처럼 웹사이트를 운영한다면 긴장을 늦추지 않을 것입니다. 그러나 문제는 고칠 수 있으며 모든 개선은 그만한 가치가 있습니다.