내 웹 페이지 성능을 어떻게 올릴까?— 기초

10 min readMay 27, 2021

개요

여러 페이지를 들어가다 보면 어떤 사이트는 느리고 어떤 사이트는 빠른 경우를 체감하게 된다. 나의 경우 그 비교 대상은 쿠팡과 무신사이다. 실제 물건을 하나 클릭한 후 Lighthouse로 측정을 해보면 performance 점수가 각각 56, 24점이 나온다.

무신사의 경우 보여주는 사진이 더 많아서 느린 것도 있겠지만, HTML이 로딩된 후 첫 이미지 또는 글자 등을 보여주기까지의 시간을 의미하는 FCP가 각각 0.6, 1.4 초로 거의 2배 이상의 차이가 난다. 속도에 따라서 가입자, 방문자 수와 수익이 증가한다고 하니 무신사는 쿠팡보다 그동안 기회비용을 더 잃지 않았을까?

본 시리즈에서는 HTML, CSS, JS가 어떻게 브라우저에서 다뤄지는지 알아본 후 간단히 용어 설명을 한다. 그 후 쉬운 예제 하나를 성능 최적화한 후 실제 React 앱에서 어떻게 성능을 최적화할지 알아보겠다.

<html>  <head></head>  <body>    <p>      <span>Hello</span>      <!-- script를 만나면 HTML parsing을 잠시 중단한다.  -->      <script>      // 여기서 Hello span을 가져와서 어떤 작업을 수행이 가능하다.      // 하지만 이 이후의 DOM을 읽지  않았으므로, World div를 가져와서 어떤 작업을 수행할 수 없다.      </script>      <div>World</div>    </p>  </body></html>

이때 만약 script를 2개 이상 불러온다면 하나의 script가 다 불러올 때까지 다른 한 개는 기다려야 하는 문제가 생긴다.

브라우저에서는 Preload Scanner를 사용해 parser blocking 상태여도 다음 줄을 계속해서 읽으며 script, style, 이미지 등의 데이터를 네트워크 통신으로 가져온다. 이때 최소 라운드 트립은 1회이다.

이 때 다운로드 우선순위를 낮추고 특정한 상황에서만 style 적용하는 방법이 있다. 바로 media를 사용한다.

<!-- 다운로드 우선순위가 낮아지고 특정한 상황에만 style을 적용한다. --><link rel="stylesheet" href="style-print.css" media="print">

CSSOM(CSS Object Model)

바이트 -> 문자열 -> 토큰 -> Node -> CSSOM

css를 읽으면 아래와 같이 CSSOM으로 변환된다.

body { font-size: 16px }
p { font-weight: bold }
span { color: red }
p span { display: none }
img { float: right }

https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model?hl=ko

CSS는 render blocking이다. 즉, CSSOM이 생성되기까지 브라우저는 처리되는 모든 콘텐츠를 렌더링하지 않는다.

JS

렌더링 엔진이 script 태그를 만나면 src 어트리뷰트에 따라 불러들인 JS 파일이나 태그 내의 코드를 파싱하기 위해 JS 엔진에 제어권을 넘긴다.

JS 엔진은 이후

토크나이징-> 파싱(Abstract Syntax Tree 생성) -> 바이트코드 생성-> 인터프리터에서 저수준 언어로 변환 및 실행한다.

그리고 렌더링 엔진에게 다시 제어권을 넘긴다.

JS는 DOM API를 사용하여 DOM과 CSSOM을 조작할 수 있다. CSSOM이 생성되기 전 JS가 실행된다면 원하지 않는 side effect를 발생시킬 수 있다. 그러므로 브라우저는 JS가 먼저실행되면 CSSOM이 완료되기까지 DOM 생성 작업을 지연시킨다.(parser blocking)

parser blocking을 해결 또는 최소화하기 위해서는 아래의 방법이 있다.

body아래에 script를 놓는다.
defer 속성 사용: 스크립트 다운로드는 비동기적으로 실행되지만, JS 파싱과 실행은 HTML paring이 완료된 직후(DOMContentLoaded)에 진행된다.
async 속성 사용: 스크립트 다운로드가 끝나면 바로 실행된다. HTML parsing 중간에 실행될 수 있다.
window.onload 사용

이 중 2, 3번은 src 어트리뷰트를 통해 외부 js 파일을 불러들이는 경우에만 사용할 수 있다.