lighthouse5 [ 개선 ] Lighthouse 경고 하나씩 없애보기 3: Layout Shift Culprits 해결하기 Lighthouse에서 다음 경고가 나왔다. Layout shift culprits이 경고는 CLS, 즉 Cumulative Layout Shift와 관련된 항목이다.Lighthouse 설명은 대략 이렇다.Layout shifts occur when elements move absent any user interaction.사용자가 아무 동작도 하지 않았는데 페이지 요소가 움직이면 layout shift가 발생한다. 그리고 이런 이동이 누적되면 CLS 점수가 나빠진다.이번 케이스에서는 Lighthouse가 특정 `div`를 layout shift culprit로 잡았다. 스크린샷을 보면 보고서 목록 페이지의 본문 영역이 로딩 중 아래로 밀린 것으로 보였다. CLS가 왜 문제일까?CLS는 사용자가 페이.. 2026. 5. 25. [ 개선 ] Lighthouse 경고 하나씩 없애보기 2: Duplicated JavaScript 줄이기 Lighthouse에서 로고 이미지 관련 경고를 해결한 뒤, 다음으로 마주한 경고는 JavaScript 관련 항목이었다.Duplicated JavaScriptEst savings of 118 KiB처음에는 “공통 코드가 여러 번 번들에 들어간 건가?”라고 생각했다. 하지만 확인해 보니 실제 문제는 조금 달랐다.이번 글은 `Duplicated JavaScript` 경고를 확인하고, 라우트 단위 lazy loading으로 초기 번들을 줄여 Lighthouse 경고를 제거한 과정이다. 1. Lighthouse 경고Lighthouse는 다음과 같은 메시지를 보여줬다.Duplicated JavaScriptRemove large, duplicate JavaScript modules from bundles대략 이런.. 2026. 5. 24. [ 개선 ] Lighthouse 경고 하나씩 없애보기 1: LCP Request Discovery -이미지 최적화하기 Lighthouse를 돌렸을 때 처음 마주한 문제는 Performance 점수였다. 특히 첫 화면 상단에 있는 로고 이미지가 LCP 관련 경고에 계속 잡히고 있었다.이번 글은 로고 하나를 최적화하면서 Lighthouse 경고가 어떻게 바뀌었고, 어떤 순서로 해결했는지 정리한 기록이다. 첫 번째 경고: LCP Request Discovery처음 Lighthouse에서 나온 경고는 다음과 같았다.LCP request discovery세부 항목은 이런 내용이었다.fetchpriority=high should be appliedRequest is discoverable in initial documentlazy load not applied즉, Lighthouse는 이렇게 말하고 있었다.> LCP로 잡힌 이미.. 2026. 5. 23. [ 개선 ] Lighthouse 경고 하나씩 없애보기 0: 성능 점수 49점에서 시작하기 프로젝트를 어느 정도 만들고 나면 한 번쯤 Lighthouse를 돌려보게 된다.그리고 생각보다 냉정한 숫자를 마주한다.이번 프로젝트의 Lighthouse 결과는 다음과 같았다.- Performance: 49- Accessibility: 95- Best Practices: 77- SEO: 75접근성 점수는 나쁘지 않았지만, Performance 점수가 49점이었다. 특히 주요 지표를 보면 성능 문제가 꽤 명확했다.- First Contentful Paint: 12.5s- Largest Contentful Paint: 24.9s- Speed Index: 12.8s- Total Blocking Time: 80ms- Cumulative Layout Shift: 0.134여기서 눈에 띄는 건 `Total Bloc.. 2026. 5. 22. [ React ] 웹사이트 성능을 점검하는 필수 도구 Lighthouse 웹 페이지를 만들고 나면, "이 사이트 잘 만들 걸까?, "사용자들이 사용하는데 느리진 않은가?"라는 의문들이 들 수 있다.이때 Lighthouse를 통해 성능 체크가 가능하다. Lighthouse란?Lighthouse는 웹 애플리케이션의 성능, 접근성, SEO, PWA(Progressive Web App)등을 자동으로 분석해 주는 Google에서 제공하는 성능 진단 도구이다. Lighthouse를 사용하는 이유?웹페이지의 아래와 같은 항목들을 자동으로 분석해 점수와 개선 방법을 알려준다:Performance (성능)Accessibility (접근성)Best Practices (웹 표준)SEO (검색엔진 최적화)PWA (Progressive Web App 지원 여부)Lighthouse는 웹사이트의 품.. 2025. 4. 24. 이전 1 다음 728x90
