4. 성능 측정, 최적화

성능 측정

크롬의 lighthouse를 활용해서 성능 측정을 했다. 매우 성능이 안 좋게 나왔다.

Opportuity 탭을 살펴보니 js파일이 너무 커서 로딩이 오래 걸리는 것을 알 수 있었다.

webpack-bundle-analyzer를 통해 번들 크기를 보니 번들이 1개이고 용량이 매우 컸다.

1. 로딩 성능 최적화 - 코드 스플릿

엑셀 에디터는 페이지가 1개이기 때문에 페이지 별로는 코드 스플릿을 할 수 없다.

따라서 컴포넌트별로 코드 스플릿을 했다.

// 기존
import { Header } from '@/layout'

// 변경
const Header = lazy(() =>
  import('@/layout').then(({ Header }) => ({
    default: Header,
  }))
)

dynamic import 와 리액트의 lazy를 활용해서 기존 import 문들을 변경했다. 변경 후 다시 측정해봤을 때

chunk들이 잘 나눠져있고, lighthouse의 Performance 점수도 20점 가까이 개선된 것을 확인했다

2. 로딩 성능 최적화 - 텍스트 압축

브라우저에서 받는 리소스들을 gzip 이나 br로 압축해서 보내주면, 네트워크 요청/응답의 비용을 줄이고 로딩 속도를 빠르게 할 수 있다. 하지만, 브라우저에서 압축 해제하는 과정이 들어가므로 화면에 그려지는 것은 오히려 느려질 수 있으니 텍스트 압축을 할지 말지는 신중하게 결정해야 한다.

이번에는 한 번 적용하고 차이점을 보기 위해서 텍스트 압축을 적용해 봤다.

먼저 compression-webpack-plugin을 활용해 빌드 시에 리소스들을 gzip파일로 압축했다. 너무 용량이 작거나 압축율이 적을 경우 압축으로 얻을 이점이 거의 없기 때문에 10KB 이상, 압축률 80% 이상인 경우에만 압축을 적용했다.

// webpack.config.prod.js
plugins: [
	// 생략
    new CompressionPlugin({
      // deleteOriginalAssets: true,
      algorithm: 'gzip',
      test: /\.(js|css|html)$/,
      threshold: 10240, // 압축을 적용할 파일 크기의 최소값 (10KB)
      minRatio: 0.8, // 압축률이 80% 이상일 경우에만 압축을 적용
    }),
]

그 다음 express로 빌드된 리소스들을 전달하는 간단한 노드 서버를 만들었다.

// server.js
const express = require("express")
const expressStaticGzip = require("express-static-gzip")
const path = require("path")
const app = express()

const http = require("http").createServer(app)

http.listen(8080, () => {
  console.log("static server start")
})

app.use(express.json())
const cors = require("cors")
app.use(cors())
app.use(
  expressStaticGzip(path.join(__dirname, "/dist"), {
    enableBrotli: true,
    orderPreference: ["br", "gz"],
  })
)

app.get("/", (res, req) => {
  req.sendFile(path.join(__dirname, "/dist/index.html"))
})

이렇게하고 8080포트로 접속한 후에 lighthouse로 검사를 해봤다.

LCP가 9.7s -> 2.8s , Performance가 64 -> 83으로 많이 개선되었다. 압축시에 로딩 성능을 많이 개선할 수 있음을 확인했다.

정리

• 코드 스플릿과 리소스 압축을 통해 로딩 성능을 많이 개선할 수 있었다.
• 엑셀 편집기 특성상 엑셀 편집 작업을 하는 동안의 성능(특히 렌더링 관련)을 크롬 performance 탭을 활용해 검사한 후 최적화하는 것이 사용자 경험 향상에는 훨씬 큰 도움이 될 것 같다. 추후에 진행할 예정이다.
• lighthouse의 performance 점수가 높다고 무조건 좋은 것은 아니지만, 사용자가 처음 사이트에 접속해서 화면을 보기까지의 경험에 대해서는 잘 반영이 되어 있는 것 같다.