Core Web Vitals(Adsense)를 위해 웹사이트를 최적화하는 방법

Core Web Vitals를 개선하기 위한 경쟁은 쉬운 일이 아닙니다. Google AdSense와 같은 광고 프로그램에 의존하여 웹사이트를 수익화하면 더 어려워집니다.

Google AdSense를 실행하는 웹사이트는 Google AdSense가 없는 동일한 웹사이트보다 Core Web Vitals 테스트에 실패할 가능성이 10배 더 높습니다. 이는 주로 Google AdSense가 웹사이트에 추가하는 타사 요청 및 자산 수 때문입니다. 이러한 자산의 대부분은 최적화되지 않았고, 크고, 사용자 친화적이지 않습니다.

AdSense와 광고 플랫폼 외에도 최적화되지 않은 이미지, JavaScript, CSS가 많은 경우(특히 상단 영역) Core Web Vitals 테스트에서 탈락할 가능성이 매우 높습니다.

여러분이 코어 웹 바이탈 테스트를 통과하고 검색 엔진 순위 잠재력을 개선하는 데 어려움을 겪고 있다면, 이 글에서 실용적인 해결책을 찾으실 수 있습니다.

핵심 웹 바이탈이란 무엇입니까?

Core Web Vitals는 Google Lighthouse에서 제공하는 지표로, 사이트가 좋은 페이지 경험을 제공하는 방식을 결정합니다. 테스트를 실행할 때 많은 지표가 있지만 가장 중요한 지표는 Largest Contentful Paint(LCP), First Input Delay(FID), Cumulative Layout Shift(CLS)입니다.

구글은 2021년 5월부터 이러한 지표들이 검색 결과에서 웹페이지 순위를 결정하는 데 사용되는 순위 신호의 일부가 될 것이라고 발표했습니다 .

요약하자면, Core Web Vitals는 웹마스터에게 공포를 안겨주기 위한 것이 아니라 웹사이트의 페이지 경험을 개선하기 위한 수단이었다고 할 수 있습니다.

최대 콘텐츠 페인트(LCP) : LCP는 웹페이지에서 가장 큰 이미지 또는 텍스트 블록이 로드되는 데 걸리는 시간을 측정합니다. 가장 큰 이미지나 텍스트가 빠르게 로드되면 나머지 이미지와 텍스트도 빠르게 로드될 것으로 예상됩니다. LCP를 통과하기 위한 최소 로드 시간은 2.5초 입니다.

첫 입력 지연(FID) : FID는 웹 페이지의 상호작용성을 측정하는 지표입니다. 사용자가 사이트를 클릭한 후 브라우저가 이벤트 핸들러 처리를 시작하는 데 걸리는 시간으로 측정되며, 흔히 웹사이트의 첫인상으로 불립니다. 이상적인 FID 값은 100밀리초 입니다.

누적 레이아웃 변화(CLS) : CLS는 웹 페이지에서 발생하는 레이아웃 변화를 측정합니다. 웹 페이지가 로드된 후 갑자기 무언가가 나타나거나 사라지면서 페이지 크기가 조정될 때 발생하는 변화를 측정하는 것입니다. 이는 사용자 경험에 매우 부정적인 영향을 미치며, 저도 동의합니다. 합격 기준 점수는 0.1 입니다.

Core Web Vitals를 위해 웹사이트를 최적화하는 방법

웹사이트를 최적화하려면 다음 단계를 따르세요.

1. 빠른 웹 호스트로 시작하세요

응답 시간이 끔찍한 웹 호스트가 있다면, 여기에 나열한 다른 모든 것들이 원하는 결과를 제공하지 못할 수도 있습니다. 서버가 요청에 더 빨리 응답할수록 더 좋습니다.

빠른 Time to First Byte(TTFB)를 갖춘 웹 호스트가 중요한 이유는 무엇일까요? 어떤 사람들은 TTFB가 중요하지 않다고 주장하지만, 중요합니다. 그것이 다른 모든 것의 기초입니다. 인터넷 속도가 느린 도시에 사용자가 있는 경우 웹 호스트가 얼마나 빨리 응답할 수 있는지가 모든 것을 의미합니다. 초고속 인터넷이 있는 도시에서 주로 사용자가 있는 경우 모든 웹 호스트가 좋은 성과를 낼 수 있습니다.

웹 호스트가 3G 대신 2G 또는 4G에 어떻게 반응하는지 테스트해 보세요. 3G 또는 2G를 통해 많은 사용자가 연결되면 Core Web Vitals 점수에 합산되기 때문입니다. 따라서 100밀리초가 중요합니다. FID에서 101ms를 받는 것과 100ms를 받는 것의 차이는 101ms에서는 통과하지만 1ms에서는 실패한다는 것입니다. 따라서 누군가가 XNUMXms는 중요하지 않다고 말한다면 그 사람은 틀렸을 수 있습니다.

웹 호스팅 업체를 선택할 때는 웹사이트 사용자 대부분이 위치한 지역과 가까운 데이터센터를 선택하는 것이 중요합니다. 웹 분석 데이터를 통해 사용자 위치를 파악할 수 있습니다. 대부분의 사용자가 어디에서 접속하는지 확인하고, 그 위치와 가까운 데이터센터를 선택하세요. 가까울수록 좋습니다.

저는 개인적으로 웹 호스트를 변경한 후 Core Web Vitals의 웹사이트 필드 데이터에 상당한 변화가 있는 것을 알아챘습니다. 그 외에는 아무것도 하지 않았습니다.

빠른 웹 호스팅을 찾고 계신다면, 진정성 없는 제휴 마케팅에 기반한 추천 글들이 많이 있습니다. 워드프레스를 운영하고 있고 비용에 여유가 있다면 Kinsta를 강력 추천합니다 . 워드프레스 호스팅에 있어서는 최고입니다. 더 저렴한 호스팅을 원하시거나 워드프레스를 사용하지 않으신다면 Cloudways 도 매우 효과적입니다.

2. 가볍고 속도 최적화된 테마를 사용하세요

이 팁은 특히 코더가 아닌 사람과 시간이 부족한 코더에게 매우 유용합니다. 특히 많은 옵션이 있는 WordPress를 사용하는 경우 가볍고 속도가 최적화된 테마를 사용해야 합니다.

테마는 웹사이트의 골격과 같기 때문에 골격이 깨지면 본체도 깨질 것입니다. 그게 전부입니다.

테마를 선택할 때 고려해야 할 모범 사례는 매우 많습니다. 흔히 저지르는 잘못된 관행으로는 jQuery에 과도하게 의존하는 것, 필요하지 않은 CSS/JS 파일을 너무 많이 로드하는 것, 테마 크기가 지나치게 큰 것 등이 있습니다. Yellow Labs 와 같은 도구를 사용하여 데모를 테스트해 볼 수도 있습니다.

워드프레스를 사용하고 있다면 가장 빠른 워드프레스 테마 목록을 확인해 보세요.

3. 이미지 최적화

이미지는 멋지다. 이미지를 매력적으로 만든다. 하지만 최적화되지 않으면 부담이 될 수 있다. 3MB와 같은 큰 이미지는 확실히 속도에 영향을 미칠 것이다. 그리고 스크롤하기 전에 사이트를 방문했을 때 이러한 이미지가 보인다면 확실히 LCP 지표에 영향을 미칠 것이다.

사실은 최적화되지 않은 이미지가 페이지 크기를 증가시킨다는 것입니다. 페이지 크기가 클수록 로드하는 데 시간이 더 오래 걸립니다.

저는 개인적으로 업로드하기 전에 모든 이미지를 최적화하는 것을 선호합니다. 이미지 최적화를 위해 외부 서비스를 사용하지 않습니다. 그러나 WordPress나 유사한 CMS를 사용하는 경우 이미지를 자동으로 최적화하는 플러그인과 솔루션이 있습니다. 무엇을 사용하든 클라우드 솔루션도 있습니다.

4. 배경 이미지 제거 또는 크기 줄이기

배경 이미지는 보통 매우 큽니다. 그리고 의미 있는 콘텐츠가 표시되기 전에 먼저 로드해야 하기 때문에 로드 시간이 느려질 수 있습니다.

배경 이미지를 완전히 제거하여 웹사이트를 더 빠르게 만들 수 있습니다. 만약 그것이 그렇게 중요하다면, 가능한 한 가장 작은 크기로 최적화하거나 이미지 대신 패턴을 사용하는 것을 고려하세요.

5. 브라우저 캐싱을 사용하세요

충성도 높은 독자가 많다면 브라우저 캐싱을 고려해야 합니다. 사용자가 처음으로 귀하의 웹사이트를 방문하면 브라우저가 해당 웹사이트를 캐싱합니다. 다른 모든 방문에서는 즉시 로드됩니다. 이렇게 하면 두 번째 방문부터 FID와 LCP가 크게 향상될 수 있습니다.

WordPress 사용자의 경우 대부분 캐싱 플러그인을 사용하면 이를 달성할 수 있습니다.

6. JavaScript를 최소화하고 사용하지 않는 JavaScript를 연기합니다.

JavaScript는 놀랍지만 종종 렌더링을 차단합니다. 즉, 로드 시간과 궁극적으로 FID에 영향을 미칠 수 있습니다.

파일 크기를 줄이기 위해 공백과 주석을 제거하여 JavaScript를 최소화해 보세요. 또한 중요하지 않은 JavaScript를 연기해야 ​​합니다. 이렇게 하면 FID가 개선될 것입니다.

워드프레스 사용자의 경우, Autoptimize , WP Rocket 등 의 플러그인을 사용하여 이 작업을 수행할 수 있습니다.

7. AdSense 크기 속성 설정

웹사이트에서 AdSense를 실행하고 CLS로 어려움을 겪고 있다면 이것이 모든 문제를 해결할 수 있습니다. 저에게는 그랬고 여러분에게도 그럴 것입니다.

사용자가 방문할 때 보이는 헤더 근처에 광고 단위가 있는 경우, 한 가지 문제는 광고가 즉시 로드되지 않을 수 있다는 것입니다. 페이지가 이미 로드된 후에 로드될 수 있으며, 로드될 때 레이아웃이 이동합니다. 이는 반응형 광고 단위에서 매우 일반적입니다. 이런 일이 발생하면 CLS 메트릭을 통과하는 것이 불가능합니다.

이를 처리하는 가장 좋은 방법은 AdSense 코드를 약간 수정하는 것입니다. 걱정하지 마세요. 매우 합법적입니다. 광고의 크기 속성, 특히 높이를 지정하기만 하면 됩니다. 그렇게 하면 광고가 로딩될 때마다 레이아웃이 바뀌는 것을 더 이상 알아차리지 못할 것입니다.

아래는 제 블로그에서 헤더 바로 아래에 사용한 반응형 광고 단위의 예입니다. 게시자 ID와 광고 슬롯을 XXXXXX로 대체했습니다. 높이 속성(min-height: 300px)을 추가한 것을 알아챘습니다. 그렇게 한 순간, 모든 CLS 문제가 영원히 사라졌습니다.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Header ad -->
<ins class="adsbygoogle"
     style="display:block; min-height: 300px"
     data-ad-client="ca-pub-xxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

이렇게 하면 페이지에서 해당 크기를 예약할 수 있습니다. 따라서 광고가 표시될 때마다 레이아웃이 변경되지 않습니다. 이미 크기를 설정했기 때문입니다.

8. 이미지 및 기타 미디어에 대한 크기 속성 설정

광고와 마찬가지로 이미지와 다른 미디어는 웹사이트에 로드될 때 레이아웃이 변경될 수 있습니다. 무언가를 읽고 있을 때 이미지가 로드되고 갑자기 레이아웃이 변경되고, 읽고 있던 내용이 보이지 않고 다른 것이 보이거나 실수로 다른 것을 클릭할 수도 있습니다.

미디어 파일에 크기 속성을 설정하면 이 모든 것을 피할 수 있습니다. CLS 메트릭은 당신이 그렇게 한 것을 기뻐할 것입니다.

9. 이미지를 레이지 로드합니다.

PageSpeed ​​Insight에서 화면 밖 이미지 로딩을 지연 시키라는 조언을 보셨을 수도 있습니다 . 간단히 말해, 이미지를 지연 로딩하라는 뜻입니다.

레이지 로딩은 페이지 크기를 줄이고 사용자가 방문할 때 페이지 로딩 시간도 줄이는 역할을 합니다. 이는 CWV 지표에 좋습니다.

이는 특히 LCP를 개선하는 데 도움이 될 것입니다.

10. 중요한 CSS를 최소화하고 생성하여 CSS를 최적화합니다.

CSS는 웹사이트를 멋지게 보이게 하는 요소이지만, 크기가 큰 CSS 파일은 사용자에게 페이지 렌더링을 지연시키기 때문에 큰 문제가 될 수 있습니다.

사용자가 귀하의 웹사이트를 방문하면 브라우저는 정상적인 동작으로 웹 페이지 헤더에서 참조된 모든 CSS를 로드, 구문 분석 및 실행할 때까지 사용자에게 웹 페이지 렌더링을 지연합니다. 큰 CSS 파일이 있는 경우 이는 큰 문제가 될 수 있습니다. 사이트 속도가 느려집니다.

Critical CSS는 페이지가 로드되는 데 필요한 CSS만 로드하여 도움이 될 수 있습니다. 나머지 CSS는 비동기적으로 로드할 수 있습니다.

CSS에서 공백과 주석을 제거하여 최소화하면 파일 크기를 줄이는 데 도움이 됩니다.

사용하지 않는 CSS 도 제거할 수 있습니다 . 사용하는 서비스에서 사용하지 않는 CSS를 푸시하는 경우, 해당 CSS를 제거해도 안전합니다.

워드프레스를 사용하신다면 WP Rocket , LiteSpeed ​​Cache, FlyingPress 등과 같은 플러그인을 통해 이러한 목표를 달성할 수 있습니다.

11. AdSense 스마트 로딩 구현

이 방법을 사용하면 AdSense가 웹사이트 속도를 저하시키는 모든 문제를 거의 완벽하게 제거할 수 있습니다.

이는 AdSense를 스마트하게 로딩하는 것에 대한 것입니다. 사용자가 스크롤이나 클릭과 같은 동작을 취할 때까지 AdSense는 로드되지 않습니다. 이렇게 하면 로드 시간과 AdSense에 의해 영향을 받는 모든 Core web vitals가 크게 개선됩니다.

워드프레스에는 이 작업을 도와주는 플러그인이 많이 있습니다. WP Rocket 과 Flying Scripts가 그 예입니다. 제가 아는 한 이 방법은 구글 애드센스 정책을 위반하지 않습니다.

참고: 이 방법은 체감 속도와 페이지 조회 점수를 개선하는 데 도움이 될 수 있지만, 애드센스 수익에 영향을 미칠 수 있습니다. 따라서 이 방법이 효과적인지 확인하기 위해 직접 실험을 해보시는 것을 권장합니다.

12. 가능하면 System Stack 글꼴을 사용하세요.

글꼴은 모든 웹사이트에서 추가 로드 시간을 추가합니다. 그리고 이미지가 없는 웹 페이지의 경우 텍스트 블록이 LCP 등급에 영향을 미칠 수 있습니다. 이 경우 LCP 점수는 글꼴에 의해 직접 영향을 받습니다.

Google Font와 Font Awesome이 계속 개선되고 있지만, 시스템 스택 글꼴을 사용하면 상당한 개선이 제공됩니다. 기기에 따라 그렇게 화려하지는 않지만요.

13. CDN을 사용하세요

세계 여러 지역에 사용자가 있는 경우 CDN을 사용하면 속도를 개선하는 데 도움이 되며 간접적으로 Core Web Vitals 지표도 향상할 수 있습니다.

간단히 설명하면 CDN은 귀하의 웹사이트를 여러 개 복사하여 전 세계 여러 지역의 다양한 Point of Presence(POP)에 저장합니다. 누군가가 귀하의 웹사이트를 요청하면 가장 가까운 위치에서 귀하의 웹사이트를 제공합니다.

예를 들어, 귀하의 사이트가 미국에서 호스팅되고 영국에서 온 방문자가 있는 경우, CDN은 미국에서 귀하의 사이트를 가져오는 대신 영국에서 귀하의 사이트를 제공합니다. 그 효과는 빠른 배달입니다. 속도.

시중에 나와 있는 최고의 CDN들을 확인해 보세요.

14. DNS 프리페칭 설정

웹사이트 제공을 위해 CDN과 같은 외부 서비스에 의존하는 경우, DNS 조회로 인한 지연을 최소화하기 위해 DNS 프리페칭을 설정 해야 할 수 있습니다.

DNS 프리페칭은 호출되기 전에 DNS를 프리페칭합니다. 그래서 마침내 호출될 때 즉시 로드됩니다.

15. 타사 스크립트 최적화

사이트에서 사용하는 일부 서비스가 사이트 속도를 저하시킬 수 있는 타사 스크립트를 추가하지 않는지 확인하세요.

사이트 속도를 저하시키는 타사 요청으로 인한 솔루션을 더 나은 솔루션으로 대체할 수 있습니다.

Google AdSense와 같은 타사 스크립트의 경우 할 수 있는 일이 거의 없습니다. 가장 좋은 방법은 한 페이지에 최대 3개의 광고를 통합하여 사용하는 것입니다. 일치하는 콘텐츠는 수입은 적지만 로드 시간은 늘어나므로 피하십시오.

16. 접힌 부분 위에서 AdSense 제거

이 조언은 실험에 근거합니다. LCP를 제외한 모든 메트릭이 검색 콘솔 보고서에서 양호하다면 먼저 이미지와 글꼴이 최적화되었는지 확인하세요. 최적화했는데도 여전히 LCP에 실패한다면 AdSense가 원인일 수 있습니다.

여유가 된다면 한 달 동안 AdSense를 화면에서 제거한 후 문제가 해결되는지 확인하세요.

제거하고 싶지 않으면 수동으로 지연시키거나 Flying Scripts와 같은 플러그인을 사용할 수 있습니다.

17. AMP로 전환

AMP는 Accelerated Mobile Pages의 약자입니다. AMP는 모바일 기기에서 웹 페이지가 더 빠르게 로드되도록 최적화하는 것을 목표로 합니다. 그리고 물론, AMP 오픈 소스 프로젝트는 구글에서 시작했습니다.

AMP는 원래 모바일 페이지 속도를 높이기 위해 고안되었지만, 데스크톱 페이지 속도도 높일 수 있습니다.

당사의 관찰에 따르면 AMP 페이지는 모바일이나 데스크톱 페이지보다 꾸준히 빠르며, 어떤 경우에는 100% 이상 빠릅니다.

웹사이트의 유일한 수익화 전략이 Google AdSense인 경우 모든 웹사이트를 AMP로 전환하는 것을 고려할 수 있습니다. 저는 개인적으로 제가 소유한 블로그에서 AMP 페이지의 AdSense가 모바일 및 데스크톱보다 더 많이 전환되는 것을 보았습니다!

맺음말

Core Web vitals는 Google뿐만 아니라 사용자를 위해 웹사이트를 개선하는 데 도움이 될 수 있습니다. 실험실 데이터 테스트 점수는 좋지만 현장 데이터 점수는 나쁜 경우가 매우 흔합니다.

이는 사용자의 구성 때문입니다. 대부분의 사용자가 인터넷 속도가 느린 지역에 있는 경우, 최적화는 잘 했지만 필드 데이터에서는 여전히 실패했을 수 있습니다.