브라우저 렌더링 성능 최적화

2020. 4. 16. 14:15

2020/04/09 - [Web] - 브라우저 렌더링

브라우저 렌더링에 대해서 알아본 후에

브라우저가 렌더링 되는 과정이 조금 더 빠르게 만들고

그로인해 사용자들의 편의성이나 페이지 유입을 늘리기 위해서

브라우저 렌더링을 최적화 하는 방법은 뭐가 있을지에 대해 알아보았다.

1. Reflow, Repainting

맨 처음 브라우저가 로딩될 때 렌더링 과정을 통해 화면이 그려진다.

그리고 그려진 화면은 자바스크립트에 의해 DOM 트리, CSSOM 트리가 변경될 때 재구성 된다.

DOM이 추가/삭제 되거나 DOM 요소에 높이, 너비, 위치 등의

기하학적 영향을 주는 CSS 내용이 변경될 경우에 렌더 트리가 재구성 되는데

이것을 Reflow(리플로우) 혹은 재배치라고 한다.

리플로우는 요소에 기하학적인 영향을 주는 CSS가 변경 되었을 때 발생하는데

반대로 기하학적 영향을 주지 않는 CSS 속성이 변경되었을 경우는 리플로우 과정을 건너뛰고

Paint 과정부터 수행한다. 이를 Repaint(리페인트)라고 한다.

리플로우가 일어나면 전체 픽셀을 다시 계산하는 과정을 거치기 때문에 부하가 크지만,

리페인트는 재배치 과정을 건너뛰고 화면에 그리는 작업만 수행하기 때문에 부하가 적다.

* 리플로우가 되는 CSS 속성 : top, left, right, bottom, width, height, line-height, font-size 등
* 리플로우 건너뛰고 리페인트 되는 CSS 속성 : background-image, color, visibility, outline 등

- 참고
https://docs.google.com/spreadsheets/u/0/d/1Hvi0nu2wG3oQ51XRHtMv-A_ZlidnwUYwgQsPQUg1R2s/pub?single=true&gid=0&output=html

리플로우와 리페인팅이 일어나면 렌더링 시간이 늘어나게 된다.

그렇기 때문에 불필요한 리플로우와 리페인팅을 없애기 위해 신경써야한다.

2. 렌더링 최적화 (로딩 최적화)

위에서 살펴본바와 같이

리플로우, 리페인팅으로 인한 초기 로딩 후에 렌더링 시간 지연이 있고

페이지에 진입했을 때 초기 로딩이 지연되는 경우가 있다.

이런 초기 로딩의 속도를 높이기 위해서 고려해야할 점들이 있다.

1. 블록 리소스 최적화

블록 리소스란 HTML이 파싱될 때 CSS나 자바스크립트로 인해 파싱이 중단되는 경우가 있다.
이렇게 HTML의 파싱을 막는 CSS나 자바스크립트의 리소스를 블록 리소스라고 한다.

css 최적화

렌더 트리를 구성하기 위해서는 DOM 트리와 CSSOM 트리가 필요하다.

DOM 트리는 파싱 중에 태그를 발견할 때마다 순차적으로 구성을 하지만

CSSOM 트리는 CSS를 모두 해석해야 다음 순서로 넘어가게 된다.

즉, CSSOM 트리가 모두 해석되지 않고 구성되지 않으면 렌더트리를 끝까지 만들지 못하고

렌더링이 차단된다.

이러한 이유로 CSS를 렌더링 차단 리소스라고 하고

렌더링이 차단되지 않도록 CSS는 가능하면 항상 HTML문서 최상단인 <head> 태그 안쪽에 배치해야한다.

<html>
   <head>
      <link rel="stylesheet" href="style.css">
   </head>
</html>

그리고 외부 스타일 시트를 가져올 경우 @import 사용은 피하고

link 태그를 사용하여 CSS를 불러와서 CSS 로드 속도를 줄여야한다.

(@import 사용시 직렬 로드를 하기 때문에 속도가 느리다.)

2020/03/03 - [CSS] - CSS 적용을 위한 또 다른 방법, @import

또한, 특정한 경우에서만 사용하는 CSS를 넣을 경우

미디어 쿼리를 사용하여 CSS를 분리해서 필요할 때만 로드될 수 있도록 한다.

<link rel="stylesheet" href="main.css">
<!-- 인쇄할 경우 -->
<link rel="stylesheet" href="main_print.css" media="print">
<!-- 세로모드일 경우 -->
<link rel="stylesheet" href="main_portrait.css" media="orientation:portrait">

자바스크립트 최적화

자바스크립트는 DOM 트리와 CSSOM 트리를 동적으로 제어하고 변경할 수 있기 때문에

블록 리소스에 해당한다.

그리고 스크립트가 실행될 동안에는 DOM 트리 생성은 중단된다.

그렇기 때문에 <script> 태그는 모든 DOM 요소가 생성된 이후에 가져오는 것이

블록 리소스를 최소화하는 좋은 방법이다.

(HTML 문서 최 하단 </body> 태그 직전에 배치)

<body>
   <div>test</div>
   <p>test desc</p>
   
   <script type="text/javascript" src="src.js"></script>
</body>

2. 리소스 요청 수 줄이기

CSS, 자바스크립트, 이미지 등의 리소스는 서버 요청 후 다운로드 되어야 사용할 수 있다.

특히나 이미지 파일은 용량도 크고 무겁기 때문에 이미지 로드에 많은 시간이 소비된다.

그렇기 때문에 페이지 로드시 필요한 이미지만 요청해서 가져올 수 있도록 최적화를 해야한다.

이미지 스프라이트

여러개의 아이콘 파일을 필요한 페이지에 각각 로드를 하게 된다면

아이콘 파일의 수 만큼 이미지 리소스를 불러와야 할 것이다.

그렇기 때문에 사용 용도에 맞게 아이콘들을 하나의 이미지로 합쳐서 만드는

이미지 스프라이트를 사용하게되면 여러번 불러와야 할 이미지들을

한 번만 불러와서 이미지 요청을 최소화 할 수 있다.

예시) 각각 처리할 수 있는 sns 아이콘을 하나의 이미지 파일로 합쳐서 관리한다.

/* background-position 값을 이용하여 이미지 위치 표현 */
.facebook{background:url(./ic_sns.png) -150px 0 no-repeat; width:150px; height:150px;}

3. 리소스 용량 줄이기

중복되는 코드 줄이기

자바스크립트에서 자주 사용하는 내용에 대해서 함수처리하여

중복되는 내용을 최소화 한다.

HTML 마크업 최적화

HTML 태그의 중첩을 최소화 하고 (HTML의 depth가 깊어지면 렌더링 속도에 영향을 준다.)

공백 주석 등도 최소화 하여 작업한다.

불필요한 마크업 사용을 자제하여 DOM 트리가 커지는 것을 방지하는 것이 좋다.

간결한 CSS 선택자 사용

CSS 스타일을 적용할 때 반복되고 공통되는 스타일은 클래스를 사용하여

다른 선택자의 사용을 최소화 한다.

<수정 전>

<head>
   <style>
      .text01{padding:10px; font-size:13px; color:#ddd; font-weight:bold;}
      .text02{padding:10px; font-size:13px; color:#333; font-weight:bold;}
   </style>
</head>
<body>
   <p class="text01">test용 텍스트</p>
   <div>
      <p class="text02">안녕하세요 Olleh</p>
   </div>
</body>

<수정 후> - 공통되는 내용을 .text 클래스에 담아서 반복되는 css 스타일을 최소화 하였다.

<head>
   <style>
      .text{padding:10px; font-size:13px; font-weight:bold;}
      .text01{color:#ddd;}
      .text02{color:#333;}
   </style>
</head>
<body>
   <p class="text text01">test용 텍스트</p>
   <div>
      <p class="text text02">안녕하세요 Olleh</p>
   </div>
</body>

display:none 속성 사용

display:none 속성을 사용해서 요소를 숨겨버리면 DOM 트리에는 반영이 되지만 렌더트리에는 반영되지 않아서 리플로우나 리페인팅도 발생하지 않는다.

초기 로딩에서 css를 적용해서 렌더트리에 반영이 필요하지 않는 영역의 경우 display:none으로 숨겨서 노출을 하는 것도 로딩 속도 향상을 위한 방법 중에 하나이다.

(visibility:hidden 속성으로 숨긴 영역은 렌더트리 구성에 포함이 된다.)

** 참고 **

https://ui.toast.com/fe-guide/ko_PERFORMANCE/

성능 최적화

애플리케이션 성능 최적화는 앱과 웹에서 모두 중요하다. 최근 웹 애플리케이션은 Ajax 통신, 복잡한 UI 등 많은 기능을 담으면서 크고 무거워졌다. 무거워진 웹은 긴 로딩 시간 함께 사용자 경험에 안 좋은 영향을 끼친다. Pinterest는 긴 로딩 시간으로 인해 사용자가 페이지를 나가는 비율이 높았는데, 최적화를 통해 사용자 이탈률을 줄이고 매출은 40%로 증가시켰다. 이처럼 매출 실적과 연결될 정도로 웹 애플리케이션의 성능 최적화는 매우 중요하다.

ui.toast.com

저작자표시 비영리

'Frontend > Web' 카테고리의 다른 글

SEO(검색 엔진 최적화)란? (0)	2020.04.21
웹해상도 (물리픽셀, 논리픽셀, 고밀도 해상도, PPI) (0)	2020.04.21
XML과 HTML (0)	2020.04.14
URI vs URL 비교 (0)	2020.04.10
브라우저 렌더링 (0)	2020.04.09

About Web