웹 성능 최적화

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

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 관련한 작업 안 보기 : 내 코드와 관련 없는 시스템 관..