Ezoic Leap 설정 과정 안 보면 후회합니다 (2024)

승인을 받고 나서 한 동안 방치했던 Ezoic에서 Leap를 설정해 보았습니다. Ezoic 승인 후 나락으로 갔던 PSI 성능을 조금이라도 향상시켜 보려고 시작했는데, 과연 그 결과가 궁금하신 분들은 끝까지 봐 주셨음 합니다. 지금부터 Ezoic Leap 설정 과정을 보여드리겠습니다.

Ezoic Leap 설정하는 법

Ezoic Leap 무엇인가?

Ezoic 승인을 받은 후 한 동안 그냥 방치해 두었습니다. 워낙 Ezoic Leap에 대한 정보가 많이 없다 보니 제가 잘 설정 했는 지도 잘 모르겠지만, 어쨌든 시도를 하였고 완료를 하였습니다.

일단 Ezoic Leap은 Ezoic에서 사용자의 광고 수익 최적화를 위해서 웹사이트 속도 향상 및 성능을 개선하기 위한 Ezoic의 도구라고 생각하시면 됩니다.

Ezoic 승인 후 거의 100에 가까웠던 저의 PSI(pageSpeed insights) 점수가 나락으로 떨어졌습니다. Ezoic Leap를 가지고 이러한 처참한 저의 PSI 점수를 올릴 수 있지 않을까 해서 설정을 시작해 보았습니다.


Ezoic Leap 도대체 어디에 있나?

ezoic leap 설정

ezoic leap은 ezoic 사이트에 들어가시면, 상단 중앙 여러 아이콘 중에서 찾으실 수 있습니다. 클릭하시고 들어가셔서 start setup 버튼을 선택하시면 됩니다.


ezoic leap 설정 과정

ezoic leap 설정 시작

ezoic leap 설정 단계는 총 아래와 같이 9개로 나눠져 있습니다.

  • Intro
  • CSS
  • Images
  • Static Asset Cache Policy
  • Pre-Connect
  • Minify
  • Script Execution
  • Content
  • Finalize


ezoic leap 설정 CSS

ezoic leap 설정 css

ezoic leap 설정은 크게 9단계와 그 아래 단계마다 또 다른 세부 단계에서 on/off 즉, 활성화 또는 비활성화만 선택하시면 됩니다.

예를 들어 CSS 단계에서는 다시 5개의 세부 단계가 있으며, Next로 넘어갈 때 마다 그에 대한 간략한 설명(영어)을 보시고, 활성화와 비활성화를 선택하시면 됩니다.

앞으로 ezoic leap 설정 과정에서 저는 이렇게 설정했다는 것을 알려 드리오니, 참고만 하셨음 합니다. 왜냐하면 본인이 기존에 가지고 계시는 웹사이트 설정이 저와 다를 수 있기 때문입니다.

  • Critical CSS : On
  • Remove Unused CSS : On
  • Optimize Fonts : Off
  • Preload Fonts : On


ezoic leap 설정 css go to preview

이렇게 설정을 마치면, Go to Preview 버튼을 통해서 본인 웹사이트에 어떻게 적용되는 지 미리보기를 하실 수 있습니다. 하지만 저의 경우 큰 변화를 발견하지는 못한 것 같습니다. 적용이 바로 되다 보니 그래도 일부는 변화가 있는 것을 느낄 수 있었습니다.


ezoic leap 설정 Images

ezoic leap 설정 images

CSS를 지나고 나서는 images 부분입니다. 여기에서 저는 아래와 같이 설정하였습니다.

  • Lazy Load images : On
  • Resize Images : On
  • Preload Background Images : On
  • Set Explicit Width and Height : Off

Set Explicit Width and Height의 경우 처음에는 On를 했었습니다. 그리고 미리보기를 확인을 해 보는데, 제가 기존에 설정해 놓은 광고 사이즈에 영향을 주는 것을 확인할 수 있었습니다. 그래서 다시 Off로 설정했습니다.


ezoic leap 설정 Static Asset Cache Policy

Static Asset Cache Policy

Static Asset Cache Policy은 웹사이트의 Static Asset(정적 자산)을 서버가 아닌 브라우저에 캐시하는 방법을 의미합니다.

쉽게 말해 이미지, CSS, javascript 파일 등의 정적 자산을 브라우저 캐시에 두어 서버에서 직접 다운로드 받을 필요 없이 브라우저에서 바로 꺼내서 빠르게 웹페이지를 로딩하는 것입니다.

저는 당연히 On(images, Scripts, Stylesheets, Fonts)으로 다 설정하였습니다.

ezoic leap 설정 Pre-connect

Pre-connect 역시 On으로 설정해 두었습니다. 이 역시 웹페이지 로딩 속도를 높이고, 사용자 경험을 높이는 데 도움을 주는 부분입니다.


ezoic leap 설정 Minify

ezoic minify

Minify는 HTML, CSS, javascript에서 불필요한 부분을 제거하여 파일 크기를 최소화하는 것을 돕는 부분입니다. 저는 당연히 3개 다 On으로 설정하였습니다.


ezoic leap 설정 Script Execution

Ezoic script execution

Script Execution 는 웹페이지에서 javascript 코드가 실행되는 과정을 의미합니다. 브라우저 내에 있는 javascript 코드를 해석 및 실행해서 웹페이지 동작을 제어하는 부분입니다. 저는 아래와 같이 설정을 했습니다.

  • Script Delay : On
  • Reduce CPU Intensive Tasks : On
  • JQuery Loading Method : Off


ezoic leap 설정 Content

Ezoic content

Content 성능을 최적화하는 부분입니다. 저의 lazy load iframes와 lazy load youtube videos 둘 다 on으로 설정하였습니다.


ezoic leap 설정 Finalize

ezoic finalize

드디어 ezoic leap 설치 마지막인 Finalize 부분입니다. 위 화면에서 아래로 스크롤 하시면 다시 아래 사진이 보입니다.

ezoic leap activate

위의 모든 요소를 체크하시고 Activate 까지 마무리 하시면 끝이 납니다.


ezoic leap 설치 완료

ezoic leap 설정 후 화면

설정을 마무리 하시면 이제부터는 위의 화면과 같이 나옵니다. 그리고 설정이 적용될 때까지 15분 정도 걸린다고 하면서, 시간이 카운트 됩니다.

혹시 Ezoic Leap 설정 과정에 대해서 더 자세히 알아 보고 싶으신 분들은 아래 링크를 활용해 보시기 바랍니다. 저도 이 웹페이지를 보고 설정 하는 것을 참고하였습니다.


Ezoic 설정 후 PSI 성능 변화

ezoic leap 설정 후 PSI 변화

Ezoic 승인 후 광고 배치 변화는 PC보다는 모바일에서 훨씬 더 많이 느낄 수 있었습니다. 아무래도 Ezoic에서는 저의 웹사이트의 경우 모바일에 더 초점을 둔 것 처럼 보였습니다.

PC에서는 별 다른 변화를 느끼지 못했지만, 모바일에서는 영상 광고가 나오는 등 변화가 있었기 때문입니다. 그런데 솔직히 말씀드리면 Ezoic 광고 승인을 받으시면 PSI 성능 점수는 떨어지는 경향이 있습니다.

이 PSI 성능을 올리기 위해서 Ezoic Leap 설정을 한 것이었는데, 솔직히 별 큰 차이는 보지는 못했습니다. leap 설정만 하면 드라마틱하게 PSI 성능이 올라갈 것이라는 저의 생각이 틀린 것 같습니다.

제가 제대로 하지 못했거나, 기존에 설정된 것과 충돌이 있어서 그럴 수 있겠다는 생각이 듭니다.

마무리

오늘은 Ezoic leap 설치 과정에 대하여 알아 보는 시간을 가져 보았습니다. 처음 시작할 때는 정보도 많이 없고 해서 어려웠었는데, 그래도 영문으로 된 가이드 라인을 보고 잘 따라할 수 있었습니다.

혹시나 저와 같이 ezoic leap 설치하려는 분들에게 도움이 되었음 합니다. 글 읽어 주셔서 감사합니다.