[실전 수익화 11] 광고를 가볍게, 지연과 비동기

광고와 사용자 경험의 균형을 이야기하면서 성능을 빼놓을 수 없다. 같은 광고라도 어떻게 로드하느냐에 따라 방문자가 느끼는 속도가 하늘과 땅 차이였다. 광고 스크립트는 본질적으로 무겁다. 외부 서버와 통신하고, 이미지를 받아 오고, 여러 계산을 한다. 이 무게를 그대로 두면 페이지가 느려지고 방문자가 떠난다. 이번 편은 광고의 무게를 덜어 내는 두 가지 핵심 기법, 지연 로딩과 비동기 로딩을 내가 어떻게 적용했는지에 대한 실전 기록이다. 성능은 수익과 경험을 동시에 지키는 기술적 열쇠였다.

1. 광고가 페이지를 붙잡는 원리

먼저 광고가 왜 페이지를 느리게 만드는지 이해해야 했다. 브라우저는 페이지를 위에서 아래로 읽어 내려가며 화면을 그린다. 그런데 중간에 광고 스크립트를 만나면, 기본 동작으로는 그 스크립트를 다 받아 실행할 때까지 나머지를 멈추고 기다린다. 광고가 콘텐츠보다 먼저 자리를 차지하고 브라우저를 붙잡는 것이다.

이렇게 되면 정작 방문자가 보러 온 콘텐츠는 광고가 다 처리될 때까지 화면에 나타나지 못한다. 외부 광고 서버의 응답이 느린 날에는 이 지연이 몇 초까지 늘어난다. 방문자는 흰 화면을 몇 초씩 바라보다가 뒤로 가기를 누른다. 광고를 붙였을 뿐인데 콘텐츠가 늦게 뜨는, 앞뒤가 바뀐 상황이 벌어진다.

이 문제를 처음 겪었을 때 나는 원인을 광고 자체로 오해했다. 하지만 진짜 문제는 광고를 로드하는 방식이었다. 광고가 콘텐츠보다 먼저, 그리고 콘텐츠를 막으면서 로드되는 게 문제였지, 광고의 존재 자체가 문제는 아니었다. 로드하는 순서와 방식만 바꾸면 같은 광고라도 방문자가 느끼는 속도를 크게 개선할 수 있었다.

그래서 성능 최적화의 목표는 분명해졌다. 콘텐츠가 먼저 뜨게 하고, 광고는 콘텐츠를 방해하지 않으면서 나중에 조용히 채워지게 하는 것이다. 방문자는 콘텐츠를 즉시 보고 읽기 시작하고, 그 사이에 광고가 뒤에서 알아서 로드된다. 이 순서만 지켜도 체감 속도가 완전히 달라졌다. 그 방법이 비동기와 지연 로딩이다.

2. 비동기 로딩으로 흐름을 막지 않기

첫 번째 기법은 비동기 로딩이다. 광고 스크립트를 브라우저가 나머지 페이지를 그리는 걸 막지 않는 방식으로 불러오는 것이다. 광고 스크립트에 비동기로 처리하라는 표시를 해 두면, 브라우저는 그 스크립트를 백그라운드에서 받아 오면서도 콘텐츠를 계속 그려 나간다. 광고가 흐름을 멈추지 않는 것이다.

이 방식의 효과는 즉각적이었다. 콘텐츠가 광고를 기다리지 않고 곧바로 화면에 나타나니, 방문자는 페이지가 빠르다고 느낀다. 광고는 콘텐츠가 다 뜬 뒤에 자기 자리에 채워지는데, 이미 방문자는 콘텐츠를 읽기 시작한 상태라 그 채워짐을 방해로 느끼지 않는다. 순서를 바꿨을 뿐인데 같은 광고가 훨씬 덜 거슬렸다.

다만 비동기 로딩에는 짝이 되는 준비가 필요했다. 광고가 나중에 채워지므로, 그 자리를 미리 비워 두지 않으면 광고가 뜨는 순간 화면이 출렁인다. 그래서 비동기 로딩은 반드시 공간 예약과 함께 써야 했다. 광고 자리의 높이를 처음부터 확보해 두고, 그 안에 광고가 비동기로 채워지게 하면 빠르면서도 흔들리지 않는 화면이 완성됐다.

내가 커뮤니티를 올린 서버 환경은 초기 화면을 서버에서 미리 그려 보내는 구조라, 이 준비에 유리했다. 페이지가 브라우저에 도착한 순간 이미 광고 자리가 확보돼 있고, 광고 스크립트는 비동기로 뒤따라와 그 자리를 채운다. 콘텐츠는 즉시, 광고는 조용히 나중에. 이 순서가 서버 구조 덕분에 자연스럽게 만들어졌다.

3. 지연 로딩으로 필요한 것만 불러오기

두 번째 기법은 지연 로딩이다. 비동기가 로딩의 방식을 바꾸는 것이라면, 지연 로딩은 로딩의 시점을 바꾸는 것이다. 방문자가 아직 스크롤해서 도달하지 않은, 화면 밖 아래쪽의 광고는 굳이 처음부터 로드할 필요가 없다. 방문자가 그 근처까지 내려왔을 때 비로소 로드하면 된다는 발상이다.

이 방식은 초기 로딩 부담을 크게 줄였다. 페이지를 처음 열 때 화면에 보이는 광고만 로드하고, 아래쪽 광고들은 미뤄 두니, 처음 뜨는 데 필요한 작업이 확 줄었다. 방문자가 스크롤을 내리면 그때그때 다음 광고가 로드되므로, 방문자 입장에서는 언제나 필요한 광고만 제때 나타나는 것처럼 보였다.

지연 로딩은 수익 면에서도 오히려 이로운 구석이 있었다. 광고는 실제로 방문자 눈에 보였을 때만 유효한 노출로 인정되는데, 화면 밖에서 미리 로드된 광고는 방문자가 거기까지 안 내려오면 헛노출이 된다. 지연 로딩으로 방문자가 도달할 때 로드하면, 로드된 광고가 실제로 보일 확률이 높아져 유효 노출 비율이 개선됐다.

물론 지연 로딩도 조율이 필요했다. 방문자가 광고 자리에 정확히 도달한 순간 로드하면, 광고가 뜨는 데 걸리는 짧은 시간 동안 빈자리가 보인다. 그래서 나는 방문자가 그 자리에 닿기 조금 전에 미리 로드를 시작하도록 여유를 두었다. 너무 이르면 헛노출이고 너무 늦으면 빈자리가 보이니, 그 사이의 적당한 지점을 찾는 게 요령이었다.

4. 무게를 재고 줄이는 습관

기법을 적용하는 것만큼 중요한 게 무게를 측정하는 습관이었다. 광고를 붙이기 전과 후에 페이지가 얼마나 무거워졌는지, 화면이 뜨는 속도가 얼마나 느려졌는지를 재 봤다. 측정하지 않으면 광고가 사이트를 얼마나 무겁게 하는지 감으로만 짐작하게 되는데, 감은 종종 틀렸다. 숫자로 재야 진짜 무게가 보였다.

측정해 보면 의외의 사실이 드러나곤 했다. 어떤 광고는 생각보다 훨씬 무거워 페이지 전체를 눈에 띄게 늦췄고, 어떤 광고는 수익도 별로 없으면서 무게만 잔뜩 더했다. 이렇게 무게 대비 수익이 나쁜 광고를 찾아내 걷어 내면, 수익은 거의 그대로면서 페이지는 가벼워졌다. 측정은 이런 가지치기의 근거가 됐다.

여러 수요처를 경쟁시키는 고급 방식으로 갈수록 이 무게 관리는 더 중요해졌다. 수십 개의 외부 서버에 입찰을 요청하고 응답을 기다리는 과정은 그 자체로 무겁다. 응답을 언제까지 기다릴지 시간 제한을 두지 않으면, 느린 수요처 하나 때문에 페이지 전체가 늘어질 수 있다. 나는 이 대기 시간을 적절히 제한해, 단가와 속도 사이의 균형을 잡으려 했다.

결국 성능 관리는 끝이 없는 저울질이었다. 수요처를 더 넣으면 단가가 오를 수 있지만 무게도 늘고, 대기 시간을 늘리면 더 좋은 입찰을 받을 수 있지만 속도가 느려진다. 정답은 사이트마다 다르고 시기마다 달라서, 계속 측정하고 조정하는 수밖에 없었다. 한 번 세팅하고 잊는 게 아니라, 꾸준히 돌보는 대상이었다.

5. 성능은 수익과 경험의 접점이다

성능 최적화를 파고들며 얻은 큰 깨달음은, 성능이야말로 수익과 경험이 만나는 접점이라는 것이었다. 빠른 페이지는 방문자에게 쾌적한 경험을 주고, 검색엔진에게 좋은 점수를 받고, 광고의 유효 노출까지 높인다. 하나의 개선이 세 방향으로 이득을 준다. 성능은 어느 하나를 위해 다른 하나를 희생하는 게 아니라, 셋을 동시에 끌어올리는 드문 지렛대였다.

그래서 나는 성능을 수익화의 부수적인 기술이 아니라 핵심으로 여기게 됐다. 아무리 좋은 광고를 붙여도 그것이 페이지를 느리게 만들면 방문자와 순위를 잃고, 결국 수익도 잃는다. 반대로 광고를 가볍게 다루면 같은 광고에서 더 많은 수익을 뽑으면서도 방문자를 지킬 수 있다. 성능은 수익화의 천장을 높이는 일이었다.

다행히 내가 쓰는 클라우드 환경은 이런 성능 관리에 필요한 도구들을 갖추고 있었다. 콘텐츠를 방문자와 가까운 곳에서 빠르게 내보내고, 초기 화면을 서버에서 미리 그려 보내는 구조는, 광고를 가볍게 얹기에 좋은 토대였다. 인프라가 빠르면 그 위에 광고를 조금 얹어도 여유가 있고, 인프라가 느리면 광고 하나에도 휘청인다. 바탕을 튼튼히 하는 게 먼저였다.

성능 최적화를 하며 얻은 습관 하나는, 새 기능이나 광고를 넣을 때마다 가장 느린 환경을 기준으로 확인하는 것이었다. 최신 기기의 빠른 인터넷에서는 무거운 광고도 그럭저럭 돌아가지만, 방문자 중에는 오래된 기기나 느린 연결로 들어오는 사람도 많다. 나는 일부러 조건이 나쁜 상황을 흉내 내어 페이지가 어떻게 느껴지는지 점검했다. 가장 느린 방문자가 견딜 만하면 나머지는 문제가 없었다. 반대로 빠른 환경에서만 확인하면, 정작 다수의 방문자가 겪는 답답함을 놓치기 십상이었다.

다음 편에서는 이렇게 붙이고 다듬은 광고가 실제로 얼마나 벌고 있는지를 어떻게 측정하고 개선하는지를 다룬다. 수익을 재는 여러 단위의 의미, 유효 노출의 개념, 그리고 측정한 숫자를 바탕으로 무엇을 어떻게 최적화했는지를, 막연한 감이 아니라 데이터의 관점에서 이어서 풀어 보겠다.