게시일: 2025년 1월 22일
QuintoAndar는 다음 페인트에 대한 상호작용 (INP)을 80% 줄여 웹 성능을 크게 개선했으며, 그 결과 전년 대비 전환수가 36% 증가했습니다. Google은 사용자 참여를 위해 빠르고 반응이 빠른 사이트가 중요하다는 점을 인식하여 모든 팀에서 실적에 우선순위를 두기 위해 '코드 옐로우'를 구현했습니다.
QuintoAndar는 실시간 사용자 모니터링 (RUM)과 같은 도구와 async/await와 같은 기법을 사용하여 긴 작업 최적화 및 React 전환을 수행하여 상호작용 시간을 줄이고 사용자 환경을 개선했습니다. 서드 파티 픽셀 삭제 및 렌더링 최적화 등 변경사항으로 인해 실적 측정항목이 개선되었습니다. 이제 페이지의 42% 에서 78% 가 INP의 '좋음' 기준인 200밀리초 이하를 충족하고, 시작 시 32% 였던 불만족스러운 환경을 제공하는 페이지는 6.9% 로 줄었습니다.
문제
QuintoAndar는 브라질에서 가장 큰 주택 플랫폼으로, 중남미 여러 국가에서도 등록정보가 활발하게 게시되고 있습니다. 검색은 부동산 분야에서 가장 큰 온라인 채널이므로 자연 트래픽을 획득하는 것이 비즈니스에 매우 중요합니다. 또한 사용자의 참여를 유도하고 사용자가 원하는 집을 찾을 수 있도록 하려면 우수한 사용자 환경을 제공하는 것이 중요합니다.
2024년 초, QuintoAndar는 시장에서 가장 우수한 플랫폼을 보유하고 있지만 더 나은 사용자 환경을 제공하여 전환율을 높일 수 있다는 사실을 깨달았습니다. 이는 다음 페인트에 대한 상호작용 (INP)이 Core Web Vitals로 도입되면서 분명해졌으며, 실제로 QuintoAndar는 경쟁사와 비교해 INP가 가장 낮았습니다.
QuintoAndar의 SEO 및 웹 성능팀은 높은 INP가 사용자 경험에 미치는 부정적인 영향을 인식하고 조치를 취하기로 결정했습니다. 명확하게 정의된 행동 계획을 바탕으로 INP를 줄이는 것뿐만 아니라 사용자 참여도와 클릭률을 개선하기 위한 일련의 기술적 및 콘텐츠 개선 작업을 시작했습니다.
다음은 QuintoAndar가 INP를 80%줄여 전환수를 크게 늘리고 사용자 환경을 개선한 사례입니다. 이 사례에서는 구현된 전략, 직면한 과제, 달성한 결과를 살펴봅니다.
노란색 코드: 웹 성능 우선순위 지정
웹 성능이 사용자 환경뿐만 아니라 전반적인 비즈니스 성공에도 중요하다는 점을 인식하고, 빠르고 반응이 뛰어난 사이트가 사용자 참여도와 사용자 유지율을 높이는 데 도움이 된다는 점을 알고 있는 QuintoAndar는 이러한 결과를 달성하려면 조직 전반에서 지속적이고 조화된 노력이 필요하다는 점을 깨달았습니다. 이에 따라 QuintoAndar는 '코드 옐로우'를 도입했습니다.
'Code Yellow' 개념은 Google에서 속도 향상 필요에 대응하기 위해 고안되었으며, 지정된 리더에게 현재 프로젝트와 관계없이 회사 내 모든 직원을 지원 요청할 수 있는 권한을 부여합니다.
QuintoAndar에서는 'Code Yellow'가 조직 내 웹 성능 개선에 우선순위를 두도록 설계된 내부 알림 시스템으로 작동했습니다. 'Code Yellow'가 선언되면 회사 내 여러 팀에서 성능 관련 문제를 해결하기 위해 즉각적으로 협력하여 조치를 취했습니다.
QuintoAndar에서 주요 기회를 파악하고 최적화를 적용한 방법
200밀리초를 초과하는 지연은 사용자에게 눈에 띄며 그 이상 지연되면 사용자 환경이 저하됩니다. INP 측정항목이 중요한 이유가 바로 여기에 있습니다. INP는 페이지 수명 주기 전반에서 발생하는 모든 클릭, 탭, 키보드 상호작용의 지연 시간을 관찰하여 사용자 상호작용에 대한 페이지의 전반적인 반응성을 평가합니다.
하지만 이 측정항목을 개선하려면 세부정보를 자세히 살펴봐야 합니다. QuintoAndar의 경우 첫 번째 단계는 사용자 환경의 어떤 단계와 요소가 느린 상호작용을 일으키는지 파악하는 것이었습니다. 느린 상호작용을 자세히 추적할 수 있는 실시간 사용자 모니터링 (RUM) 기법을 사용하면 됩니다. 여기에는 INP를 입력 지연, 처리 시간, 프레젠테이션 지연과 같은 하위 부분으로 분류하고 긴 애니메이션 프레임 (LoAF)을 분석하는 것이 포함됩니다.
이 과정을 통해 예를 들어 숙박 시설 검색 환경의 특정 요소가 75번째 백분위수 (사용자의 25% 에게 영향을 미침)에서 4초의 상호작용 시간을 유발한다는 것을 확인할 수 있었습니다. 긴 작업을 최적화하여 INP에 영향을 미치는 느린 상호작용을 대폭 개선했습니다. 이를 위해 async/await를 사용하여 QuintoAndar의 JavaScript 코드에 산출 포인트를 만들었습니다.
function yieldToMain () {
return new Promise(resolve => {
setTimeout(resolve, 0);
});
}
이렇게 하면 사용자에게 유용한 시각적 피드백이 더 빠르게 제공될 수 있습니다. QuintoAndar의 경우 스피너가 렌더링되고 기본 스레드가 다른 우선순위가 더 높은 작업을 위해 양보된 후 처음에 실행할 나머지 작업을 양보한 후 다시 시작할 수 있습니다.
async function handleFilterClick () {
showLoadingSpinner();
await yieldToMain(); // Yield point
await loadFilterData();
showModal();
}
React로 애플리케이션을 빌드하는 데 필수적인 또 다른 널리 사용되는 기술은 전환을 사용하는 것입니다. 이제 React에서 전환을 지원하므로 QuintoAndar는 useTransition 후크를 사용하여 사용자 인터페이스를 차단하지 않고 애플리케이션 상태를 업데이트할 수 있습니다.
import React, { useState, useTransition } from 'react';
function App() {
const [isPending, startTransition] = useTransition();
const [value, setValue] = useState('');
const onInputChange = event => {
setValue(event.target.value) // high-priority
startTransition(() => {
// Time-consuming task—for example, filter and update the list...
});
}
return (
<div className="App">
<input
value={value}
onChange={onInputChange}
placeholder='Start typing...'
/>
</div>
);
}
export default App;
QuintoAndar는 앞서 언급한 기법과 함께 메모이제이션, 데봉, 중단 컨트롤러, 서스펜스 사용과 같은 다른 개선사항을 구현하여 INP를 개선했습니다.
예를 들어 이전 코드 예에서는 특정 비활성 시간이 지나기 전까지 함수 실행을 지연하는 기술인 디버싱을 적용할 수 있습니다. 이렇게 하면 사용자가 빠르게 입력할 때 불필요한 업데이트를 방지할 수 있습니다.
useEffect(() => {
const handler = setTimeout(() => {
setDebouncedValue(value);
}, 300); // Adjust debounce delay as needed
return () => clearTimeout(handler);
}, [value]);
또한 INP의 대리 변수로 총 차단 시간 (TBT)을 사용함으로써 QuintoAndar는 다음과 같은 큰 구조적 변화의 영향을 추정할 수 있었습니다.
- 클라이언트에서 서드 파티 픽셀을 삭제합니다.
- CSS-in-JS를 삭제합니다.
- 렌더링 최적화
이러한 이니셔티브는 사용자가 상호작용을 시작할 때부터 등록된 이벤트 핸들러가 실행되기 시작할 때까지의 시간인 입력 지연을 직접 해결하므로 중요합니다. 사용자가 페이지와 상호작용을 시작할 때 다른 작업이 실행 중인 경우 입력 지연이 증가하는 경우가 많습니다. QuintoAndar의 경우 초기 페이지 로드 중에 기본 스레드에서 실행되는 태스크가 많기 때문에 입력 지연이 INP의 주요 원인 중 하나였습니다.
회귀 방지를 위한 웹 성능 거버넌스
회귀를 방지할 수 없는 경우 성능 문제를 우선순위 지정하고 해결하는 것만으로는 충분하지 않습니다. QuintoAndar는 과거에 회귀 문제가 발생했을 때 성능 개선 노력이 회귀하지 않도록 하기 위한 강력한 거버넌스 메커니즘을 만드는 것이 중요하다는 점을 깨달았습니다.
첫 번째 단계는 애플리케이션 유형 또는 환경 또는 둘 다로 분류된 각 측정항목에 대한 알림 메커니즘을 설정하는 것이었습니다. QuintoAndar는 실제 사용자로부터 캡처한 측정항목 데이터를 통해 실적을 모니터링하고 이 데이터를 시계열 데이터베이스로 전송할 수 있습니다. 이 데이터베이스에서는 도구를 사용하여 대시보드와 세분화된 알람을 생성할 수 있습니다.
QuintoAndar는 고정된 알람 외에도 비정상적인 결과를 감지하는 가변 임곗값이 있는 알람을 구현하여 고정된 임곗값에 도달하기 전이라도 상황이 통제 불능 상태가 되면 개발팀에 알립니다. QuintoAndar는 이러한 알람의 기준을 조정하기 위한 격주 위원회도 구성했습니다.
이슈를 처리하기 위해 프로세스가 생성되었으며, 이 프로세스는 발생할 수 있는 각 문제 유형에 따라 따라야 할 절차를 자세히 설명하는 런북을 사용하여 엄격하게 준수되었습니다. 엔지니어링 담당자는 누구나 이 런북을 따라할 수 있습니다.
마지막으로 INP 문제가 프로덕션에 들어가지 않도록 하기 위해 QuintoAndar는 사용자에게 새 버전을 단계적으로 제공하는 카나리아 출시 시스템을 구현했습니다 (예: 1%, 10%, 65%, 100%씩 점진적으로). 각 재균형 조정 단계에서 카나리아 버전이 사용자의 성능을 저하시킬지 확인합니다. 이 경우 최적화되지 않은 기능이 프로덕션에 완전히 적용되지 않도록 자동으로 롤백됩니다.
요약하자면 취해진 주요 조치는 다음과 같습니다.
- 기준점 미세 조정을 위한 격주 위원회와 함께 잘 정의된 알림 (고정 및 가변)
- 자세한 런북이 포함된 이슈 절차
- 잠재적인 성능 회귀의 영향을 제한하기 위한 성능 검증이 포함된 카나리아 출시
결과
조직 내에서 성능에 적절한 우선순위를 두고 전담 성능팀을 구성하고 최적화 기법을 사용한 결과, RUM 데이터에서 측정한 바와 같이 INP가 80% 감소했습니다. 아래 차트는 모바일에 관한 INP를 보여주며, 초기에 급격한 감소가 나타납니다. 이번 개선사항은 특히 문제가 되는 상호작용의 수정사항을 통해 이루어졌습니다. 또한 일 년 내내 일관되게 감소한 것을 보여주며, 이는 회귀를 방지하는 데 거버넌스 프로세스의 중요성을 보여줍니다.
이러한 개선사항은 CrUX 대시보드에도 반영되었습니다.이제 QuintoAndar의 INP는 75번째 백분위수에서 200밀리초 미만이며 페이지의 78% 가 이 기준점 미만의 실적을 보임, 페이지의 6.9% 만 환경이 좋지 않음(이 수치는 매달 꾸준히 감소하고 있음)
이 결과는 QuintoAndar의 비즈니스에 직접적인 영향을 미치는 데 중요했습니다. QuintoAndar는 전년 대비 전환수 (QuintoAndar의 경우 숙박 시설 방문을 예약한 신규 잠재고객)가 36% 증가했다고 보고했습니다. 이 결과는 더 나은 사용자 환경을 제공하여 달성한 참여도 향상과 밀접하게 관련되어 있지만, 그 외에도 다른 요인이 작용했을 수 있습니다.
결론
웹 성능을 개선하는 것은 쉽지 않습니다. 때로는 버겁게 느껴질 수도 있습니다. QuintoAndar는 시작할 때 모든 답변을 가지고 있지는 않았습니다. 그러나 문제를 분류하고 가장 큰 영향을 미치는 문제에 집중하며 팀 간의 공동작업을 장려하여 실질적인 진전을 이루었습니다. 모든 문제를 한 번에 해결할 필요는 없습니다. 사소한 변경사항이라도 의미 있는 개선을 가져올 수 있습니다. 가장 큰 병목 현상을 파악하거나, 최적화를 실험하거나, 팀 내에서 인식을 높이는 등 첫 번째 단계를 시작하면 성능과 사용자 환경을 개선하는 데 한 걸음 다가갈 수 있습니다.