[20230818_Google Search Console, core web vitals, Accelerated Mobile Pages]

YunTrollpark·2023년 8월 18일

AMP Accelerated Mobile Pages CWV Core Web Vitals google search console

🔍 google search console

1. google search console이란?

google search console은 구글이 제공하는 무료 분석 툴 서비스이다.구글 애널리틱스는 사용자 중점이라면 구글 서치 콘솔은 검색엔진 중점의 분석 툴이다. 구글 애널리틱스는 페이지를 사용하는 사용자와 관련된 데이터들을 보여주고, 구글 서치 콘솔은 검색 엔진 기준으로 사이트의 오류같은 것을 보여준다.

2. google search console 사용하기

방법은 2가지가 있다. 하나는 메인 도메인을 입력하는 것, 다른 하나는 url을 입력하는 방법이다.
대표 도메인을 하나만 입력하는 이유는 SEO 기준으로 모두 도메인으로 인식해서 결과적으로 트래픽을 하나에 집중시키기 위해서 대표적인 도메인 하나만 입력하는 것!

그리고 도메인으로 등록 해야하는 경우 DNS(도메인 네임 시스템) 인증이 필요해서 등록하기가 까다롭다...

그러면 URL 접두어로 등록을 해보자!

먼저 등록 할 대표적인 URL 주소를 입력한다.

소유권 확인 진행 후 다른 확인 방법에 HTML 태그를 선택. 그리고 메타태그를 복사한다.

head 내부에 meta 태그가 있는 곳들에 아까 복사한 메타 코드를 삽입한다!
그리고 배포!

🧮 Core Web Vitals

웹 성능 지표를 수치로 나타내는 3가지 요소.(LCP, FID, CLS)
구글이 제시하는 사이트 성적표로 로드 속도, 가시성, 보안 등을 포함한다. 해당 지표는 개발자 뿐만 아니라 페이지 뷰와 이탈률, 그리고 전환률을 측정하는 마케팅과 사업 직군에도 중요하다!

1. LCP: 최대 콘텐츠 렌더링 시간

∙ 사용자가 URL을 클릭해 페이지를 방문한 시점부터 가장 큰 콘텐츠 요소들을(이미지, 영상, 많은 텍스트) 렌더링하는 데 걸리는 시간을 나타냄(URL 클릭 시점부터 페이지가 전부 로딩되는데 걸리는 시간)
∙ 좋은 평가를 받는 웹 사이트의 평균 LCP 시간이 2.5초

2. FID: 최초 입력 반응 시간

∙ 웹페이지가 모두 로드된 후 측정되는 지표
∙ 사용자가 렌더링이 끝난 후 사이트 요소 하나를 클릭할 때, 해당 요소가 작동하는데 걸리는 시간을 나타냄(구글은 FID 200밀리초 이내를 권장)
∙ 예를 들어 블로그 게시글 리스트 들 중에서 하나를 클릭한 시점부터 해당 블로그 글이 전부 로딩 될 때까지 걸리는 시간
∙ FID에 영향을 미치는 것은 긴 태스크, JavaScript의 실행 시간, JavaScript의 번들, 렌더 블로킹 등이 있음

3. CLS: 레이아웃 변경 횟수

∙ 사용자가 페이지에 머무는 시간 모두를 측정해 해당 시간 동안 페이지에서 레이아웃이 얼마나 바뀌었는지 측정 (0에 가까울수록 레이아웃이 변하지 않았다는 뜻임, 숫자가 클수록 레이아웃이 많이 변경된다는 뜻)
∙ 구글은 0.1 미만을 권장
∙ CLS는 팝업, 쿠키 배너, 광고, 사이즈가 정해지지 않은 이미지 등 사이트 가독성을 해치는 요소를 측정

🔖 Accelerated Mobile Pages

장점

∙ AMP 페이지의 유효성을 검사하고 Google 검색결과에 표시되도록 올바르게 설정되어 있는지 확인
∙ HTML 페이지로서 다양한 기술적 접근방식을 활용하여 속도를 최우선순위로 삼고 콘텐츠를 거의 즉시 로드함으로써 사용자에게 더욱 빠른 사용 환경을 제공
∙ 해당 도메인의 서버가 느릴 경우 기사를 긁어가서 구글에서 대신 본인들 서버로 돌려줌.

단점

∙ CSS는 모두 인라인으로 지정해야 하며 50KB 용량 제한이 있음
∙ 스크립트는 <script async src="https://cdn.ampproject.org/v0.js"></script>처럼 AMP에서 제공하는 스크립트 외에는 외부 JavaScript를 허용 ❌
∙ 기본 HTML 태그 대신 <amp-img>, <amp-anim>, <amp-video>같은 AMP 전용 태그를 사용
∙ pc보다 모바일을 우선해서 모바일 전용 레이아웃으로 보여 줌