이 웹사이트는 어떻게 이렇게 빠를까?

이 영상은 100년이 넘은 전통을 가진 기업인 맥마스터 카(McMaster-Carr)의 웹사이트가 어떻게 현대의 최신 웹사이트들보다 압도적으로 빠른 성능을 보여주는지 그 이면에 숨겨진 기술적 기교와 전략을 심층적으로 분석합니다.

• 서버 사이드 렌더링(SSR)의 철저한 활용

  • 복잡한 자바스크립트 프레임워크에 의존하지 않고 서버가 직접 HTML을 생성하여 브라우저에 전달합니다.
  • 브라우저는 이미 완성된 HTML을 렌더링하는 데 매우 최적화되어 있어 초기 로딩 속도가 비약적으로 빠릅니다.

• 능동적인 프리페칭(Prefetching) 기술

  • 사용자가 링크 위에 마우스 커서를 올리면(Hover), 브라우저는 즉시 해당 페이지의 HTML을 요청하여 백그라운드에서 미리 다운로드합니다.
  • 사용자가 실제로 클릭하기 전에 데이터가 준비되어 있어, 페이지 전환이 즉각적으로 느껴지는 효과를 줍니다.

• 푸시 스테이트(Push State)를 통한 매끄러운 화면 전환

  • 페이지 전체를 새로고침하는 대신, 변하지 않는 부분(네비게이션, 쇼핑카트 등)은 그대로 두고 변화가 필요한 본문 영역인 셸(Shell) 만 교체합니다.
  • 이 방식은 브라우저 주소창의 URL은 변경하면서도 화면은 깜빡임 없이 즉시 렌더링되게 합니다.

• 강력하고 다층적인 캐싱 전략

  • CDN(Content Delivery Network) : 아카마이(Akamai) 기술을 사용하여 전 세계 곳곳에 서버 렌더링된 HTML을 저장하고 사용자에게 가장 가까운 곳에서 제공합니다.
  • 프록시 캐시: 스퀴드(Squid) 캐시와 같은 프록시 서버를 활용하여 서버 부하를 줄이고 응답 속도를 극대화합니다.
  • 서비스 워커(Service Worker) : 브라우저 레벨에서 요청을 가로채어 이전에 방문한 페이지를 로컬 캐시에서 즉시 불러옵니다. 이는 오프라인 앱과 유사한 속도를 제공합니다.

• 리소스 로딩 최적화

  • 링크 프리로드(Link Preload) : 브라우저가 HTML을 파싱하는 동안 로고 이미지나 웹 폰트가 필요할 것임을 미리 알려주어, 폭포수 현상(Waterfall) 없이 리소스를 동시에 다운로드합니다.
  • DNS 프리페치(DNS Prefetch) : 이미지 서버 등 외부 도메인에 대한 IP 주소를 미리 찾아두어, 실제 이미지 요청 시 발생하는 지연 시간을 단축합니다.
  • 크리티컬 CSS(Critical CSS) : 외부 CSS 파일을 기다리지 않고, 페이지 렌더링에 필수적인 스타일을 HTML 상단의 스타일 태그에 인라인으로 직접 삽입합니다. 이를 통해 페이지가 깨져 보이는 현상(Jank) 없이 즉시 올바른 레이아웃이 출력됩니다.

• 이미지 처리 기법

  • 고정 수치 지정: 이미지 태그에 명확한 너비(Width)와 높이(Height)를 부여하여, 이미지가 로드될 때 주변 콘텐츠가 밀려나는 레이아웃 이동 현상을 방지합니다.
  • 이미지 스프라이트(Image Sprite) : 수많은 작은 아이콘과 이미지를 하나의 큰 이미지 파일로 합쳐서 한 번의 요청으로 모두 가져옵니다. 이는 HTTP 요청 횟수를 획기적으로 줄여줍니다.

• 페이지별 맞춤형 자바스크립트 관리

  • 모든 페이지에서 하나의 거대한 자바스크립트 번들을 로드하는 대신, 각 페이지에 꼭 필요한 코드만 선별하여 로드하는 의존성 주입 방식을 사용합니다.
  • 서버 응답 메타데이터에 해당 페이지에 필요한 자바스크립트 파일 경로를 포함시켜 전송합니다.

• 성능 측정과 기술 부채의 조화

  • 웹사이트 소스 코드 곳곳에 성능 측정 마크가 존재하며, 이는 개발팀이 성능 지표를 극도로 중요하게 관리하고 있음을 보여줍니다.
  • 놀랍게도 이 사이트는 2008년 개발된 YUI(Yahoo User Interface) 라이브러리와 제이쿼리(jQuery) 같은 오래된 기술을 여전히 사용하고 있습니다.
  • 최신 프레임워크를 사용하지 않더라도, 올바른 최적화 원칙을 적용한다면 구형 기술로도 최상의 사용자 경험을 제공할 수 있다는 것을 증명합니다.

• 사용자 환경을 고려한 설계

  • 맥마스터 카의 주요 고객인 기계 제작자나 작업자들은 거친 환경에서 오래된 기기를 사용하는 경우가 많습니다.
  • 이들은 느린 네트워크 환경에서도 빠르고 정확하게 수십만 개의 제품 카탈로그를 탐색해야 하므로, 불필요한 장식보다 정보 전달의 속도에 모든 기술력을 집중한 결과입니다.