사이트가 느릴 때 먼저 잃는 건,
처음 온 사람입니다

결론부터 말씀드리면 — 속도를 점수로 관리하면 고칠 자리가 보이지 않습니다. 기다려 주는 사람은 이미 우리를 아는 사람이고, 막 시작한 브랜드에 오는 사람은 대부분 우리를 처음 보는 사람입니다. 그리고 느림은 전체 시간의 문제가 아니라, 첫 화면에 필요한 문장 하나가 무거운 파일들 뒤에 줄을 서 있는 순서의 문제입니다.

기다림은 인지도와 교환됩니다

이미 쓰는 서비스, 결제 정보가 저장된 쇼핑몰, 회사 업무 시스템은 느려도 기다립니다. 거기서 할 일이 있고, 대신 갈 곳이 마땅치 않기 때문입니다. 그래서 유명한 사이트들이 무거운 채로도 굴러가는 걸 보고 "속도는 그렇게까지 중요하지 않다"는 결론이 나오기도 합니다.

문제는 그 기다림이 이름값으로 사 온 시간이라는 점입니다. 우리 사이트에 처음 도착한 사람에게는 그 예산이 없습니다. 이름을 모르는 브랜드의 페이지가 흰 화면으로 멈춰 있을 때, 뒤로 가기를 눌러도 잃을 것이 없습니다. 검색 결과로 왔다면 바로 아래에 다른 후보가 줄지어 있고, SNS에서 왔다면 원래 보던 피드가 그대로 남아 있습니다. 인지도가 아직 0에 가깝다는 것이 어떤 상태인지는 "검색에 안 나와요"는, 세 가지 다른 상태입니다에서 다뤘습니다.

그래서 속도는 신규 브랜드와 자리 잡은 브랜드에서 값이 다릅니다. 같은 무게라도 기다려 줄 이유가 없는 사람에게 먼저 비용이 청구됩니다. 그리고 그 사람은 불만을 말하지 않습니다. 대표님 쪽에는 아무 기록도 남지 않고, 문의가 안 온 이유 목록에도 오르지 않습니다.

대표님 화면은 가장 좋은 조건입니다

직접 열어 보고 "빠른데요"라는 판단이 나오는 데는 이유가 있습니다. 대표님은 사무실 인터넷이나 집 와이파이에서, 업무용 컴퓨터로, 이미 여러 번 열어 본 상태로 확인합니다. 사진과 글꼴 파일은 기기에 남아 있어서 다시 받지 않습니다. 두 번째 방문부터는 사이트가 무거워도 빠르게 열립니다.

방문자의 조건은 대개 반대입니다. 이동 중에 휴대폰 데이터로, 처음 방문이라 받아 둔 파일이 하나도 없는 상태로 엽니다. 게다가 인스타그램이나 카카오톡에서 링크를 눌러 들어오면 그 앱 안의 브라우저에서 열립니다. 우리가 크롬에서 확인한 화면과 같은 화면이 아닙니다.

제작이 끝난 뒤에 무거워지는 경로도 있습니다. 납품 시점에는 가벼웠던 사이트에 상담 채팅창, 방문 분석, 광고 픽셀, 팝업 도구가 하나씩 붙습니다. 각각은 "한 줄만 넣으면 된다"는 크기이고, 붙일 때는 이유가 있었습니다. 다만 이런 도구는 늘어날 뿐 줄어들지 않습니다. 쓰지 않게 된 도구도 코드는 그대로 남아 방문자가 매번 같이 받습니다.

느림은 시간이 아니라 순서입니다

첫 화면에서 방문자가 실제로 필요한 것은 많지 않습니다. 우리가 무엇을 하는 곳인지 알려 주는 문장, 사진 한 장, 다음으로 갈 버튼 하나. 사이트가 전부 도착할 때까지 걸리는 시간이 길어도, 이 세 가지가 먼저 도착하면 방문자는 읽기 시작합니다. 반대로 전체는 금방 끝나는데 이 세 가지가 맨 뒤에 줄을 서 있으면 방문자는 기다린 것으로 기억합니다.

화면에 나타나는 증상으로 구분할 수 있습니다. 흰 화면이 한동안 유지되다가 한꺼번에 나타나는 경우, 배경과 사진은 있는데 글자만 늦게 들어오는 경우, 그리고 이미 나타난 내용이 밀려 내려가는 경우입니다. 마지막 것이 가장 나쁩니다. 방문자가 누르려던 버튼이 손가락 아래에서 이동하면 엉뚱한 곳이 눌립니다. 이 경우는 느린 것보다 고장 난 것으로 읽힙니다.

연출도 같은 자리에서 값을 매겨야 합니다. 첫 화면의 글자가 한 줄씩 나타나는 효과는 정보 도착을 일부러 늦추는 선택입니다. 그 선택이 맞는 자리도 있지만 첫 화면은 대개 아닙니다. 이 판단은 모션이 방해가 되는 건, 양이 아니라 자리입니다에서 자세히 적었습니다.

확인하고 고치는 순서

도구로 점수를 내기 전에 사람의 조건을 먼저 재현하는 순서를 권합니다.

1. 휴대폰을 데이터로, 처음 온 사람처럼 엽니다. 와이파이를 끄고, 시크릿 창이나 평소 안 쓰는 브라우저로 열어 보세요. 광고나 SNS로 유입을 만들고 있다면 그 링크를 눌러 앱 안의 브라우저에서 여는 것까지 해 보셔야 합니다. 이때 볼 것은 총 몇 초인지가 아니라 무엇이 먼저 나타나는지입니다. 이것이 가장 싸고 정확한 측정입니다.
2. 첫 화면에 필요한 것부터 도착하게 순서를 잡습니다. 문장이 사진이나 스크립트를 기다리지 않아야 하고, 첫 화면 아래에 있는 사진은 스크롤할 때 받아도 됩니다. 글꼴은 굵기를 여러 벌 쓰면 그만큼 파일이 늘어납니다. 실제로 쓰는 굵기만 남기고, 글꼴이 도착하기 전에도 글자가 읽히도록 두는 것이 기본입니다.
3. 사진은 화면에 필요한 크기로 줄여 올립니다. 카메라나 휴대폰에서 나온 원본을 그대로 올리면 브라우저가 작게 보여 주기만 할 뿐, 방문자가 받는 양은 원본 그대로입니다. 히어로 영상은 한 번 더 따져 보셔야 합니다. 그 영상이 없으면 전달되지 않는 것이 있는지, 사진 한 장으로 대신할 수 있는지. 사진 한 장이 문단 셋을 대신하는 조건은 사진 한 장이 문단 셋을 대신할 때, 아닐 때에 정리해 뒀습니다.
4. 붙어 있는 도구의 목록을 만들고 옆에 이유를 적습니다. 채팅창, 분석, 광고 픽셀, 팝업, 지도, 예약 위젯. 이유를 한 줄로 못 적는 항목은 빼셔도 됩니다. 이 목록은 한 번 만들어 두면 다음에 무언가를 더 붙일 때 판단 기준이 됩니다. 납품 뒤에 무엇을 누가 바꾸는지 정해 두는 이야기는 납품 뒤에 멈춘 사이트는, 고장 난 게 아닙니다에 있습니다.
5. 점수를 목표로 삼지 않습니다. 측정 도구의 점수는 그 도구가 정한 기준의 의견입니다. 참고로 보기에는 좋지만, 끝까지 올리는 작업은 뒤로 갈수록 방문자가 알아채지 못하는 항목에 시간을 씁니다. 기준을 하나만 두시려면 이렇게 잡으세요. 휴대폰 데이터로 처음 여는 상태에서 첫 문장이 기다림 없이 읽히는가.

그리고 순서를 하나 더 말씀드리면, 문의가 아예 없는 상태에서 속도부터 손대는 것은 대개 순서가 아닙니다. 빠르게 도착해도 첫 화면에 답이 없으면 결과는 같습니다. 어디가 막혀 있는지 차례로 좁히는 방법은 문의가 안 늘 때, 어디가 막혔는지 찾는 순서에서 다뤘습니다. 속도 작업이 분명히 값을 하는 자리는 광고나 SNS로 사람을 보내고 있을 때입니다. 도착 전에 떠난 사람은 그 유입에 쓴 비용을 그대로 가져갑니다.

오늘 확인해 보세요

컴퓨터를 덮고 휴대폰만 있으면 됩니다.

• 와이파이를 끄고 데이터로, 시크릿 창에서 우리 사이트를 열어 봤는가?
• 광고·SNS 링크를 눌러 앱 안의 브라우저에서 열리는 화면을 확인했는가?
• 첫 화면에서 문장·사진·버튼 중 무엇이 가장 늦게 도착하는지 말할 수 있는가?
• 이미 나타난 내용이 밀려 내려가면서 버튼 위치가 바뀌는 구간이 없는가?
• 사이트에 붙어 있는 외부 도구를 다 적을 수 있고, 각각의 이유를 한 줄로 쓸 수 있는가?

첫 줄을 아직 안 해 보셨다면 다른 판단은 잠시 미루셔도 됩니다. 세 번째 줄에서 "글자가 가장 늦다"가 나오면 사진보다 글꼴과 스크립트를 먼저 보셔야 하고, 네 번째 줄에 걸리는 구간이 있다면 속도보다 그것이 먼저입니다. 다섯 번째 줄에서 목록이 생각보다 길게 나오는 것은 흔한 일입니다. 그 자체가 문제라는 뜻은 아니고, 이유를 못 적는 항목이 몇 개인지가 정보입니다.