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)입니다.

Google은 발표했습니다 2021년 XNUMX월부터 이러한 측정 항목은 검색 결과에서 웹페이지 순위를 결정하는 데 사용되는 순위 신호의 일부가 될 것입니다.

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

가장 큰 콘텐츠 페인트 (LCP): LCP는 웹페이지에서 가장 큰 가시적 이미지나 텍스트 블록이 로드되는 데 걸리는 시간을 측정합니다. 가장 큰 가시적 텍스트나 이미지가 빠르게 로드되면 나머지 이미지와 텍스트도 빠르게 로드될 것으로 인식됩니다. 통과하는 데 필요한 로드 시간은 다음과 같습니다. 2.5 초.

첫 번째 입력 지연 (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의 웹사이트 필드 데이터에 상당한 변화가 있는 것을 알아챘습니다. 그 외에는 아무것도 하지 않았습니다.

빠른 웹 호스트를 찾고 있다면, 성실함 없이 제휴사에 의해 주도되는 많은 추천이 있습니다. WordPress를 실행하고 있고 그것을 감당할 수 있다면, 저는 다음을 강력히 추천합니다. 킨스타. WordPress에 가장 좋습니다. 더 저렴한 것이 필요하거나 WordPress를 사용하지 않는 경우 구름 매우 효과적이기도 하죠.

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

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

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

테마에서 찾아야 할 모범 사례의 목록이 길다. 가장 흔한 나쁜 사례 중 일부는 JQuery에 지나치게 의존하고, 필요하지 않을 때 너무 많은 CSS/JS를 로드하고, 테마 크기가 큰 것 등이다. 다음과 같은 도구를 항상 사용할 수 있다. 노란색 랩데모를 테스트합니다.

WordPress를 사용하는 경우 다음 목록을 확인할 수 있습니다. 가장 빠른 WordPress 테마.

3. 이미지 최적화

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

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

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

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

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

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

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

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

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

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

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

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

WordPress 사용자를 위해 다음과 같은 플러그인이 있습니다. 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를 푸시하는 서비스를 사용하는 경우 이를 제거해도 안전합니다.

WordPress를 사용하면 다음과 같은 플러그인이 있습니다. WP Rocket, LiteSpeed ​​Cache, FlyingPress 등을 사용하면 이러한 목표를 달성하는 데 도움이 됩니다.

11. AdSense 스마트 로딩 구현

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

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

이를 수행하는 데 도움이 되는 WordPress 플러그인이 많이 있습니다. WP Rocket 그리고 Flying Scripts가 그 예입니다. 제가 아는 한 이 방법은 Google AdSense 정책을 위반하지 않습니다.

참고 : 이 방법은 지각된 속도와 페이지 점수를 개선하는 데 도움이 될 수 있지만 AdSense 수익에 영향을 미칠 수 있습니다. 가치가 있는지 확인하기 위해 실험을 실행하는 것이 좋습니다.

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 오픈 소스 이 프로젝트는 Google에서 시작되었습니다.

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

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

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

맺음말

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

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