Google Core Web Vitals (LCP,FID,CLS) 정복

구글 핵심 웹 지표 정복하기

0037core web vitals Google Core Web Vitals (LCP,FID,CLS) 정복
강의를 위한 샘플 사이트 점수 / Lighthouse 이용

Core Web Vitals에 대해서는 사이트 스피드와 관련된 글에서 이야기를 한 적이 있지만 구글은 항상 3-4년동안 충분히 실험하고 분석한 후에 “정식”으로 운영을 하는 경우가 많기 때문에 Core Web Vitals의 경우에도 “카더라” 정보로 인해 사람들이 혼동스러워 하고 있습니다.

중요한 사실은 구글에서 직접 “사용자의 경험은 순위에 영향을 미칠것.” 이라고 말했기에, 눈앞에 있는 정보를 보고 넘어갈 것이 아니라 미리 준비하고 대처해놔야 갑자기 사이트의 순위가 오락가락 하는 불상사를 막을 수 있습니다.

의지의 한국인은 분명히 사이트 스피드에서 모두 100점을 얻고 싶을겁니다. 그러나 모든 항목에 대해서 100점을 가져갈 필요는 없습니다. 모든 사이트가 그런것은 아니지만 실제로 DR점수가 높고, 순위 랭크에 있는 사이트드들의 핵심 성능 평가점수(Core Web Vitals)가 좋은 점수를 받고 있지 않고 있다는 사실입니다.

구글 사이트 스피드 인사이트 페이지 자체를 보십시오.

imagecore web vitals Google Core Web Vitals (LCP,FID,CLS) 정복

정말 나쁜 점수가 아니라면 안전하게 운영이 가능하고, 스피드 인사이트를 제공하는 목적은 100점을 얻기 위함은 아닙니다. 하지만 우리는 그럼에도 불구하고 더 넓은 무대인 글로벌에서 사이트를 운영할 수 있기 때문에 최고의 결과를 얻기위해 사이트의 기능을 없애거나 희생해서는 안됩니다.

해야 할 것과 하지 말아야 할 것

해야 할 것

– 점수가 굉장히 낮은 측정항목에 대한 개선

– 수정이 가능하며 너무 복잡한 작업이 필요하지 않은 항목 개선

– 가능하다면 유료플랜을 지불하고 손쉽게 작업

하지 말아야 할 것

– 모든 점수에 대해 90점 이상을 얻기 위해 웹사이트 기능을 포기하는 것

– Core Web Vitals 점수를 올리면 갑자기 순위가 상승할거라는 믿음

– 100점을 목표로 수정하는 것

핵심 웹 바이탈 측정 기본 사항 알아보기

측정하는 방식을 알지 못한다면 애초에 수정을 할 수 조차 없습니다. 이것을 위해 사이트 및 플러그인을 통해 속도를 측정하고 개선하는 방법에 대해 알아보도록 하겠습니다.

1. 구글 사이트 스피드 인사이트

구글에서 제공하는 사이트 스피드 인사이트 입니다. 측정하고 싶은 URL을 입력하게 되면 결과가 나타납니다.

1 imagecore web vitals Google Core Web Vitals (LCP,FID,CLS) 정복

종합점수

호스팅에 따른 점수의 변화가 존재하지만 전체 점수를 볼 수 있는 가이드입니다.

SE ceaa31cf b150 4fa4 a02d ca4ed52767f4core web vitals Google Core Web Vitals (LCP,FID,CLS) 정복

필드 데이터 및 요약(Origin Summary)

대부분의 웹사이트에서는 크롬(chrome) 사용자의 데이터 추적에 의존하기 때문에 거의 비어있습니다. 규모, 환경, 적절한 추적등에 의해 여부가 달라집니다. 요약은 28일동안의 집계를 보여줍니다. 지난 한달간 측정항목에 대해 사이트가 얼마나 잘 수행되어 있는지 볼 수 있습니다.

SE c5eaa489 f999 4697 945d 59dc8d6f3c92core web vitals Google Core Web Vitals (LCP,FID,CLS) 정복

실험실 데이터

2 imagecore web vitals Google Core Web Vitals (LCP,FID,CLS) 정복

각 항목에 대한 측정값과 더불어 성능 점수가 계산되어 보여집니다. 연구실 데이터와는 다르게 요약은 실시간으로 보여주는것이 아니기 때문에 성능 개선 분석에 유리합니다.

추천(기회/Opportunities) 및 진단(Diagnostics)

3 imagecore web vitals Google Core Web Vitals (LCP,FID,CLS) 정복

이것은 우리가 직접적으로 수정해야 할 항목이 나타나는 핵심지표입니다. 이 점수를 향상시키기 위해 강의에서는 여러가지 제안을 할 것이며 너무 어렵지 않게 할 수 있도록 설명합니다.

통과한 검사

4 imagecore web vitals Google Core Web Vitals (LCP,FID,CLS) 정복

테스트에서 통과한 데이터들입니다. 정말 필요한 경우에 다듬는 것 말고는 건드릴 것이 없습니다.

데스크톱과 모바일

SE 423f692d 6429 4475 9690 03e3a696a97acore web vitals Google Core Web Vitals (LCP,FID,CLS) 정복

GTMetrix와 구글 스피드 인사이트에서는 각각 모바일과 데스크톱을 비교하여 볼 수 있습니다. 특히 구글은 모바일 사용자가 늘어남에 따라 이에 대한 평가가 더 가혹하게 진행되기 때문에 모바일을 최적화 시키는 것을 우선으로 해야 합니다.

0045core web vitals Google Core Web Vitals (LCP,FID,CLS) 정복0046core web vitals Google Core Web Vitals (LCP,FID,CLS) 정복

좌 모바일, 우 데스크톱

특히 테스크톱에서는 높은 점수를 얻었지만 모바일에서 낮은 점수를 얻었다면 빨리 수정을 해야합니다. 구글에서는 사용자의 페이지 경험에 따른 순위 영향과 동시에 모바일 이용자의 친화성에 대한 점수를 높게 주고 있기 때문입니다.

테스트를 진행할 페이지

0046core web vitals Google Core Web Vitals (LCP,FID,CLS) 정복
좌 메인 페이지, 우 실제 글을 읽는 주소
5 imagecore web vitals Google Core Web Vitals (LCP,FID,CLS) 정복

대표사진 삭제우리는 홈페이지의 주소인 “도메인” 이름만을 넣어 테스트 하는 실수를 범합니다. 그러나 90% 이상의 사용자들은 “도메인주소”로 들어오지 않습니다. 실제로 검색을 통해 나타나는 페이지가 속도가 느리다면 첫번째 페이지의 속도가 빠른것은 아무 소용이 없습니다.

Largest Contentful Paint

6 imagecore web vitals Google Core Web Vitals (LCP,FID,CLS) 정복

대표사진 삭제사진 설명을 입력하세요.좋음 : 2.5초 이내

개선 필요 : 2.5초 ~ 4초

나쁨 : 4초 이상

정의 : 해당 페이지에서 가장 크게 보이는 요소가 사용자에게 로드되는 시간

나쁜 점수의 주요 원인 : 최적화되지 않은 hero 이미지, 헤더 이미지, 자바 스크립트, 글꼴

Largest Contentful Paint의 수정은 어려워 보일 수도 있지만 사실 가장 간단합니다. 테스트를 진행하는 페이지에서 가장 큰 비중을 차지하는 이미지, 헤더를 수정해주기만 하면 됩니다. 기회 또는 진단까지 내려서 수정해야 하는 지 파악해주시기 바랍니다.

낮은 점수의 원인

SE 0800d70e 5a17 4779 8069 60a7668b466dcore web vitals Google Core Web Vitals (LCP,FID,CLS) 정복

요약 밑을 보게되면 “다음과 관련된 감사 표시”에서 LCP를 클릭해주면 그것과 관련된 사항들만 나오게 됩니다. 주로 자바, CSS, 글꼴, 큰 이미지와 관련된 것들이 주로 나옵니다.

개선 방법

LCP를 최적화 하는 가장 쉬운 방법은 호스팅, 캐시, CDN을 이용하여 하는 것이 가장 빠르고 효과적인데 이미지인 경우에는 ShortPixel, ShortPixel AI 유료 플러그인을 이용해서 CDN과 연동시킨 후 WP Rocket을 이용하는 방법이 가장 효과적입니다.

그리고 텍스트 제목의 경우에는 글꼴을 변경하고 크기를 조정하여 수정해줍니다. 다만, “초기 응답 단축”의 경우에는 CDN을 이용한다고 하더라도 호스팅 서버의 속도자체가 느리기 때문에 이 부분에서 공유 호스팅을 사용중인 이용자의 경우 점수를 양보하거나 더 좋은 호스팅으로 갈아 타야 합니다.

만약 모든 것이 귀찮고 하나로 해결하고 싶다면 Nitro Pack을 유료로 이용하실 것을 권장합니다. 그러나 이것은 어디까지나 선택사항이며 세세한 부분까지 수정하고 싶다면 결국 직접 수정을 해야 합니다.

First Input Delay

9 imagecore web vitals Google Core Web Vitals (LCP,FID,CLS) 정복

좋음 : 100ms

개선 필요 : 100ms~300ms

나쁨 : 300ms 이상

정의 : 사이트의 요소가 사용자의 작용에 응답하는 속도 (버튼, 링크등)

나쁜 점수의 주요 원인 : 최적화되지 않은 코드, 쓸데 없이 큰 코드, 제대로 캐시되지 않은 리소스, 플러그인, 페이지 빌더, 테마

SE f6e84955 3917 44bc 97c7 629e626f8496core web vitals Google Core Web Vitals (LCP,FID,CLS) 정복

이 항목은 사용자가 사이트의 요소를 이용했을때 작용하는 시간과 반응시간에 초점을 두고 있습니다. 예를 들면 링크를 클릭하거나 버튼을 눌렀을때 로드되는 시간입니다.

표면으로는 LCP보다 간단해 보일 수 있지만 코드는 사이트의 전반적인 영향을 주기 때문에 결코 가벼운 사항이 아닙니다. 그래서 Core Web Vitals에서는 가장 중요한 것중에 하나로 LCP, FID, CLS를 꼽고 있습니다.

측정 방법

아쉽게도 FID는 앞서 언급한데로 결코 쉬운 작업이 아닙니다. 기록 데이터를 보면서 수정사항을 봐야 하기 때문에 실시간으로 개선하기 어렵기 때문입니다. 그래서 TBT(총 차단 시간) 데이터를 보며 살펴보는 것이 좋습니다. 이를 위해서는 사이트 스피드 인사이트 보다는 GTMetrix를 이용, Waterfal 을 통해 보는것이 좋습니다.

SE 0304d474 1fa3 4845 98a0 073429e52196core web vitals Google Core Web Vitals (LCP,FID,CLS) 정복

Waterfal에서 우리는 연한갈색의 블록이 긴 것을 찾아야 합니다. 차단 시간이 길어질 수록 나쁜 점수를 얻고 있는 것이기 때문에 좌측의 URL과 Domain을 살펴보며 정확히 어떤 문제가 있는지 알아보아야 합니다.

10 imagecore web vitals Google Core Web Vitals (LCP,FID,CLS) 정복

위의 이미지처럼 태그매니저의 문제 혹은 빨갛게 에러가 나는 경우도 있기 때문에 이러한 사항은 간단히 테스트 수치만으로 판단하기 어렵습니다.

낮은 점수의 원인

앞서 언급한데로 TBT를 통해 판단하는 것이 가장 좋습니다. 발생되는 문제의 수정은 코드 블록 수정, 빠른 글꼴로 대체, JAVA 압축, 중복 코드 삭제 같은 것들로 해결이 가능합니다. 또한 페이지 빌더의 경우 코드의 사용이 많아지면서 응답속도에 영향을 주는 경우도 있습니다.

개선 방법

궁극적으로 완전히 높은 점수를 얻고 모바일에 최적화를 하고 싶다면 페이지 빌더를 사용하지 말고 더 가벼운 워드프레스 프레임 워크로 갈아타야 합니다. 그러면 화려함은 사라지지만 사용자의 경험은 올라갈 것입니다.

또한 CSS 캐싱 최소화 및 타사 코드 사용을 줄이고, JAVA 캐싱 연기 및 지연, 플러그인수 줄이기가 하나의 방법입니다.

Cumulative Layout Shift

11 imagecore web vitals Google Core Web Vitals (LCP,FID,CLS) 정복

좋음 : 0.1

개선 필요 : 01.~0.25

나쁨 : 0.25 이상

정의 : 초기 로딩 후 페이지의 요소들이 얼마나 이동하는지

나쁜 점수의 주요 원인 : 이미지 크기 미지정, 광고 크기 미지정 또는 잘못 지정, 글꼴 로딩 지연, 전체창 팝업(광고포함)

SE ca70d5e6 feb8 4012 a848 13a33a4f3106core web vitals Google Core Web Vitals (LCP,FID,CLS) 정복

링크를 클릭하려고 했는데 요소들이 움직이면서 다른 링크를 클릭하거나, 원하지 않은 링크를 누른적이 있으신가요? 이것은 레이아웃의 누적 사용으로 인해 벌어지는 일입니다. 특정 요소가 페이지의 로딩 이후보다 현저히 더 느리다면 사용자들은 잘못된 요소를 클릭할 수 있고 이것은 부정적인 영향을 끼칩니다.

측정 방법

12 imagecore web vitals Google Core Web Vitals (LCP,FID,CLS) 정복

페이지 스피드 인사이트에서 CLS를 눌러주면 그와 관련된 사항이 나옵니다. 그중에 가장 많이 발견되는 것이 이미지의 크기가 지정되어 있지 않는 사항들과 디스플레이 광고의 로딩 지연입니다.

낮은 점수의 원인

많은 이미지가 있는 사이트의 경우 이미지의 크기를 지정하지 않고 “최대” 처럼 지정했을때 발생하는 경우가 대부분입니다. 또한 디스플레이 광고를 하는 경우에는 광고가 차지하는 위치와 공간을 사용자가 지정하지 않아 임의로 나타나는 경우 발생합니다.

개선 방법

이미지 및 비디오의 크기를 지정해주고, 글꼴은 미리 로드해주시면 좋습니다. 또한 CSS 최적화 및 캐시웜업 같은 방법으로 해결 할 수 있습니다.

전체적인 해결 방안 (선택사항)



Nitro Pack은 무료로 이용이 가능하지만 한정적인 기능을 지원합니다. 만약 이 링크를 통해 gardeninspring 를 코드에 입력할 경우 100명 한정으로 5%의 할인을 받을 수 있습니다.

Nitro Pack을 이용할 경우 다른 최적화 플러그인을 모두 지우고 하나만 이용하면 된다는 장점이 있습니다. 예를 들어 캐시, 이미지 최적화, Webp 변환, CSS 최적화, JAVA 최적화등을 위해 여러개의 플러그인을 사용하지 않더라도 니트로팩 하나로 모두 해결이 가능합니다.

* 모든 종류의 캐시를 최적화

* CDN 및 스크립트 최적화

* 이미지 최적화 및 WebP로 변환

그러나 단점도 존재합니다.

* 사이트를 추가하고 싶다면 용량별로 추가 요금을 내야합니다.

* 직접 모든 사항을 수정하는 것보다 높은 금액을 지불해야 함

* 세세한 조정을 하지 않을 경우 Java, CSS 충동을 일으킬 수 있음

간단한 비교를 통해 니트로팩 하나로 해결할 것인지 몇가지 플러그인 설치와 미세 조정을 통해 직접 수정할 것인지 정할 수 있습니다.

니트로팩의 경우 페이지뷰별로 금액이 상이합니다.

* 50,000 페이지뷰 (연간 결제시 한화 21,076원 / 총 25만원 수준 / VAT 포함 )

* 200,000 페이지뷰 (연간 결제시 한화 51,193원 / 총 62만원 수준 / VAT 포함)

만약 직접 미세 조정을 통해 수정할 경우

* 2개 이상의 플러그인을 설치하고 유료로 이용

* 한화 결제시 연간 총 20~25만원 수준으로 운영이 가능

* 직접 모든 사항 수정 가능



Nitro Pack을 사용하기로 결심한 경우

니트로팩을 사용하기로 결심한 경우 수정할 사항이 별로 없습니다. 결제 후 플러그인을 다운로드 받아 워드프레스에 설치를 하고 연동을 시켜줍니다.

13 imagecore web vitals Google Core Web Vitals (LCP,FID,CLS) 정복

Setting에 들어가서 Configuration에 있는 것을 가장 우측으로 옮겨줍니다. 메뉴얼의 경우 문제가 발생할 수 있기 때문에 저장 후 충돌로 인한 변경사항이 없는지 반드시 확인해야 합니다.

수동 설정 조정에서는 니트로팩과 잘 작동하지 않는 요소들의 URL을 제거시킬 수 있습니다. 만약 팝업, 제휴사 추적, 디스플레이 광고코드 같은 경우에는 최적화하지 않도록 주소를 넣어주시기 바랍니다. 통합탭에서는 CloudFlare CDN을 연동시킬 수 있습니다. 그리고 이미지 최적화, CSS, JAVA 같은 사항들도 본인의 입맛에 맞게 조절 하면 됩니다.

이게 끝입니다. 말 그대로 니트로팩은 올인원팩이기 때문에 사용자가 더 설정할 것이 없습니다. 다만 LCP같은 문제는 직접 조정해야 합니다.

니트로 팩이 필요한 경우

– 시간보다 돈을 투자하는게 맞는 사람

– 기술적인 부분에 시간을 투자하고 싶지 않은 사람

– 많은 것들에 대해 신경쓰고 싶지 않은 사람

니트로 팩의 단점

– 니트로팩은 해외 기업입니다. 의사소통에 문제가 발생 할 수 있습니다.

– 서버 문제로 가끔 사이트 전체가 중단되는 경우가 있습니다.

– 직접 미세 조정을 통해 할 수 있는 기술들을 습득할 수 없습니다.



미세 조정을 통한 스피드 향상을 원하는 경우

SE e1cd4715 841d 4384 b126 b17c539cb1f5core web vitals Google Core Web Vitals (LCP,FID,CLS) 정복

Core Web Vitals 강의에서는 여기서 언급한 모든 사항과 더불어 미세 조정을 통한 사이트 스피드 향상을 위해 아래의 모듈을 포함합니다.

– 가벼운 워드프레스 테마로 이동하기

– 사이트 커스터마이징

– 페이지 빌더를 그대로 이용할 경우 수정 사항

– 쓸모없는 플러그인 선택 및 제거 방법 (쿼리값 이용)

– WPRocket에 대한 모든 사항

– Bunny CDN에 대한 모든 사항

– 디스플레이 광고 최적화

– 구글 스피드 인사이트 일반오류에 대한 모든 해결책 (체크 시트)

이 강의는 초보자를 위한 강의가 아니기 때문에 워드프레스에 대한 지식이 전혀 없다면 따라올 수 없는 내용입니다. 또한 강의에는 유료플러그인이 포함되어 있으며, 봄의 정원 독점 할인을 통해 최대 25% 할인을 받을 수 있지만 수강료와는 별도로 지출이 발생합니다.

강의를 듣지 않더라도 스스로 수정할 수 있는 부분들이 있습니다. 스피드 인사이트와 GTMetrix 같은 사이트에서 하나씩 보면서 수정을 할 경우 충분히 수정도 가능합니다.

가벼운 프레임 워크

GeneratePress 와 Blocks은 워드프레스의 테마 및 클래식 블록으로 Core Web Vitals를 위한 최선의 선택입니다. 엘리멘토를 이용할 경우 한계점이 발생하지만 GeneratePress를 이용할 경우 호스팅 서버 응답 문제만 해결한다면 가장 높은 점수를 얻을 수 있습니다.

GenetarePress & Blocks를 설치하고 커스터마이징을 통해 세팅하여 최적화 할 경우 얻을 수 있는 스피드 인사이트 일반문제 해결 사항은 아래와 같습니다.

– 초기 서버 응답 시간 단축

– 사용하지 않는 CSS 제거

– 과도한 코드 사용 제거

– 메인 스레드 작업 최소화

– JAVA 스크립트 최적화

– FID, CLS 최적화

GeneratePress & GenerateBlocks 자세히 알아보기

GeneratePress : 아래 링크를 클릭하고 간단하게 할인 받기

연간 플랜 15달러 할인 / 평생 플랜 25달러 할인

GenerateBlocks : 아래 링크를 클릭하고 간단하게 할인 받기

Personal 플랜 15% 할인 / Plus 플랜 15% 할인 / Pro 플랜 15% 할인

WPRocket

(봄의정원 수강생분들은 제공되는 20% 할인 쿠폰을 강의내용에서 꼭 확인해주세요)

저를 비롯한 많은 워드프레스 이용자들은 Core Web Vitals가 출시되고 꽤 오랜시간동안 최적의 점수를 얻기 위한 캐시 및 자바 최적화, 압축등을 지원하는 플러그인을 가지고 테스트를 했습니다. 하나의 플러그인으로 끝내야 겠다면 NitroPack을 따라올 것은 없지만, 세세하게 미세조정을 통해 모든 사항을 조절하고 싶다면 캐시 및 압축 플러그인은 WPRocket으로 해결이 가능합니다.

WPRocket을 설치하고 세팅하여 최적화 할 경우 얻을 수 있는 일반문제 해결 사항은 아래와 같습니다.

이미지 요소에 width 및 height가 명시되어 있지 않습니다.

오프스크린 이미지 지연하기

렌더링 차단 리소스 제거하기

사용하지 않는 Javascript 줄이기

웹폰트가 로드되는 동안 모든 텍스트가 표시되지 않습니다.

중요한 요청을 미리 로드하기

정적인 애셋에 효율적인 캐시 정책 사용하기

CSS 축소하기

Javascript 줄이기

필수 원본 미리 연결하기

중요한 요청을 미리 로드하기

JavaScript 번들에서 중복 모듈 삭제

JavaScript 실행 시간

document.write() 지양하기

0026core web vitals Google Core Web Vitals (LCP,FID,CLS) 정복
0030core web vitals Google Core Web Vitals (LCP,FID,CLS) 정복
0065core web vitals Google Core Web Vitals (LCP,FID,CLS) 정복

그외에 Cloud 기반 호스팅으로 옮기기, BunnyCDN으로 옮기기가 있습니다. 한국의 구글은 키워드의 난이도를 떠나서 SERP 노출 시키기가 글로벌 시장보다 너무 쉽습니다. 카페 24로 호스팅을 이전하면서 네이버 블로그에 적기 위해 On,Off Page SEO를 전혀 고려하지 않은 새로운 글조차 1위입니다.

SE d5a9d61c 296d 46bf a385 6d1eaa20ea87core web vitals Google Core Web Vitals (LCP,FID,CLS) 정복

네이버에 있는 글을 대충 막 옮기고 SEO 작업을 하나도 안해도 10위권안에는 무조건 들어가는게 현재 한국의 구글입니다. 글로벌에서는 절대 불가능하죠. 점차 비중이 늘어가는 구글 검색엔진에서 큰 성과가 있으시길 진심으로 기원합니다.

빠른 사이트와 높은 점수로 구글에서 높은 순위를 얻으실 수 있는 날이 오시리라 믿습니다.

Table of Contents

0
Would love your thoughts, please comment.x
()
x