min

1. 문제상황 : 내가 만들고 있는 프로젝트에서 lighthouse를 통해서 성능 평가를 진행했는데 이때 성능 평가에서. 사용하지 않는 자바스크립트라는 항목이 나옴. 실제로 자바스크립트 전송크기가 918.3KIB라는 수치가 나옴 2. 가설 (H1) : 네트워크 탭에서 자세한 정보를 확인해보니 메인 페이지로 들어왔을 때 해당 메인 페이지와 관련이 없는 Detail , Write페이지가 렌더링되고 있음을 확인 . 따라서 지연로딩을 시켜야 겠다는 생각을 함. 3. 해결(S1) : 라우터에서 지연 로딩을 구현함. 구현한 코드는 다음과 같음 import { BrowserRouter, Routes, Route } from "react-router-dom"; import { Suspense, lazy } from "..

1. 문제상황 : 내가 만들고 있는 프로젝트에서 lighthouse를 통해서 성능 평가를 진행했는데 이때 성능 평가에서 렌더링 차단 리소스 제거하기라는 항목이 나옴. 이 항목을 분석해보니 렌더링 이전에 CSS와 JS를 동기적으로 다운로드 받기 때문임. 2. 가설 1 (H1) : 내 프로젝트에서는 구글 폰트를 사용하는 데 이 구글 폰트 서비스가 CDN 서비스라서 외부로 부터 CSS , JS파일을 동기적으로 다운로드 받아야 함. 이 과정에서 렌더링 차단이 발생하는 것으로 보임 3. 해결 (S1) : 구글 폰트를 미리 prefetch 받기 위해서 다음과 같은 항목을 추가함 여기서 프리로드를 통해서 브라우저가 폰트를 로드하기 전에 폰트 리소스를 사전에 가져오도록 지시함. 이를 통해서 가능한 절감 효과인 370m..