B2B 웹사이트 크롬 개발자 도구 진단: 렌더링 차단 리소스와 INP 지연 해결법
신규 B2B SaaS 프로덕트를 론칭하고 대대적인 퍼포먼스 마케팅을 집행했을 때의 일입니다. 광고를 클릭해 유입되는 트래픽은 많았지만, 실제 유료 결제나 회원가입으로 이어지는 전환율은 예상보다 훨씬 저조했습니다. 처음에는 랜딩 페이지의 카피라이팅이나 디자인이 문제라고 생각하여 수차례 A/B 테스트를 진행했지만 근본적인 해결책이 되지 못했습니다. 진짜 원인은 화면의 겉모습이 아니라 , 화면이 고객의 모니터에 그려지기까지 걸리는 보이지 않는 지연 시간에 있었습니다. 답답한 마음에 크롬 개발자 도구를 열고 성능 지표를 확인한 순간, 가장 우려하던 문제를 마주했습니다. 고객이 광고를 클릭하고 우리 웹사이트의 핵심 배너를 보는 데까지 무려 6초가 넘게 걸리고 있었습니다. 구글이 강조하는 LCP(Largest Contentful Paint, 최대 콘텐츠 페인트) 지표 기준(2.5초 이하 좋음, 4초 초과 나쁨)을 크게 벗어난 상태였습니다. 원인을 추적해 보니 마케팅 픽셀, 고객 상담 챗봇, 방문자 추적용 애널리틱스 등 여러 서드파티 스크립트가 초기 로딩과 메인 스레드 작업에 부담을 주고 있었습니다. 이 가운데 HTML 파싱이나 초기 화면 렌더링을 지연시키는 리소스는 렌더링 차단 리소스로 분류할 수 있습니다. 브라우저가 사용자에게 보여줄 웹페이지의 뼈대를 조립해야 하는데, 마케팅 부서에서 심어둔 무거운 외부 프로그램들이 브라우저의 메인 스레드(Main Thread)를 차지하고 비켜주지 않는 상황입니다. 트럭들이 톨게이트를 꽉 막고 있어 일반 승용차(진짜 콘텐츠)가 빠져나가지 못하는 것과 같습니다. 화면이 하얗게 멈춰 있는 시간이 길어질수록 고객의 이탈률은 높아집니다. 당시 당사 유입 데이터를 분석해 보니 로딩이 길어진 세션에서 40%가 넘는 이탈이 관찰되기도 했습니다. 비싼 광고비를 들여 데려온 B2B 잠재 고객을 속도 문제로 잃고 있었던 셈입니다. 이탈하는 고객을 붙잡기 위해서는 페이지가 늦게 뜨는 현상을 넘어, 사용자가 버튼을 눌렀을 때 웹사이트가 얼마나 빠르게 반응...