프론트엔드 최적화 시도 - 1

시작하기에 앞서  👉 < 프론트엔드 성능 최적화를 시작하기 전에 > 를 읽고 시작하면 좋다.

 

Part. Opportunity

이번에 최적화를 시도해볼 부분은 바로 Reduce unused JavaScript이다.

lighthouse

사용하지 않는 JS를 줄이라고 한다. 사진 아래 내용을 확인해보면, 이 제안들은 page load을 빠르게 하는데에 도움을 줄 수 있지만 성능 점수에 직접적인 영향을 주지는 않는다고 한다. 일단 개선이 필요한 부분이기에 시도해보자.

✅ 1. Reduce unused JavaScript

Chrome DevTools의 Coverage 탭은 사용하지 않는 JavaScript 및 CSS 코드를 찾는 데 도움이 될 수 있다. Usage visualization(사용시각화) 탭의 빨간색 부분이 사용하지않는 js코드이다. 참고로 알다우면 좋을 것 같다.

 

🟢 React-Icons

React-Icons가 상당히 많은 용량을 차지하고 있었다. React-Icons를 다른 것으로 대체하기 보다 React-Icons에서 제안하는 방식으로 최적화할 수 있었다. 대신 설치가 오래 걸린다는 단점이 있다.

 

설치

yarn add @react-icons/all-files
# 
npm install @react-icons/all-files --save

사용

import { FaBeer } from "@react-icons/all-files/fa/FaBeer";
class Question extends React.Component {
  render() {
    return <h3> Lets go for a <FaBeer />? </h3>
  }
}

기존

 

대체

성능이 20% 가량 상당히 개선된 것을 알 수 있다. 

 

🟢 Code Splitting

대부분의 React 앱은 번들러(Webpack, Rollup)를 사용하여 파일을 번들링 한다. 이렇게 하면 앱이 성장함에 따라 번들 파일이 커지게 되고 앱을 로드하는 데에 많은 시간이 소요된다. 이러한 문제점을 분할(Code Splitting)을 통해 사용자가 현재 필요로 하는 항목만 "지연 로드"하여 앱의 성능을 크게 향상시킬 수 있다. 앱 전체 코드 양이 줄지는 않았지만 사용자에게 전혀 필요하지 않을 수 있는 코드를 로드하지 않게 하고 초기 로드 중에 필요한 코드의 양을 줄일 수 있다.

 

✅ 2. 이미지 최적화

 

👉 이미지 최적화에 대한 명확한 가이드를 보면서 최적화를 시도해보자.

 

2-1. 기존 png, jpg인 파일 형식을 최신 포맷인 webp로 변경

확실히 성능이 향상되었다.

2-2 Lazy loading과 async decoding으로 성능 향상