프론트엔드/성능 최적화

렌더링 성능 최적화 - Redux

Redux의 useSelector 렌더링 문제 해결 문제점 Redux의 useSelector로 특정 데이터를 구독하는 컴포넌트는, 리덕스 스토어에서 특정 데이터(구독하지 않은 것일 수도 있음)가 변경되는 경우 알림을 받는다. 새로운 상태와 현 상태를 비교해 값이 다르면 리렌더링한다. 보통 useSelector(state => ({a: state.a, b: state.b})) 이 selector에 전달한 콜백의 리턴 값을 기준으로 비교한다. 위의 예시는 매번 새로운 객체가 생성되기 때문에 값이 다른 것으로 판단하고 리렌더링한다. (구독하는 데이터가 변경되지 않았음에도 불필요한 리렌더링) 해결 Object를 새로 만들지 않도록 State 쪼개기 // 변경 전 const { modalVisible, bgCol..

렌더링 성능 최적화 - Layout Shift 피하기

Layout Shift 피하기 Layout Shift: 화면 레이아웃이 계속 변경되는 것 -> 리플로우 발생, 사용성에 많이 안 좋은 영향 (ex: 원래 클릭하려던 애가 밀리면서 다른 애 클릭) 원인 사이즈가 정해져 있지 않은 이미지 사이즈가 정해져 있지 않은 광고 동적으로 삽입된 콘텐츠 Web font (FOIT, FOUT) 해결 이미지, 광고의 사이즈를 예측해서 width, height을 준다 동적으로 삽입될 콘텐츠의 크기를 예측하고 다른 화면요소들이 밀리지 않게 설계한다. 폰트 최적화 이미지 사이즈 비율 맞추기 이미지의 width, height을 고정된 값으로 주면 Layout Shift는 발생하지 않지만 이미지의 비율이 깨지게 된다. (반응형으로 이미지 크기가 변하는 경우) 이런 경우 Wrappe..

렌더링 성능 최적화 - 애니메이션

애니메이션 최적화 (Reflow, Repaint) 쟁크 현상 브라우저는 보통 초당 60프레임으로 렌더링 초당 프레임이 떨어지면 ex) 30,20 -> 쟁크(애니메이션 버벅이는 현상) 발생 브라우저 렌더링 과정 1) DOM + CSSOM Render Tree Layout Paint - 3,4를 통해 여러개의 레이어가 만들어짐 Composite - 각 레이어 합성 1초에 60프레임이기 때문에 약 16.7ms에 한 프레임을 그려내야 함. 재렌더링이 해당 시간안에 완료되지 않으면, 특정 프레임 누락 -> 이전 프레임 보여줌 리플로우 width, height 변경시 레이아웃을 다시 하며 렌더링 과정 실행 리페인트 color 등 변경시 레이아웃 제외하고 렌더링 과정 실행 리플로우, 리페인트 피하기 GPU 도움받기 ..

렌더링 성능 최적화 - Bottleneck code

Bottleneck 코드 최적화 1 - 작업양 줄이기 Bottleneck 코드 찾기 크롬 Performance를 활용해서 페이지가 렌더링될 때 각 컴포넌트 등의 실행시간을 체크해볼 수 있다. 이를 활용해 실행이 오래 걸리는 함수, 컴포넌트 등 Bottleneck 코드를 찾을 수 있다. 여기서 보면, Article 컴포넌트 mount 작업이 오래걸리는데, 아래에서 상세한 수행내역을 보면 removeSpecialCharacter 함수가 실행시간을 다 차지하고 있는 것을 확인할 수 있다. 이런식으로 Bottleneck코드를 찾을 수 있다. Bottleneck 코드 분석 /* * 파라미터로 넘어온 문자열에서 일부 특수문자를 제거하는 함수 * (Markdown으로 된 문자열의 특수문자를 제거하기 위함) * */ ..

로딩 성능 최적화 - 텍스트 압축, 불필요한 CSS 제거

텍스트 압축 개요 서버에서 보내는 리소스들(CSS, JS, HTML)의 텍스트를 압축해서 보내고 받고 압축을 해제한다. 크기가 작기 때문에 더 빨리 다운로드할 수 있다. -> 로딩 속도를 개선할 수 있다. lighthouse의 opportunities에서 확인할 수 있다. 종류 텍스트 압축에는 크게 2가지가 있다. GZIP Deflate GZIP이 Defalte보다 더 좋은 압축율을 제공한다. 적용 번들은 기본적으로 압축이 안된 상태로 전달이 된다. 이를 compression-webpack-plugin을 활용해 빌드 시 압축하거나, 서버 코드에서 텍스트 압축을 적용한 후 전달하도록 하면 된다. 압축 시 모든 파일을 압축하는 것이 아닌 크기가 특정 크기 이상(ex: 10KB)인 파일들만 압축을 해서 전달한..

로딩 성능 최적화 - 캐시

캐시 최적화 캐시 활용 위해서 Cache-Control 설정 필요 -> 빌드된 파일을 서비스하는 서버에서 설정 no-cache: 캐시를 사용하기 전에 서버에 검사 후, 사용 결정 no-store: 캐시 사용 안 함 public: 모든 환경에서 캐시 사용 가능 private: 브라우저 환경에서만 캐시 사용, 외부 캐시 서버에서는 사용 불가 max-age: 캐시의 유효시간 , max-age = 0 해도 캐시 된 리소스를 버리지 않고 가지고 있는다. 추후 요청시 수정 여부 확인 후 활용 사용 예시 cache-control: private, max-age=60 Express를 활용한 간단한 구현 예시 1) 캐시를 전혀 사용하지 않을 때 no-store만 주지 않은 이유는 브라우저 중 no-store으로만 캐시 ..

로딩 성능 최적화 - 폰트

폰트 최적화 초기 페이지 로딩 시 폰트 다운로드 하는 시간 때문에 폰트가 깜빡이는 현상이 나타난다. (폰트 다운로드 후 폰트가 글자에 입혀짐) 웹 폰트의 문제점 FOUT(Flash of Unstyled Text) - 폰트 다운로드 전 기본 폰트로 텍스트가 보여짐, 다운로드 후 폰트 적용된 텍스트 보여줌 / IE, Edge FOIT(Flash of Invisible Text) - 폰트 다운로드 전 텍스트 노출하지 않음, 다운로드 후 폰트 적용된 텍스트 보여줌 / Chrome, Safari 웹 폰트의 최적화 방법 1) 폰트 적용 시점 컨트롤 - FOUT or FOIT or 혼합, 새 방식 등 css의 속성 font-display 사용 auto - 브라우저 기본 동작 block - FOIT(timeout = ..

로딩 성능 최적화 - 프리 로딩

컴포넌트 Preloading Lazy Loading의 단점 예를 들어 이미지 모달을 레이지 로딩하도록 변경하면, 모달 보기 버튼 클릭시에 모달 관련 코드를 불러온다. 따라서 불러오는데 시간이 좀 걸리게 된다. 이 클릭 전에 미리 알고 로드해놓으면 사용자 입장에서 끊김 없이 느껴질 것이다. (레이지 로딩의 단점을 개선) 컴포넌트 Preload 타이밍 버튼 위에 마우스를 올려놨을 때 최초 페이지 로드 후 모든 컴포넌트 마운트 끝났을 때 최적화하기 1. 버튼 위에 마우스를 올려놨을 때 const handleMouseEnter = () => { const component = import('./components/ImageModal') } { setShowModal(true) }} onMouseEnter={ha..