웹사이트의 성능을 향상시키는 것에 관한 한, Google PageSpeed Insight는 매우 귀중한 도구입니다. 그러나 Google Ads로 웹사이트를 수익화하고 싶을 때는 어떨까요? 빠른 사이트와 광고 수익을 동시에 얻을 수 있을까요? 다행히도, 답은 예입니다. 이 기사에서는 웹사이트 성능을 희생하지 않으면서 Google Ads를 사용하여 웹사이트를 최적화하기 위한 검증된 기술을 다룰 것입니다.
Google Ads와의 속도 문제
Google Ads를 웹사이트에 추가하면 종종 로드 속도가 저하됩니다. 이 지연은 일반적으로 광고 스크립트가 사용자 콘텐츠가 완전히 로드되기 전에 실행되기 때문에 발생합니다. 결과적으로 웹사이트가 느려질 수 있으며, 이는 사용자 경험에 부정적인 영향을 미치고 궁극적으로 검색 엔진 순위에도 영향을 줄 수 있습니다.
해결책은 무엇일까요? Google Ads 관련 스크립트와 파일을 최적화하는 것이 필수적입니다. 이는 사용자 경험을 개선할 뿐만 아니라 Google에서의 높은 순위 가능성을 높여줍니다.
이를 달성하기 위해 사용할 수 있는 여러 옵션이 있으며, 플러그인 사용 및 코드 수정이 포함됩니다. Autoptimize는 JavaScript를 최적화하여 속도를 높이는 데 도움을 줄 수 있는 플러그인 중 하나입니다.
Autoptimize 플러그인 사용 방법
Autoptimize 설치는 웹사이트 성능 향상을 위한 첫 번째 중요한 단계입니다. 플러그인을 활성화하고 JavaScript를 최적화한 후에는 더 나은 성능을 위한 다음 단계로 이동할 수 있습니다.
속도 향상을 위한 CSS 최적화
“JavaScript 최적화” 옵션을 선택한 후, 이제 CSS 파일에 주목할 시간입니다. Autoptimize 설정에서 “CSS 최적화” 옵션도 선택하십시오. 이 작업은 JavaScript에 대해 수행한 것과 유사한 방식으로 CSS 파일의 크기를 줄여 불필요한 공백, 주석을 제거하고 여러 파일을 하나로 결합합니다. 이러한 통합은 웹사이트를 로드하는 데 필요한 HTTP 요청 수를 줄여 페이지 로드 시간을 크게 단축시킬 수 있습니다.
- HTTP 요청 수 감소 : 브라우저가 다운로드해야 하는 추가 CSS 또는 JavaScript 파일마다 귀하의 웹사이트 로드 시간이 증가할 수 있습니다. Autoptimize는 이를 결합하여 요청 수를 줄이고 사이트 로딩 속도를 높입니다.
- 파일 압축 : 파일을 결합하는 것 외에도 Autoptimize는 파일을 압축하여 품질이나 기능을 잃지 않고 크기를 줄입니다.
- 글꼴 관리 : 또 다른 흥미로운 옵션은 글꼴 최적화입니다. “글꼴 최적화”를 선택하면 글꼴을 더 효율적으로 로드하여 렌더링 차단을 줄일 수 있습니다.
- 이미지 지연 로드 : Lazy Load(지연 로드) 기능은 이미지가 사용자 시야에 들어올 때만 로드되는 기능입니다. 이는 페이지 초기 로드 시간을 가속화하는 데 도움이 됩니다.
이미지 최적화
웹사이트 속도를 개선하기 위한 또 다른 핵심 단계는 이미지 최적화입니다. Autoptimize는 이미지 최적화 옵션을 직접 제공하지 않지만, 이를 위해 보조 플러그인 사용을 강력히 권장합니다. 최적화된 이미지는 로드할 파일 크기를 줄여 사이트 속도에 큰 기여를 합니다.
- 올바른 포맷 선택 : WebP와 같은 최신 이미지 포맷을 사용하십시오. 이는 전통적인 포맷과 유사한 품질을 제공하면서도 파일 크기를 상당히 줄입니다.
- 스마트 압축 : Imagify 또는 ShortPixel과 같은 도구는 이미지 품질을 크게 잃지 않고 압축할 수 있어 사이트 로드 속도를 높이며 시각적 경험을 저해하지 않습니다.
- 이미지 크기 조정 : 이미지 크기가 적절하게 조정되었는지 확인하십시오. 할당된 공간에 정확히 맞게 조정된 이미지는 페이지의 크기를 줄입니다.
캐시 및 CDN
마지막으로, 캐시 및 콘텐츠 전송 네트워크(CDN)를 활용하면 웹사이트 로드 시간을 더욱 줄일 수 있습니다. Autoptimize는 WP Rocket 또는 W3 Total Cache와 같은 캐시 플러그인과 잘 통합되어 저장된 정적 페이지 버전을 신속하게 재방문하는 방문자에게 제공할 수 있습니다. CDN을 사용하면 방문자와 가까운 서버에서 콘텐츠를 배포하여 로딩 지연을 줄일 수 있습니다.
- 캐시 설정 : 올바른 캐시 구성은 미리 로드된 페이지를 방문자에게 신속하게 제공할 수 있어 각 페이지를 실시간으로 생성하는 데 필요한 작업량을 줄이며,
- CDN 통합 : CDN은 웹사이트 복사본을 전 세계 여러 서버에 저장하여 사용자에게 콘텐츠 소스를 항상 가까이에서 제공할 수 있습니다.
이 단계를 따르고 Autoptimize의 기능을 최대한 활용함으로써 웹사이트 성능을 크게 향상시킬 수 있으며, 사용자에게 더 나은 경험을 제공하고 동시에 SEO를 개선할 수 있습니다.
코드 수정: 추가 단계
코딩에 익숙하다면, Google Ads 광고 로드를 최적화하기 위해 사용자 지정 스크립트를 추가하는 것도 고려할 수 있습니다. </body> 태그 바로 위에 특정 JavaScript 코드를 배치하면 사용자의 상호작용이 페이지에서 감지될 때까지 광고 로드를 지연시킬 수 있습니다.
시작하기 위해 Display 광고 코드(또는 기타 코드, AUTO 제외)를 사용할 때 Google에서 제공하는 코드는 다음과 같습니다:
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxxxx"
crossorigin="anonymous"></script>
<!-- horizontal -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-xxxxxxxxxxxxxxx"
data-ad-slot="4787214865"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>시작하려면 이 부분을 삭제하세요:
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxxxx"
crossorigin="anonymous"></script>그러면 당신이 원하는 위치(들)에서 다음 코드만 유지하십시오:
<!-- horizontal -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-xxxxxxxxxxxxxxx"
data-ad-slot="4787214865"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>삭제한 JavaScript 부분은 중요하지만, 여러 광고가 있는 경우 불필요하게 여러 번 사용할 필요는 없습니다. 오히려 페이지 하단의 footer.php 파일에 </body> 태그 바로 위에 배치하는 것이 성능을 크게 향상시킬 수 있습니다. 그러나, 그저 페이지 하단에 코드를 직접 복사하는 것보다 더 강력한 대안을 제안하겠습니다. 다음 코드를 복사하세요:
<script id='flying-scripts' type='text/javascript'>const loadScriptsTimer=setTimeout(loadScripts,5*1000);const userInteractionEvents=["mouseover","keydown","touchstart","touchmove","wheel"];userInteractionEvents.forEach(function(event){window.addEventListener(event,triggerScriptLoader,{passive:!0})});function triggerScriptLoader(){loadScripts();clearTimeout(loadScriptsTimer);userInteractionEvents.forEach(function(event){window.removeEventListener(event,triggerScriptLoader,{passive:!0})})}function loadScripts(){document.querySelectorAll("script,iframe[data-type='lazy']").forEach(function(elem){elem.setAttribute("src",elem.getAttribute("data-src"))})}</script>
<script data-ad-client="ca-pub-3xxxxxxxxxx" data-src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" data-type="lazy"></script>지연 로드를 위한 코드
추가할 스크립트는 꽤 간단합니다. 이는 사용자 상호작용 이벤트 세트를 사용하여 Google Ads 스크립트 로드를 트리거합니다. 이 방법은 광고가 페이지의 초기 로드를 방해하지 않도록 보장합니다.
`data-type=”lazy”`의 역할
스크립트는 지연 로드를 해야 하는 스크립트와 iframe을 식별하기 위해 data-type="lazy" 속성을 사용합니다. 상호작용 이벤트가 감지되면, 스크립트는 data-src 속성을 src로 대체하여 스크립트 또는 iframe의 로드를 트리거합니다.
단계 요약표
| 단계 | 행동 | 사용한 도구/코드 |
|---|---|---|
| 1 | JavaScript 최적화 | Autoptimize |
| 2 | JS 파일 집합 | Autoptimize |
| 3 | 지연 로드 코드 추가 | 사용자 지정 스크립트 |
잊지 말아야 할 점: 테스트, 테스트, 테스트
이 변경 사항을 라이브 사이트에 배포하기 전에, Google PageSpeed Insight를 사용하여 효과를 테스트해야 합니다. 좋은 점수는 올바른 방향으로 나아가고 있다는 지표이지만, 로드 시간 및 전환율과 같은 주요 지표를 모니터링하는 것을 잊지 마세요.
성과 추적에 대한 고려 사항
웹사이트 성능을 정기적으로 추적하면 이러한 최적화의 효과를 명확히 파악할 수 있습니다. Google PageSpeed Insights 외에 Google Analytics와 같은 도구를 사용하여 포괄적인 평가를 수행하십시오.
호환성 문제 피하기
새로운 플러그인이나 스크립트를 추가할 때 잠재적인 호환성 문제를 인지하십시오. 항상 이러한 요소를 생산 독립 환경에서 테스트한 후, 실제 사이트에 배포하세요.
지속적인 추적이 핵심
궁극적으로 웹사이트 최적화는 지속적인 프로세스입니다. 오늘 사용하는 방법이 내일은 검색 엔진 알고리즘 및 웹 기술의 변화로 인해 효과적이지 않을 수 있습니다.
웹사이트 성능을 주의 깊게 살펴보시고, 그에 따라 전략을 조정하는 것을 두려워하지 마십시오. 사이트 속도가 향상되면 SEO 순위에 유익할 뿐만 아니라 더 나은 사용자 경험을 제공하여 전환율을 높이고 결과적으로 더 많은 수익을 가져올 수 있습니다.
Google Ads를 사용하면서 속도를 최적화하는 것은 어려운 작업처럼 보일 수 있지만, 올바른 기술과 도구가 있으면 충분히 가능합니다. 이 기사에서 다룬 단계들은 빠르고 수익성 있는 웹사이트로 가는 올바른 길로 이끌 것입니다.
