웹사이트가 느리게 뜨는 이유 (다시 만들지 않고 고치는 법)

로시오는 할라파(Xalapa)에서 화원을 운영합니다. 두 달 전 돈을 주고 웹사이트를 만들었는데 결과물이 예뻤습니다. 입구를 크게 찍은 사진, 계절별 식물들, 영업시간, 전화번호, 지도까지. 너무 마음에 들어서 인도 쪽 간판에 링크까지 넣었습니다.

그런데 반대편에서 일어나는 일은 보지 못했습니다. 누군가 길모퉁이에 서서 신호 두 칸짜리 데이터로 휴대폰에서 “할라파 화원”을 검색합니다. 링크를 누릅니다. 배경이 뜨고, 로고가 뜨고, 사진이 들어갈 자리엔 회색 사각형만 남아 있습니다. 6초쯤 지나면 그 사람은 구글로 돌아가 다음 결과를 누릅니다.

그 화원이 별로라서 그런 게 아닙니다. 뭘 파는지조차 알아내지 못한 겁니다. 그런데 통계에는 끝까지 다 읽은 손님과 똑같이 ‘방문 1회’로 찍힙니다. 느리게 뜨는 웹사이트란 누군가 접속한 뒤 콘텐츠가 뜨기까지 몇 초씩 걸리는 사이트를 말합니다. 그리고 이런 일이 벌어지면, 고객을 잃는 게 아닙니다. 당신이 선택지였다는 사실조차 몰랐던 사람들을 잃는 겁니다.

내 휴대폰에서는 빠른데 왜 다른 사람들한테는 느릴까요?

당신의 휴대폰이 거짓말을 하고 있기 때문입니다. 매일 같은 폰으로, 가게 와이파이에 붙어서 접속하니 이미 캐시에 저장돼 있습니다. 당신에게는 항상 순식간에 뜨지만, 데이터로 처음 접속하는 신규 고객에게는 8초가 걸릴 수 있습니다.

진짜 테스트는 부탁 한 번이면 됩니다. 한 번도 당신 사이트에 들어가 본 적 없는 사람에게—카운터 앞 손님이든, 옆집 이웃이든, 조카든—휴대폰을 빌려서 와이파이가 아니라 자기 데이터로 열어달라고 하세요. 당신은 아무 설명도 하지 말고 화면만 보고 있으면 됩니다. 전화번호가 뜨기도 전에, 그 사람 표정만 봐도 답이 나올 겁니다.

이 목록에서 혼자서는 할 수 없는 유일한 진단입니다.

웹사이트를 느리게 만드는 건 뭘까요?

거의 항상 사진입니다. 휴대폰으로 찍은 사진은 보통 4~5메가바이트나 됩니다. 그런데 웹사이트에서는 가로 3센티미터짜리 작은 칸에 들어갈 뿐입니다. 우표만 한 크기로 보일 걸 알면서 포스터 전체를 보내는 셈이고, 고객은 아무것도 보기 전에 그 포스터 전체를 자기 데이터로 다 받아야 합니다.

로시오의 웹사이트에는 사진이 40장 있습니다. 입구, 고사리, 다육식물, 흙 화분, 토요일에 일하는 직원까지. 그중 10장만 해도 벌써 50메가바이트인데, 길모퉁이에 선 누군가가 그걸 다 받아야 합니다. 갤러리는 고객이 끝까지 내려보지 않아도 전부 불러옵니다. 이런 건 아무도 예상하지 못합니다. 특히 월말에 데이터 요금제가 빠듯할 때는 더더욱요.

가장 무거운 부분이지만 고치기는 가장 쉽습니다. 사진을 하나도 지울 필요 없이, 더 작은 용량으로 다시 올리기만 하면 됩니다.

두 번째: 템플릿에 딸려온 기계 장치들

두 번째로 무거운 건 템플릿에 딸려오는 장치들입니다. 사진이 저절로 바뀌는 캐러셀, 배경으로 깔리는 입구 영상, 스크롤하면 페이드인되는 글자들.

캐러셀 때문에 고사리를 산 사람은 없습니다. 이 모든 건 휴대폰이 전체 페이지를 보여주기 전에 다운로드하고 조립해야 하는 부품들일 뿐이고, 고객이 들어온 이유—일요일에 영업하는지, 벤자민고무나무는 얼마인지—에는 아무것도 답해주지 않습니다.

세 번째: 덧붙여진 것들

세 번째는 덧붙여진 것들입니다. 5초 뒤에 튀어나오는 채팅창, 아무도 내려보지 않아도 혼자 로딩되는 삽입 지도, 리뷰 박스, 쿠키 배너, 다섯 개나 되는 소셜미디어 버튼.

하나하나가 페이지가 다 보이기도 전에 각자 자기 몫의 인터넷을 요청합니다. 때로는 다른 나라 서버에까지요. 하나 정도는 느껴지지 않습니다. 여섯 개가 쌓이면 느껴집니다.

웹사이트 템플릿은 왜 느릴까요?

템플릿이 느린 이유는 당신의 사업을 위해 만들어진 게 아니기 때문입니다. 당신이 그 템플릿을 고른 카탈로그 안에서 인상적으로 보이도록 만들어진 것이고, 그 안에서는 캐러셀과 애니메이션이야말로 사람들이 클릭하게 만드는 요소입니다.

쓰지 않는 걸 빼라고 아무도 알려주지 않았습니다. 그리고 대부분의 편집기에서는 섹션 하나를 빼는 게 그냥 두는 것보다 더 손이 많이 갑니다. 해당 모듈을 찾아야 하고, 지웠을 때 뭐가 망가질지 짐작해야 합니다. 그러니 그냥 남아 있게 됩니다. 당신의 웹사이트가 느린 건 누가 일을 잘못해서가 아닙니다. 다른 사업을 위한 것들을 안고 태어났는데, 그걸 빼낼 시간이 아무에게도 없었기 때문입니다.

템플릿을 고르는 대신 필요한 걸 설명하면, 진짜 차이는 디자인이 아닙니다. 요청한 섹션들만 가지고 나오고, 그 이상은 없습니다. 애초에 들어간 적이 없으니 뺄 것도 없습니다.

템플릿이 정말로 잘하는 것

식물, 옷, 음식, 네일아트처럼 눈으로 보고 사는 것이라면 잘 배치된 큰 사진들이 어떤 글보다 더 잘 팔립니다. 그리고 템플릿은 이미 그걸 중심으로 짜여 있습니다. 캐러셀이 실제로 제 역할을 하는 업종도 있습니다. 전후 사진 여덟 장을 보여주고 싶은 미용실 같은 경우죠. 그리고 이미 잘 돌아가고 있는 웹사이트라면, 속도 때문에 처음부터 다시 만드는 건 거의 항상 그만한 값어치가 없습니다.

그리고 가장 중요한 것, 엉뚱한 데 한 달을 쓰지 않으려면 꼭 기억하세요. 구글에 뜨는 느린 사이트가 아무도 못 찾는 빠른 사이트보다 낫습니다. 업종과 도시로 검색했을 때 당신이 안 나온다면, 여기서부터 시작하면 안 됩니다.

로딩 속도와 화면이 뜨는 순서, 뭐가 더 중요할까요?

전체 로딩 시간보다 콘텐츠가 뜨는 순서가 더 중요합니다. 1초 안에 가게 이름, 영업시간, 전화번호가 보인다면 전체 로딩이 6초 걸려도 빠르게 느껴질 수 있습니다. 반대로 2메가짜리 사진이 먼저 뜨고 전화번호는 후기들 아래, 맨 끝에 가서야 나온다면 3초밖에 안 걸려도 영원처럼 느껴질 수 있습니다.

아무도 스톱워치로 당신의 사이트를 재고 있지 않습니다. 사람들은 찾아온 걸 찾았는지만 재고 있습니다. 그게 먼저 뜬다면, 나머지는 느긋하게 계속 로딩돼도 상관없습니다.

다시 만들지 않고 느린 웹사이트를 고치는 법은?

세 가지만 이 순서대로 하면 고쳐집니다. 셈을 다 합쳐도 일주일이면 충분합니다.

1. 사진을 더 작은 용량으로 다시 올리세요. 많은 편집기에는 이미지 최적화나 압축 기능이 있습니다. 당신 게 없다면 올리기 전에 휴대폰에서 미리 리사이즈하세요. 페이지 맨 처음 사진부터 시작하세요. 나머지 전부를 붙잡고 있는 게 바로 그 사진입니다.

2. 쓰지 않는 걸 빼세요. 먼저 캐러셀. 가장 잘 나온 사진 한 장만 남기세요. 다음은 배경 영상. 그다음은 작년부터 게시물을 안 올린 소셜미디어 버튼들.

3. 사람들이 찾아온 것을 맨 위로 올리세요. 이름, 무엇을 하는 곳인지, 영업시간, 전화번호, 주소를 첫 화면에, 그리고 전화번호는 탭하면 바로 걸리게 만드세요.

그래도 차라리 처음부터 다시 시작하고 싶다면

웹사이트가 도움보다 짐이 되는 지점에 이르렀다면, Proyecta에 원하는 모습 그대로 설명해 보세요.

“할라파에 있는 내 화원을 위한 웹사이트: 종류별로 파는 식물들, 시작 가격, 기본 관리법, 지도가 있는 주소, 영업시간, WhatsApp 버튼. 모바일 데이터로도 빨리 열리고, 캐러셀과 영상은 없이.”

마지막 부분도 다른 것들과 똑같이 말로 요청하면 됩니다. 링크까지 포함돼 게시되고, 뭔가 과하게 들어갔다면 빼달라고 다시 요청하면 됩니다.

솔직히 말하면, 사진은 결국 당신이 직접 올려야 합니다. 그것도 올바른 용량으로요. 그 부분은 여기든 Wix든 아무도 대신해주지 않습니다.

이 탭을 닫기 전에

오늘 가게에 들어오는 첫 손님에게 휴대폰을 빌려 보세요. 그 사람 데이터로 당신의 사이트를 열고 셋까지 세어 보세요.

3초가 지나도 그 화면에 전화번호가 안 보인다면, 이제 어디서부터 시작해야 할지 아는 겁니다. 그리고 문제는 웹사이트가 못생겨서가 아니었다는 것도 이제 아는 겁니다.