웹 성능 최적화(1)

Light House (before)

<OPPORTUNITIES> : Loading

Properly size images : 이미지를 적절한 사이즈로 압축하여 로드 타임 최적화

ㄴ 실제 사용되는 너비보다 2배 큰 사이즈로 width, height를 지정하는 것이 적절함

     ex) 사진이 차지하는 픽셀이 120x120이라면 240으로 지정

how to solve?

CDN(Contents Delivery Network) : 소비자와 가까운 곳에 컨텐츠 서버를 두는 기술

 Image CDN(image processing CDN) : CDN + 이미지를 가공해서(처리 과정을 거침) 사용자에게 전해줌

 

> imgIX라는 이미지 CDN 서비스를 사용할 수 있음

> unsplash같은 사이트에서 사진을 가져올 경우 파라미터 width, height 조절

 

Opportunity에서 이미지에 대한 성능 저하가 사라진 모습을 볼 수 있다

 

Minify Javscript : js 공백, 주석을 제거하여 js 파일 크기를 줄여라

---

bottleneck 코드 최적화

Performance의 Network, Main, Timing 탭을 이용하여 어떤 코드에 문제가 있는지 찾을 수 있음.

Article 컴포넌트가 다른 것에 비해 오랜시간동안 실행되고 있음

minor gc : garbage collector 작업

 

최적화 후 0.13ms로 줄어듬

85 > 92로 크게 향상된 모습

code Splitting 적용 : lazy, suspense

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

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

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

export default App;

텍스트 압축

파일 크기가 2KB 이상일 경우 인코딩해서 전달하는 게 좋고 그 이하는 인코딩을 하지 않는게 낫다.

---

Performance Tab을 제대로 활용하지 못했는데 강의를 통해서 Performance Tab 분석하는 방법을 익힐 수 있었음

 

참고 ) 인프런 - 프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat.React) - Part.1