워드프레스에 애드센스 스크립트를 넣었는데 계속해서 body 하단으로 이동되는 현상이 발생했습니다. 이 글에서는 이에 대한 해결 경험을 공유합니다.
** CONTENTS **
증상
애드센스 코드는 어떤 방식으로든 <head>…</head> 사이에 설치하는 것이 목적입니다. 코드 설치 후 정상 적용 여부를 확인하던 저는 코드가 <body>…</body>의 마지막 부분에 위치한다는 것을 발견합니다. 영문을 모르는 저는 일단 수많은 검색을 해보았지만, 해당하는 해결법은 온라인에 없었습니다.
설치법의 문제인가 싶어, 테마로 설치하기, Insert Headers and Footers 와 같은 플러그인으로 설치하기, SiteKit 같은 공식 플러그인으로 설치하기 등등 온갖 설치법을 모두 시도했으나 모두 동일한 증상이 나타났습니다.
해결법
저는 절망하였으나 한참을 울고 나니 번뜩이는 생각이 있었습니다. 바로 저의 웹사이트에 덕지덕지 깔아둔 보안과 최적화 플러그인들..! 이 녀석들은 저의 허락을 협박하다시피 받아내어 코드를 지들 멋대로 스파게티로 만들어 버릴 수 있었던 것입니다.
제가 검거한 범인은 Jetpack Boost라는 무려 워드프레스 개발사인 Automattic Inc. 에서 만든 플러그인입니다. 처음 범인을 검거한 저는 황당함을 금치 못했는데요. 누구보다 이 생태계를 잘 알 놈들이 별 경고도 없고, 그렇다고 예외 처리 하는 옵션도 없는, 스크립트는 죄다 뒤로 보내기 같은 기능을 넣어둔 것이었습니다.
정확히는 필수적이지 않은 JavaScript 지연 실행 (Defer Non-Essential JavaScript) 기능이었습니다. 설명은 ‘스타일과 이미지가 빠르게 로드될 수 있도록 페이지가 로드된 후에 필수적이지 않은 JavaScript를 실행합니다. web.dev에 대해 자세히 알아보세요.’인데, 저기요.. 애드센스 정도면 업계에서 필수적인 JavaScript 아닙니까? 유저가 예외 처리라도 할 수 있어야 할 것 아닙니까..
아무튼 비슷한 플러그인을 쓰고 있다면 해당 옵션을 꺼보시길 바랍니다. 예외 처리만 할 수 있으면 페이지 체감 속도를 늘릴 수 있는 좋은 기능인 것은 분명합니다만. <head> 위치가 중요한 스크립트들을 쓴다면 포기할 수밖에 없는 옵션으로 보입니다.
하지만 제가 필사의 검색을 해도 이런 증상을 호소하거나 해결법을 제시한 것은 본 적이 없는 것을 보니, 대부분은 알아서 해결했거나, 아예 초보라 위치 같은 건 확인도 안 하고 쓰고 있는 게 아닐지 생각해 봅니다. 10년 안에 한 명이라도 볼까요? 혹시라도 누군가는 이 방식으로 해결되어서 속이 뻥 하시길 바라며 글을 던져둡니다.