성능최적화 [최적화] 핵심적인 웹 지표(LCP,FID,CLS) 개선하기 먼저 LCP 수치는 를 통해 확인할 수 있다. ✔️ 사용하지 않는 css 제거 웹팩 등 모듈 번들러나 빌드 도구를 사용해 css와 js 파일을 번들링해서(하나의 파일들로 묶어서) 리소스 요청을 줄일 수 있다. 이러한 경우 첫 번째 게시글의 상세페이지 또는 2페이지를 prefetch 적용할 수 있다. 📎 이미지 최적화 picture 태그의 type 속성을 통해 사용자 환경에 맞는 타입의 이미지... 웹성능CSSFID성능최적화최적화LCPCLShtmlCLS [성능최적화] Code Splitting 최적화하기 모든페이지에서 여러가지 라이브러리가 전부 필요하지 않다. 라이브러리는 많은 데이터를 쓰게되고, 렌더링시간이 더 오래걸리기 때문에 페이지별로 라이브러리를 나눠서 사용해주는것이 최적화에 용이하다. 페이지를 로드하다보면 왜 ?뭐 때문에? 로딩이 오래걸리는지 의문이 들때가 많다. 이런경우 cra-bundle-analyzer 를 설치해 어떤 부분의 라이브러리 / 모듈 이 페이지의 시간을 잡아먹는지 찾... 프론트엔드성능최적화cra-bundle-analyzercode splitting웹성능code splitting
[최적화] 핵심적인 웹 지표(LCP,FID,CLS) 개선하기 먼저 LCP 수치는 를 통해 확인할 수 있다. ✔️ 사용하지 않는 css 제거 웹팩 등 모듈 번들러나 빌드 도구를 사용해 css와 js 파일을 번들링해서(하나의 파일들로 묶어서) 리소스 요청을 줄일 수 있다. 이러한 경우 첫 번째 게시글의 상세페이지 또는 2페이지를 prefetch 적용할 수 있다. 📎 이미지 최적화 picture 태그의 type 속성을 통해 사용자 환경에 맞는 타입의 이미지... 웹성능CSSFID성능최적화최적화LCPCLShtmlCLS [성능최적화] Code Splitting 최적화하기 모든페이지에서 여러가지 라이브러리가 전부 필요하지 않다. 라이브러리는 많은 데이터를 쓰게되고, 렌더링시간이 더 오래걸리기 때문에 페이지별로 라이브러리를 나눠서 사용해주는것이 최적화에 용이하다. 페이지를 로드하다보면 왜 ?뭐 때문에? 로딩이 오래걸리는지 의문이 들때가 많다. 이런경우 cra-bundle-analyzer 를 설치해 어떤 부분의 라이브러리 / 모듈 이 페이지의 시간을 잡아먹는지 찾... 프론트엔드성능최적화cra-bundle-analyzercode splitting웹성능code splitting