분류 전체보기

렌더링 성능 최적화 - 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..

로딩 성능 최적화 - 코드 스플릿, 레이지 로딩

Code Split & Lazy Loading dynamic import나 react-lazy를 사용해서 chunk를 여러 개로 나눠 불필요한 코드, 중복 코드 없이 적절한 크기의 코드가 적절한 타이밍에 로드될 수 있도록 하는 것이다. 하나의 큰 JS파일을 다운로드 하는것 보다 여러개의 작은 chunk(해당 페이지에서 필요한 chunk들만)를 다운로드하는 것이 더 빠르기 때문에 코드 스플릿을 통해 초기 로딩 속도를 개선할 수 있다. 크게 2가지 패턴이 있다. 페이지 별로 (라우팅 단위) 모듈 별로 (컴포넌트 단위) 페이지별로 코드 스플릿 번들 파일 분석하기 코드스플릿을 하기에 앞서 webpack-bundle-analyzer를 활용해서 번들된 파일들의 크기를 확인한다. 보면 refractor라는 모듈이 c..

로딩 성능 최적화 - 이미지, 동영상

이미지 사이즈 최적화 이미지 크기 확인하기 이미지 크기를 적절하게 줄여서 로딩 성능을 향상시킨다. Lighthouse의 Opportunity의 Properly size images 항목을 보면 적절하지 않은 크기의 이미지들의 목록을 볼 수 있다. 이미지 요소의 src 링크에 커서를 올려보면 rendered size: 화면에 그려진 이미지의 크기와 Intrinsic size: 불러온 이미지의 크기를 확인할 수 있다. 예시를 보면 화면에 그려지는 이미지의 크기에 비해 불러오는 이미지의 크기가 너무 크다. 적절한 크기는 화면에 그려지는 이미지의 너비,높이 기준으로 2배정도 되는 크기이다. 이미지 크기를 줄여서 로딩 시간을 줄일 수 있다. 이미지 크기 줄이기 그렇다면 이미지는 어떻게 줄일까? image proc..

웹 성능 최적화 - 기초, 분석 툴

인프런 '실전 웹 성능 최적화' 강의를 듣고 정리해 봤다. 해야하는 이유 사용자가 떠나지 않도록 FE 개발자로서 경쟁력 웹 성능 결정 요소 로딩 성능 (리소스 불러오기) 렌더링 성능 (리소스 화면에 그리기) 흐름 분석 -> 최적화 -> 결과 확인 분석 툴 성능 측정시에는 local이 아닌 production빌드 기준으로 검사한 것을 기준으로 해야한다. 크롬 Network 탭 어떤 리소스를 다운로드 요청했는지, 걸린 시간, 응답등을 확인할 수 있다. 크롬 Performance 탭 페이지가 로드되면서 실행되는 작업들을 타임라인과 차트 형태로 보여줌 history 보기 : 상단 드롭다운을 활용해 이전 검사 내역도 볼 수 있다. system 관련한 작업 안 보기 : 내 코드와 관련 없는 시스템 관..