Web 성능 최적화

Web 성능 최적화는 크게 Rendering 최적화와 Loading 최적화로 나눌 수 있다.

개발자 도구(F12)에 있는 Lighthouse를 이용하여 성능 테스트를 할 수 있음

 

- Rendering 최적화 

1. HTML 최적화

  1) tag안에 직접 지정하는 Inline style을 사용하지 않는다.

  불필요한 코드 중복이 발생하기 쉽고, 웹페이지가 그려지는 과정 중 Layout에 영향을 미쳐 추가 Reflow를 발생한다.

 

  2) 복잡한 DOM Tree를 지양한다.

  DOM Tree가 커질수록 Rendering 속도가 느려지기 때문에 불필요한 요소는 제거한다.
  

2. CSS 최적화

  1) Reflow, Repaint 최소한으로 줄이기

  브라우저 style은 Reflow(넓이, 높이, 위치 등) 후 Repaint를 진행하며, Reflow가 일어나면 브라우저가 전체 픽셀을 다시 계산해야 하기 때문에 되도록 Reflow를 발생시키지 않는 것이 좋다.

 

- Reflow를 발생시키는 속성

position / width / height / margin / padding / display / top / left / right / bottom / box-sizing / background-color / border-color / text-align / border / border-width / font-family / float / font-size / font-weight / line-height / vertical-align / white-space / word-wrap / text-overflow / text-shadow

 

- Repaint를 발생시키는 속성

color / border-style / visibility / background / background-image / background-position / background-repeat / background-size / text-decoration / outline / outline-style / outline-color / outline-width / border-radius / box-shadow

 

- 둘 다 발생시키지 않는 속성

opacity / transform / cursor / z-index

 

  2) 불필요한 CSS 제거

 

  3) 간결한 Style 작성

  복잡한 selector 사용은 지양한다.

  

 

3. 애니메이션 최적화

  1) CSS를 통해 구현

  자바스크립트 라이브러리를 이용하는 것보다 CSS를 통해 구현하는 것이 성능면에서 더 좋다.

  transform 같은 경우에는 Reflow와 Repaint를 발생시키지 않아 Rendering에 효율적이다.

  postion 설정 시 absolute나 fixed로 설정하면 주변 요소에 영향을 주지 않는다.

 

4. JavaScript 최적화

  1) 강제 동기 Layout & Layout thrashing 피하기

  Layout 단계가 완료되기 전에 요소의 속성을 이용하려고 하면 강제 Layout이 발생하는데 이것을 강제 동기 Layout이라고 하며, 반복적으로 발생시키는 것을 Layout thrashing이라고 한다.

 

  ex)

// Bad
function resizeAllParagraphs() {
  const box = document.getElementById('box');
  const paragraphs = document.querySelectorAll('.paragraph');

  // for문 돌면서 강제 동기 레이아웃 계속 진행
  for (let i = 0; i < paragraphs.length; i += 1) {
    paragraphs[i].style.width = box.offsetWidth + 'px';  
  }
}

// Good - 레이아웃 스래싱을 개선한 코드
function resizeAllParagraphs() {
  const box = document.getElementById('box');
  const paragraphs = document.querySelectorAll('.paragraph');
  const width = box.offsetWidth; // 강제 동기 레이아웃 한번만 진행

  for (let i = 0; i < paragraphs.length; i += 1) {
    paragraphs[i].style.width = width + 'px';
  }
}

 

 

- Loading 최적화

1. Render Blocking 최적화

  1) css는 head에 js는 body 마지막에서 불러온다.

  Web Page가 load되면 html과 css가 동시에 parsing 되는데 중간에 script를 만나면 parsing을 멈추고 해당 파일을 다운로드하기 때문에 구조들의 load가 끝나고 진행하는 게 좋으며, 상황에 따라 script async나 script defer를 이용해도 좋다. 

 

2. 이미지 최적화

  1) picture tag 사용

  picture tag의 type 속성을 통해 브라우저 환경에 맞는 효율적인 image를 제공할 수 있다.

 

webp : jpg / png 대비 30~70% 수준의 용량, IE 미지원
avif : 저용량, 고품질

 

  ex)

<!-- 브라우저가 avif를 지원하면 avif를 사용, 그렇지 않은 경우 webp,
     둘 다 지원하지 않을 경우 jpg 이미지를 사용-->
    
<picture>
    <source srcset="ex.avif" type="image/avif">
    <source srcset="ex.webp" type="image/webp">
    <img src="ex.jpg" alt>
</picture>

 

  2) Image Lazy Loading 사용

  loading 속성을 사용하여 image 지연 / 병렬 loading이 가능

  속성값으로는 auto, lazy, eager이 있으며 설명은 아래와 같다.

auto : loading 속성 사용하지 않음 (default)
lazy : 화면에 보이는 부분만 먼저 출력하고 보이지 않는 부분은 loading 하지 않음
eager : 화면 위치에 상관없이 page가 loading 되자마자 image를 load 함

 

  ex)

<img loading="lazy" src="..." />

 

  3) Sprite Image 사용

  여러 개의 이미지를 하나의 이미지로 만들어서 background-position 속성을 사용해 부분적으로 이미지를 사용하는 방법이다. 이미지 파일 개수 자체를 줄일 수 있으므로 리소스 요청을 줄일 수 있으며, 관리도 편하다.

 

  ex)

<style>
    .up, .down, .right, .left { display: inline-block; background: url("icon.png") no-repeat;}
    
    .up {width: 50px; height: 60px; background-position: 0 0;}
    .down {width: 50px; height: 60px; background-position: -60px 0;}
    .right {width: 50px; height: 60px; background-position: -117px 0;}
    .left {width: 50px; height: 60px; background-position: -178px 0;}
</style>

<!-- 예시라 실제 크기가 안맞을 수 있음 -->

 

3. Webpack 사용

  module bundler webpack을 사용하여 bundling을 통해 리소스 요청을 줄일 수 있다.

 

4. Gzip 사용

  Gzip : 파일 압축에 쓰이는 응용 소프트웨어이며, 서버에서 html, css, javascript 등을 압축해줘서 리소스를 받는 loading 시간을 줄여준다.

 

5. CDN 사용

  CDN (Content Delivery Network) : Content를 효율적으로 전달하기 위해 여러 노드를 가진 네트워크 데이터를 저장하여 제공하는 시스템

 

 

6. Web Caching

  Web Cache : Client가 요청한 html, image, js, css 등에 대해 첫 요청 시에 파일을 다운로드하여 특정 위치에 복사본을 저장하고, 이후 동일한 요청 시 다시 다운로드하지 않고 내부에 저장한 파일을 사용하여 더 빠르게 서비스하기 위해 사용하며, 서버를 통해 내려받는 양이 적어져서 응답 시간이 감소하고 네트워크 트래픽이 감소하여 효율적이다.