지연 로딩

화면에 필요한 것을 전부 처음에 내려받던 시절에는 페이지 하나가 무거워질수록 첫 화면이 그만큼 늦게 떴습니다. 상품이 60개 걸린 목록 화면이라면 이미지 60장을 다 받은 뒤에야 맨 위 세 개가 보입니다.

문제는 그 60장 중 사용자가 실제로 보는 것이 몇 장인지입니다. 목록을 끝까지 내리는 사람은 드물고, 대부분은 위에서 서너 개를 보고 하나를 누르거나 그냥 나갑니다. 화면 밖에 있는 50여 장은 받자마자 버려지는 셈인데, 그 대가는 맨 위 세 장이 늦게 뜨는 것으로 치릅니다.

느린 회선에서는 이 차이가 이탈로 바로 이어집니다. 사무실 회선에서 1초에 뜨던 화면이 지하철에서는 6초가 되고, 그 6초를 기다리는 사람은 많지 않습니다. 개발자 자리에서는 보이지 않는 문제라는 점이 특히 고약합니다.

지연 로딩은 받는 시점을 뒤로 미뤄 이 값을 떼어 내자는 답입니다. 지금 보이는 것만 먼저 주고 나머지는 필요해질 때 받습니다. 받는 총량을 줄이는 것이 아니라 순서를 바꾸는 쪽이고, 그래서 화질을 유지하며 용량 자체를 줄이는 이미지 최적화와는 다른 자리에서 일합니다.

먼저 무엇을 미룰지 고르고, 미루는 장치를 걸고, 미룬 자리를 어떻게 보여 줄지 정한 다음, 실제로 빨라졌는지 재는 순서입니다.

1. 첫 화면에 보이는 것과 아닌 것을 가릅니다. 기준은 접었을 때의 화면, 즉 스크롤하기 전에 보이는 영역입니다. 여기 들어오는 이미지에는 절대 걸지 않습니다.
2. 미루는 장치를 겁니다. 이미지는 태그에 속성 하나를 더하면 브라우저가 알아서 처리하고, 코드는 여러 파일을 배포용으로 묶어 주는 번들러가 나눠 둔 조각을 필요한 순간에 불러오게 적습니다.
3. 자리를 미리 잡아 둡니다. 이미지가 들어올 칸의 가로세로 크기를 먼저 지정해 두지 않으면, 나중에 이미지가 도착할 때 그만큼 아래 내용이 밀려 내려갑니다. 읽던 문장이 갑자기 아래로 튀는 화면이 이렇게 만들어집니다.
4. 도착하기 전에 보여 줄 것을 정합니다. 회색 네모를 두거나 아주 작은 흐린 이미지를 먼저 띄웁니다. 빈 칸으로 두면 사용자는 고장으로 읽습니다.
5. 재서 확인합니다. 첫 화면이 뜨는 시간과 화면이 흔들린 정도를 걸기 전후로 비교하되, 느린 회선을 흉내 내는 설정에서 잽니다. 숫자가 그대로면 미룬 것이 애초에 무겁지 않았다는 뜻이고, 그러면 되돌립니다.

코드 쪽에서는 쓰지 않는 코드를 결과물에서 아예 걷어 내는 트리 셰이킹을 먼저 돌린 다음에 남은 것을 미룹니다. 순서를 바꾸면 필요 없는 코드를 나중에 받도록 정성껏 나누는 일이 됩니다.

잘 맞는 자리는 분명합니다. 항목이 길게 이어지는 목록 화면, 본문 아래쪽에 이미지가 많은 글, 그리고 일부 사용자만 들어가는 화면의 코드입니다. 관리자 화면 코드를 일반 사용자까지 첫 로딩에 함께 받을 이유는 없습니다.

반대로 첫 화면에 걸면 손해만 남습니다. 맨 위 큰 배너에 지연 로딩을 걸면 브라우저가 그 이미지를 나중 순위로 미루고, 가장 빨리 떠야 할 것이 가장 늦게 뜹니다. 실제로 성능 점수가 떨어지는 흔한 원인 중 하나입니다.

기다리는 시간을 없애는 것이 아니라 옮기는 것이라는 점도 한계입니다. 사용자가 목록을 빠르게 내리면 스크롤이 도착한 자리마다 회색 네모가 잠깐씩 보입니다. 그래서 목록형 화면에서는 화면에 들어오기 몇백 픽셀 전부터 받기 시작하도록 여유를 둡니다.

검색 엔진이 읽어야 하는 내용에도 조심해서 씁니다. 본문 글이나 상품 정보를 스크롤해야만 받아 오게 만들면 수집 도구가 그 내용을 못 보고 지나갈 수 있습니다. 미루는 대상은 화면을 채우는 자원 쪽이고, 내용 자체는 처음부터 문서에 들어 있는 편이 안전합니다.

효과가 나오는 조건도 따져 봅니다. 화면 밖 자원이 전체 용량에서 차지하는 비중이 작으면 미뤄도 체감이 없습니다. 카드 40장 중 34장을 미뤄 2메가바이트를 뺐다면 눈에 띄지만, 전체가 300킬로바이트인 화면에서 50킬로바이트를 미루는 일은 코드만 복잡해지고 끝납니다. 걸기 전에 무엇이 얼마를 차지하는지부터 봅니다.

"목록 이미지에 지연 로딩 걸어 주세요. 첫 화면이 3초 넘게 걸립니다."

지금 받는 양이 너무 많으니 보이는 것만 먼저 주자는 요청입니다.

"히어로 이미지에는 걸지 마세요. 오히려 늦어져요."

첫 화면에 보이는 자원은 미루면 안 된다는 지적입니다.

"지연 로딩 걸고 나서 화면이 밀리는데 크기 지정이 빠진 것 같아요."

미룬 자리를 미리 잡아 두지 않아 생긴 문제라는 진단입니다.

페이지덱의 문서 목록 화면이 한 화면에 카드 40장을 띄우는데, 각 카드에 미리보기 이미지가 붙으면서 첫 화면이 눈에 띄게 늦어졌습니다. 태오가 보이는 여섯 장만 먼저 받고 나머지는 스크롤에 맞춰 받도록 바꾸자 첫 화면 시간이 절반 아래로 떨어졌습니다.

다만 바꾼 직후에 민서가 카드가 들쭉날쭉 밀린다는 것을 잡아 냈습니다. 카드 높이를 고정하지 않아서 이미지가 도착할 때마다 아래 카드가 내려간 것이었습니다. 자리 크기를 먼저 정해 두는 것으로 해결됐고, 이후로는 새 목록 화면을 만들 때 이 두 가지를 한 묶음으로 처리합니다.

지연 로딩을 걸면 페이지가 가벼워진다고 생각하는 경우가 많습니다. 첫 화면이 빨라지니 그렇게 느껴집니다. 하지만 받는 총량은 그대로이고, 사용자가 끝까지 내리면 결국 같은 양을 받습니다. 달라진 것은 순서뿐입니다. 이 점을 놓치면 용량 문제를 지연 로딩으로 덮은 채 이미지 용량을 줄이는 작업을 미루게 되고, 목록을 자주 끝까지 내리는 사용자에게는 아무것도 나아지지 않습니다.

모든 이미지에 걸어 두면 안전하다고 여기는 것도 흔합니다. 걸어서 나빠질 게 없어 보이니 자연스러운 판단입니다. 실제로는 첫 화면에 보이는 이미지까지 미뤄지면서 가장 중요한 자원이 늦게 뜨고, 회색 네모가 화면 곳곳에서 깜빡이는 결과가 됩니다. 어디에 거는지를 고르는 것이 이 기법의 절반입니다.