[성능] 브라우저 프리로드 스캐너 (pre-load scanner)

#Table Of Contents

웹 페이지 속도를 개선하기 위해서 어떠한 것들을 해야하고 무엇을 알고 있어야할까?

그중 첫번째는 브라우저의 프리로드 스캐너이다. 브라우저가 최적화하는 기본적인 기능이지만 이를 제대로 알지못한다면 오히려 브라우저가 최적화하는 노력을 방해하고 있을지도 모른다.

일반적으로 브라우저가 HTML을 파싱할 때 외부 리소스(CSS, Script) 를 만나면 **잠시 중단(블로킹)**하고 외부 리소스를 다운로드 시작한다.

먼저 CSS같은 경우 스타일링이 적용되지 않는 콘텐츠가 잠깐 나타나는 현상을 방지하기 위해 HTML 파싱과 렌더링을 중단한다. (FOUC, Flash Of Unstyled Content)

자바스크립트 경우, async 또는 defer 가 없다면 자바스크립트를 완전히 다운로드 받을 때까지 중단한다. 그래서 일반적으로 가장 하단에 스크립트를 설정하는 경우가 일반적이다.

<script /> type=module이 존재한다면 디폴트로 defer속성이 적용된다.

이와 같이 HTML 파싱하는 것을 주로 외부 리소스라고 할 수 있으며 파싱을 블로킹하는 시간이 길어 질수록 사용자가 웹 페이지 화면을 기다리는 시간이 증가하게 된다.

HTML 파싱을 최대한 중단하지 않고 리소스를 미리 발견하여 백그라운드에서 병렬적으로 다운로드할 수 있도록 해주고 이 역할을 도와주는 것이 브라우저에서 기본적으로 제공하는 프리로드 스캐너(pre-load scanner)이다.

따라서 브라우저의 프리로드 스캐너를 최대한 방해하지 않는 것 자체가 성능을 최적화할 수 있는 방법중 하나이다.

웹 페이지 최적화하는 것중 이미지와 같은 리소스를 처리하는 것이 중요하며, 일반적으로 이미지를 웹 페이지에 보여주는 방법에는 여러가지 방법이 있다.

사실 위 방법들 중 차이를 생각해 보지 않고 “이미지 로드가 잘되네??” 라고 넘기곤 했었다.

하지만 이미지 크기가 클수록 그리고 뷰포트 내에 메인 콘텐츠일 수록 최대한 이미지를 빠르게 로드하는 것이 중요하다.

아래 캡처본은 dev 모드에서 빠른 3G 속도로 측정한 결과이며, 단순히 이미지 3개만을 비교하기 위한 것이다.

pre-load-scanner

위 캡처본을 보면 img 태그가 8.10초로 가장 빠르고, 두 번째는 css background 8.11초, 세 번째는 svg 태그 내 image가 8.12초로 img > css background > svg(image) 순서이다.

이를 설명하자면,

프리로드 스캐너에 의해 먼저 발견되는 것은 img 태그이며, 따라서 HTML 파싱이 완료되지 않더라도 img 태그의 이미지를 병렬적으로 다운로드받는다. 이는 picture 태그도 마찬가지다.

svg 태그 내 img는 발견되지 못하고 모든 리소스를 다운로드 받은 후 이미지를 불러온다.

background-image는 CSS 속성으로 프리로드 스캐너가 아닌 CSS를 처리하는 시점에 이미지 다운로드 요청이 일어난다.

이처럼 브라우저에서 기본적으로 제공하는 프리로드 스캐너를 알지 못한다면, LCP에 좋지 못한 영향을 줄 것이다.

스크립트 속성으로 async, defer 속성이 있는데 프리로드 스캐너를 설명하기 위해 defer와 html에 스크립트를 삽입한 것을 예시로 한다.

<body>
  <script src="/main.js"></script>
  <div id="app">
    <h1>test code</h1>
  </div>
  <script defer src="/main.js"></script>
</body>

아래 예시 이미지를 보자

기본 스크립트 다운 pre-load-scanner 기본 스크립트를 적용할 경우 이미지에서 네트워크 통신 후 html 파싱하다가 스크립트를 만나면 HTML 파싱을 중단하고 스크립트를 우선적으로 다운로드하여 실행`한다.

반면

defer를 적용한 스크립트 다운 pre-load-scanner

defer를 적용했을 경우 프리로드 스캐너가 스크립트를 먼저 발견하고 HTML 파싱을 중단하지 않고 병렬적으로 다운로드 하는 모습을 확인할 수 있다. 그리고 스크립트 다운로드되면 이후 실행한다.

결과적으로 LCP에서 크게 차이가 나타는데,
기본 스크립트 LCP 6.25s -> defer LCP 591.42ms다.

이처럼 LCP에서 크게 차이가 난다. 그럼 당연히 사용자는 메인 콘텐츠가 빠르게 보이는 웹 페이지에 오래머무르지 않을까?

프리로드 스캐너는 HTML 파싱을 중단하는 것을 방지하기 위해 브라우저에서 제공하는 최적화 기능이다. 프리로드 스캐너가 동작하는 것을 방해하지 않는 것이 프리로드 스캐너가 잘 동작하는 것이라고 생각한다.

SSR을 활용하면 빠르게 HTML을 브라우저에 전달하여 프리로드 스캐너가 필요한 리소스를 먼저 발견할 수 있도록 한다.

외부 스크립트를 사용할 경우, 최우선으로 다운로드가 필요하지 않다면 스크립트 속성에 async, 되도록이면 defer을 추가하여 프리로드 스캐너에 의해 발견`되어 병렬적으로 다운로드 받을 수 있도록 한다.

뷰포트 내에 있는 lazy load 이미지를 적용하지 않는다.

프리로드 스캐너는 HTML만 스캔한다. 따라서 CSS 내부에 있는 이미지들은 스캔하지 못하기 때문에 LCP에 영향을 주는 이미지라면 img 태그를 사용한다.

성능과 최적화에 대해 공부하면서 미처 깨닫지 못했던 브라우저 기능인 프리로드 스캐너에 대해 알아보았다. 성능 최적화를 위한 여러 방법들이 있지만, 브라우저의 동작 원리를 이해하는 것이 중요하다는 것을 깨달았다.

개발자는 웹 페이지의 성능을 최적화하기 위해 끊임없이 노력한다. 브라우저 역시 최대한 빠르게 웹 페이지를 보여주기 위해 최선을 다한다. 그렇다면 브라우저가 제공하는 최적화 기능을 최대한 방해하지 않는 것만으로도 웹 페이지의 성능을 향상시킬 수 있지 않을까.