📝 FE 성능 최적화 정리

권규리·2024년 1월 22일

👩🏻‍💻FrontEnd

목록 보기

3/29

📌여는 말

구글의 조사에 의하면 페이지가 3초 안에 로딩되지 않는다면 53% 사용자가 떠나고, 로딩 시간이 길어질수록 이탈률이 늘어난다고 하며 이를 3초 법칙이라고 한다. 이렇게 첫 인상(?)이 중요한 것 같다. 웹페이지의 첫 인상이 좋으려면 성능을 좋게 유지하는 수 밖에 🔥

1장. 웹 성능 최적화 종류

웹의 성능을 최적화할 수 있는 부분은 크게 2가지로 나눌 수 있다.

📝 로딩 성능 최적화

브라우저가 리소스를 불러오는 성능을 높이는 방법

📝 렌더링 성능 최적화

브라우저가 화면에 그려주는 성능을 높이는 방법

이렇게 설명으로만 봐서는 로딩 성능 최적화가 무엇인지, 렌더링 성능 최적화가 무엇인지 잘 감이 안 온다. 각각 최적화를 하는 데에 어떤 방법이 있는지 알아보자구요 ~💡

2장. 로딩 성능 최적화 🏃🏻

(1) 🧩 Block Resource 최적화

브라우저가 상단부터 차례대로 내려가며 로드된다. 브라우저 로드 시, HTML과 CSS이 동시에 파싱되는데 이때 Script 파일을 만난다면 HTML과 CSS 파싱을 멈추고, JS 파싱을 시작한다. 이처럼 HTML 파싱을 차단하는 요소를 Block Resource(블록 차단 리소스)라고 한다.

그런데 Block Resource가 왜 로딩 성능과 관련 있죠? 🤔

그냥 JS 파싱 하고 HTML 다시 파싱하면 되는거 아닌가?

HTML은 Script 태그를 만나면 DOM 생성을 중지하고 JS 엔진에게 제어 권한을 넘긴다. JS 엔진의 실행이 완료된 후 브라우저가 중지했던 DOM 생성을 다시 한다! 이렇게 인라인 Script를 실행하면 DOM 생성이 차단되고, 이로 인해 초기 렌더링이 지연된다. 즉, Block Resource는 렌더링 차단 요쇼이기 때문에 올바른 위치에서 실행 되어야 한다.

🧩 Block Resource 최적화 방법을 소개하지!

⭐방법 1⭐ CSS는 head 태그 내에서, JS는 body 태그 내에서 import 하기

HTML과 CSS는 우리가 보는 시각적인 부분을 구현하기 때문에 브라우저 로드 시, 빠르게 그려질수록 좋다. 따라서 CSS는 head 내에서 import 한다.
브라우저는 HTML, CSS를 파싱하고 있어도 Script 태그를 만나면 파싱을 중지하기 때문에, HTML과 CSS의 로드가 끝나고 Script가 들어오는 구조로 하는게 좋다. 따라서 Script 태그로 실행되는 JS는 일반적으로 body 태그를 닫기 전 맨 하단에 위치시킨다.

⭐방법 2⭐ CSS- media attribute

media attribute은 단말기 유형에 따라 조건별로 CSS 불러와서, 불필요한 블로킹을 방지할 수 있다.

<link href="style.css" rel="stylesheet" />
<link href="print.css" rel="stylesheet" media="print" />
<link href="mobile.css" rel="stylesheet" media="width:790px" />

⭐방법 3⭐ JS- async/defer

async와 defer 속성은 Script 파일을 비동기로 다운로드 하게 해준다. 즉, HTML 파싱 중에 Script를 만나도 파싱을 멈추지 않고 Script를 다운로드 할 수 있다.

🌞 async

HTML 파싱동안 Script도 같이 다운로드 된다. Script는 다운로드 후 즉시 실행되며, HTML은 실행되는 동안 중지되었다가 실행이 끝나면 다시 파싱된다.

하지만 asynk Script는 다운로드를 마치면 즉시 HTML 파싱을 멈추고 Script 파일을 해석한다. 때문에 asynk 속성으로 파일을 불러온다고 해도, 스크립트의 해석이 얼마나 오래 걸릴지 모른다. 따라서 asynk 스크립트는 실행 순서가 보장되지 않는다.

<!-- large.js 는 로드되는데 5초가 걸립니다 -->
<script src="large.js" async></script>

<!-- small.js 는 로드되는데 1초가 걸립니다 -->
<script src="small.js" async></script>

원래는 순서에 따라 large.js가 먼저 실행되어야 하지만, 먼저 로드 되는 스크립트인 small.js가 실행되므로 스크립트의 순서가 보장되지 않는다 !!!

🌞 defer

HTML 파싱동안 Script도 같이 다운로드 된다. Script는 다운로드 후 즉시 실행되는 asynk Script와는 다르게, 모든 DOM이 로드된 후에 실행된다.

<!-- large.js 는 로드되는데 5초가 걸립니다 -->
<script src="large.js" async></script>

<!-- small.js 는 로드되는데 1초가 걸립니다 -->
<script src="small.js" async></script>

defer Script는 로드가 더 빨리된 Script가 있더라도, 항상 순서에 따라서 실행되므로 순서가 보장된다.

(2) 🧩 Image 최적화

⭐방법 1⭐ picture 태그의 type 속성 사용

picture 태그는 img 태그에 대해 여러개의 반응형 이미지를 제공하는 source 태그가 포함된 부모 요소이다. picture 태그는 source 태그를 이용한 반응형 이미지를 사용함으로써 대역폭을 절약하고 페이지 로드 시간 단축을 위해 쓰인다.

<picture>
    <source srcset="small.jpg" media="(max-width: 768px)">
    <source srcset="large.jpg" media="(min-width: 769px)">
    <img src="fallback-image.jpg" alt="image">
</picture>

📌 picture 태그 사용 시 주의사항

source 태그 또는 img 태그 둘 중 하나는 있어야 한다.
source 태그, img 태그 둘 다 있을 경우, img 태그가 나중에 위치해야 한다. => source 태그 중 어느 것도 반응형으로 제공할 수 없는 경우 img 태그의 이미지 제공!
img 태그를 삭제할 경우, alt 속성이 없으므로 웹 접근성이 떨어지며 source 태그 중 제공할 이미지가 없다면 fallback 이미지로 사용할 수 없다.

⭐방법 2⭐ image 지연 로딩

쇼핑몰 웹 페이지처럼 이미지가 많이 필요한 서비스에서 사용자 첫 화면에 보이는 이미지만 요청하고, 사용자가 스크롤을 통해 내려야 보이는 이미지는 지연 로딩을 통해 리소스 요청을 줄일 수 있다.

<!-- auto는 default 값으로, loading 속성을 안 쓴 것과 같음 -->
 <img src="image.jpg" loading="auto" alt>

<!-- lazy는 사용자가 보이는 부분만 먼저 출력하고, 보이지 않는 부분은 사용자가 스크롤 시 출력됨 -->
 <img src="image.jpg" loading="lazy" alt>

<!-- eager은 보이든, 안 보이든 이미지를 로드한다.-->
 <img src="image.jpg" loading="eager" alt>

⭐방법 3⭐ 스프라이트 이미지

스프라이트 이미지란, 여러개의 이미지를 하나의 이미지로 합쳐 관리하는 이미지이다. 이를 사용하면 이미지를 다운받기 위한 서버 요청을 줄일 수 있기 때문에 웹 페이지의 로딩 시간을 줄일 수 있다.

⭐방법 4⭐ .jpg, .png를 webp으로 변환

이미지 형식을 webp으로 변환하면 .jpg, .png보다 파일의 크기를 최소 25~30% 줄일 수 있으며, 압축에도 용이하다. 따라서 기존 이미지 형식에 비해 로드 속도가 더 빠르다.

(3) 🧩 Webpack

모듈 번들러 웹팩(Webpack)을 사용해서 css와 js 모듈을 하나의 파일로 병합하는 모듈 번들링을 통해 리소스 요청을 줄일 수 있다.

📌 Before- 번들링 전

  <head>
    <link href="main.css" rel="stylesheet">
    <link href="sub.css" rel="stylesheet">
  </head>
  <body>
	...
    <script async src="main.js" type="text/javascript"></script>
    <script async src="sub.js" type="text/javascript"></script>
  </body>

📌 After- 번들링 후

  <head>
    <link href="budle.css" rel="stylesheet">
  </head>
  <body>
	...
    <script async src="bundle.js" type="text/javascript"></script>
  </body>

3장. 렌더링 성능 최적화 🏃

(1) 🧩 HTML 최적화

⭐방법 1⭐ inline style 사용 금지

HTML 요소에 style을 작성하면 Reflow를 계속 발생시켜 렌더링 완료 시점을 늦춘다.

<div style="margin: 10px;"></div>

⭐방법 2⭐ DOM 트리 간단하게!

DOM 트리는 가벼워야 계산이 빠르다. 불필요한 div, wrap는 삭제해줘야 한다.

(2) 🧩 CSS 최적화

⭐방법 1⭐ Reflow, Repaint 고려

🌞 Reflow
렌더링 엔진에 의해서 브라우저가 그려질 때, Layout(reflow) 단계가 있다. 이 단계에서 브라우저는 화면 전체의 크기나 스크롤 위치 등의 요소를 고려한다.

따라서 화면의 너비, 높이, 위치 등에 영향을 주는 CSS 속성을 변경하는 경우, Layout 단계부터 다시 그려지게 된다. 이 단계를 Refolw라고 한다.

Reflow 발생 요소
position, width, height, margin, padding , display , top, left, right, bottom, box-sizing, border-color, text-align, border, border-width, font-family, float, font-size, font-weight, line-height, vertical-align ...

🌞 Repaint
Paint 단계는 Layout 단계를 통해 화면에 배치된 요소들에게 색을 입히는 단계이다. 레이아웃에 영향을 주지 않는 속성을 변경하면 Layout 단계를 스킵하고 Paint 단계부터 다시 수행하게 된다. 이 단계를 Repaint라고 한다.

따라서 Reflow가 일어나면 브라우저가 전체 픽셀을 다시 계산해야 하기 때문에 Repaint 속성을 사용하여 스타일을 작성하면 성능을 높일 수 있다.

Repaint 발생 요소
color, border-style, visibility, background, background-color, background-image, background-position , background-repeat, background-size, text-decoration, outline, outline-style, outline-color, outline-width, border-radius, box-shadow ...

⭐방법 2⭐ 불필요한 CSS 제거

불필요한 CSS는 크롬 lightHouse를 통해 확인할 수 있다.

⭐방법 3⭐ 간결한 CSS 작성

선택자를 간결하게 하자!
CSS가 복잡할수록 Layout을 그리는 데에 많은 시간이 소요된다.

<!-- ❌ 안 좋은 예-->
.parent .parent_child{
	...
}

<!-- ⭕ 좋은 예-->
.parent_child{
	...
}

(3) 🧩 애니메이션 최적화

애니메이션은 여러장의 이미지를 연속적으로 보여줘서 움직이는 것처럼 보이게 하는 것이다. 그렇다면 애니메이션의 성능이 떨어진다는 것은 뭘까? 바로 애니메이션이 부드럽게 다음장으로 이어지는 것이 아닌 뚝뚝 끊겨 보이는 '쟁크 현상'이 나타날 때 성능이 떨어진다는 의미이다.

그럼 애니메이션의 성능은 어떻게 개선하나용? 🤔

CSS 속성 중에는 GPU의 도움을 받을 수 있는 속성이 있는데, 그 중 대표적인 속성은 transform과 opacity가 있다. transform은 Reflow와 Repaint를 발생시키지 않기 때문에 렌더링 속도를 향상시킬 수 있다. (GPU는 컴퓨터 그래픽 처리 장치이다!)

(3) 🧩 JS 최적화

⭐방법 1⭐ 불필요한 기능, 단계 제거

반드시 있어야 할 코드가 아니라면 제거하고, 함수가 최종 결과를 얻기까지 필요한 단계가 아니라면 단순화해야 한다.

만약, 코드를 줄일 수 없다면 덜 실행할 수 있는지 확인한다. 예를들면 반복문에서 끝까지 값을 얻지 않아도 된다면, break를 통해 빠져나와야 한다.

⭐방법 2⭐ 변수 Polymorphism(다형성) 피하기

JS의 변수는 다형성을 갖는다. 반복해서 사용해야 하는 숫자가 아니라면 굳이 변수로 선언해서 쓰지 않는 것이 좋다.

const x=2, y=4;

mutifly(x,y);

// 1% 더 빠름
mutifly(2,4);

⭐방법 3⭐ Code Splitting

대부분의 리액트 파일은 Webpack 등을 사용해서 파일을 번들링하여 하나로 묶는다. 다만, 이 크기가 커지면 성능에 악영향을 끼치게 된다. 이때 Code Splitting을 사용한다. 번들 파일의 코드를 분할하여 모든 코드를 한 번에 불러오지 않고 사용자가 필요로 할 때에 필요한 코드만 불러오는 개념이다.

(+) Code Splitting은 SPA의 성능을 향상시키는 방법이다. SPA는 초기 실행 시 로딩 속도가 지연될 수 있다. 이때 Code Splitting을 사용하면 속도 개선과 SEO에 도움이 된다.

Code Splitting을 어떻게 쓰는지요? 🤔

1. dynamic import() 구문 사용

Code Splitting을 도입하는 가장 좋은 방법은 import() 문법을 사용하는 방법이다.

📌 Before- 정적 불러오기 (static import)

import { add } from './math';

console.log(add(16, 26));

📌 After- 동적 불러오기 (dynamic import)

import('./math').then((math)=> {
	console.log(add(16, 26));
}

dynamic import 구문은 함수를 호출하는 문법 형태이지만, import는 함수가 아니다 !! 또한 static import는 맨 상단에 위치해야 하지만, dynamic import는 코드의 위치에 상관 없이 사용이 가능하다.

2. React.lazy 사용
React에서 컴포넌트 파일을 정의하고 dynamic import를 사용하면 에러가 발생한다.
이런 상황에서 컴포넌트를 동적으로 불러오기 위해서 React.lazy를 사용한다.

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

React.laz는 import() 구문을 반환하는 콜백함수를 인자로 받는다. 동적 불러오기로 불러와지는 모듈은 1. ReactComponent를 포함하며 2. default export를 가진 모듈이어야 한다. 그리고 불러온 컴포넌트를 반환한다.

React.lazy로 불러온 컴포넌트는 단독으로 쓰일 수 없고, React.Suspense 컴포넌트로 하위에서 렌더링되어야 한다. 그리고 Suspense는 lazy 컴포넌트가 로드되는 동안 Loding ... 이라는 화면을 보여준다.(그래서 지연로딩이라 부르는 것 ...!! 😲) 이때 fallback prop는 필수이다 !!

Code Splitting은 어디에 쓰는지요? 🤔

React 공식문서의 코드 분할 항목에 의하면, Router 바로 아래에 Suspense를 위치시키고, Route로 보여줄 컴포넌트들을 React.lazy로 불러올 것을 권장하고 있다.

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route path="/about" component={About}/>
      </Switch>
    </Suspense>
  </Router>
);

권규리

기록장 📝

이전 포스트

📦 webpack은 무엇인가?

다음 포스트