웹 성능 최적화 1

✅ 로딩 성능 최적화

1. 이미지 사이즈 최적화

• 불필요하게 큰 이미지는 로딩 속도를 저하시키므로, 적절한 크기로 조정 필요

http://cdn.image.com?src=[img src]&width=200&height=100 와 같은 Image CDN 사용

2. Code Splitting

• 불필요한 코드 또는 중복되는 코드가 없이 적절한 사이즈의 코드가 적절한 타이밍에 로드될 수 있도록 함
• React의 React.lazy와 Suspense를 사용하여 코드 스플리팅 가능

import React, { Suspense, lazy } from "react";
import { Switch, Route } from "react-router-dom";
import "./App.css";

const ListPage = lazy(() => import("./pages/ListPage/index"));
const ViewPage = lazy(() => import("./pages/ViewPage/index"));

function App() {
  return (
    <div className="App">
      <Suspense fallback={<div>로딩중.. </div>}>
        <Switch>
          <Route path="/" component={ListPage} exact />
          <Route path="/view/:id" component={ViewPage} exact />
        </Switch>
      </Suspense>
    </div>
  );
}

export default App;

3. 텍스트 압축

• GZIP, Deflate와 같은 압축 방법을 사용하여 텍스트 파일 크기를 줄임
• 서버 설정을 통해 압축 적용 가능

✅ 렌더링 성능 최적화

1. Bottleneck 코드 최적화

• 특수 문자를 효율적으로 제거하기
  • replace 함수와 정규식 사용
  • 마크다운의 특수문자를 지워주는 라이브러리 사용
  • remove-markdown
• 작업하는 양 줄이기
  • 불필요한 계산이나 렌더링 줄이기
  • React의 메모이제이션 기법 활용
  • useMemo, useCallback

function removeSpecialCharacter(str) {
  const removeCharacters = [
    "#",
    "_",
    "*",
    "~",
    "&",
    ";",
    "!",
    "[",
    "]",
    "`",
    ">",
    "\n",
    "=",
    "-",
  ];
  let _str = str;
  let i = 0,
    j = 0;

  for (i = 0; i < removeCharacters.length; i++) {
    j = 0;
    while (j < _str.length) {
      if (_str[j] === removeCharacters[i]) {
        _str = _str.substring(0, j).concat(_str.substring(j + 1));
        continue;
      }
      j++;
    }
  }

  return _str;
}

🔽🔽🔽

function removeSpecialCharacter(str) {
  let _str = str.substring(0, 300);
  _str = _str.replace(/[\#\_\*\~\&\;\!\[\]\`\>\n\=\-]/g, "");

  return _str;
}

✅ 분석 툴

1. 크롬 Network 탭

• 네트워크 요청 및 응답 분석

2. 크롬 Performance 탭

• 성능 프로파일링 및 분석

3. 크롬 Audit 탭 (Light house)

• 웹 페이지의 성능, 접근성, SEO 등 종합적인 평가

4. webpack-bundle-analyzer

• 번들 파일의 구조와 크기를 시각적으로 분석하여 최적화 포인트 파악

✅ 정리

• Audits 툴을 이용한 페이지 감사
• 이미지 사이즈 최적화
• Bottleneck 코드 최적화
• Code Splitting
• 텍스트 압축