[Django/K-unirank] 광고로 인한 layout shift 현상 해결법

    <ins class="kakao_ad_area" style="display:none;"
    data-ad-unit = "DAN-4r2w24dDA1owYfUn"
    data-ad-width = "320"
    data-ad-height = "50"></ins>

 

카카오애드핏에서 준 코드 그대로 웹사이트에 삽입하니 내 사이트의 메인컨텐츠(대학순위 리스트, 대학 투표)들이 밀려나는 layout shift 현상이 발생했다.

이 현상을 해결하기 위해 광고로 수익을 창출하는 대표적인 사이트인 디시인사이드의 코드를 살펴보았다.

<ins class="kakao_ad_area" style="display: inline-block; position: relative; text-decoration: none; min-width: 160px; min-height: 600px; width: 160px; height: 600px;" data-ad-unit="DAN-xcPkLTCNKPafMkgh" data-ad-width="160" data-ad-height="600" id="kakao_ad_i1vhT4">

코드를 살펴보니 디시인사이드는 layout shift 문제를 광고의 크기를 고정시킴으로써 해결했다.

나도 똑같이

style="display: inline-block; position: relative; text-decoration: none; 
    min-width: 160px; min-height: 600px; width: 160px; height: 600px;"

ins 태그에 광고를 고정시키는 스타일 속성을 삽입하니 layout shift 문제가 해결되었다.

1. min-width, min-height
 - 광고의 최소 크기를 지정
 - 광고가 로드되기 전에도 이 공간을 확보

2. width, height (min-width, min-height보다 실제 광고 크기가 더 작거나 같으면 불필요)
 - 광고의 실제 크기도 고정
 - 광고가 로드된 후에도 크기가 변하지 않음

3. position: relative (웬만하면 불필요)
 - 광고의 위치를 상대적으로 지정
 - 다른 요소들과의 관계를 유지