Lighthouse3 React LCP 성능 개선하기 React 이미지 최적화를 통한 성능 개선하기지난번 Lighthouse 분석 결과 LCP와 Speed Index가 높은 문제가 발생했다.LCP(Largest Contentful Paint)는 페이지의 가장 큰 콘텐츠 요소가 화면에 표시되는 시간을 측정하는 지표로 이 값이 높으면 페이지의in-my-universe23.tistory.com 이전 글에서 이미지 최적화를 통한 성능 개선을 시도했지만 결과적으로 LCP시간이 증가하게 되었다. 그래서 이번에는 배경 이미지가 로딩되기 전에 기본 배경으로 하고 로딩되는 동안 다른 tweet 화면은 보여주도록 하는 코드를 수정해 보았다. const [isImageLoaded, setIsImageLoaded] = useState(false); useEffect(() =.. 2024. 4. 26. React 이미지 최적화를 통한 성능 개선하기 지난번 Lighthouse 분석 결과 LCP와 Speed Index가 높은 문제가 발생했다.LCP(Largest Contentful Paint)는 페이지의 가장 큰 콘텐츠 요소가 화면에 표시되는 시간을 측정하는 지표로 이 값이 높으면 페이지의 주요 콘텐츠가 늦게 나타나는 것을 의미한다. Speed Index는 페이지의 시각적인 로딩 속도를 측정하는 지표로, 값이 높을수록 페이지가 느리게 로드된다. 즉 이 문제들은 웹페이지가 느리게 로드되고 사용자 경험이 저하되는 주요 원인 중에 하나이므로 이를 해결하기 위해 여러가지를 시도해보았다. 일단 LCP 콘텐츠가 포함된 최대 페인트 요소를 보니 페이지의 배경화면을 불러올때 많은 시간이 소요되는 것을 확인했다. main페이지에서 배경화면을 지우고 로딩했을때 성능이.. 2024. 4. 26. 내 웹사이트의 성능을 개선해보자! Lighthouse란? 트위터 프로젝트를 시작한지 약 2년이 지나가고.... 이제는 어느정도 원하는 기능은 구글링을 통해 다 구현할 수 있는데 이에 넘어서 내 프로젝트를 좀더 발전시키고 싶었다. 기능 구현에 치중되어있던 지난 개발 공부에 넘어서서 이제는 코드를 좀 더 깔끔하게 고치고 효율적인 코드 사용과 내 웹사이트의 성능을 개선하고 싶었다. 그래서 처음으로 공부하게 된 것이 lighthouse이다. 라이트하우스(Lighthouse)란? 구글에서 개발한 웹페이지의 품질을 개선할 수 있는 오픈 소스 형태의 도구이다. 라이트하우스는 웹 페이지의 여러 측면을 평가하고 테스트하여 개선할 수 있는 지표를 제공한다. 모드 사용할 수 있는 모드는 총 3가지가 존재한다. - 탐색 : 기본값으로 초기 페이지 로딩시 발생하는 성능 문제를 분석한.. 2024. 4. 5. 이전 1 다음
