lighthouse
안녕하세요 YB최민준입니다.
제가 이번에 공유과제로 lighthouse를 담당하게 되었는데
같이 알아보러 가보실까여?!
성능 최적화는 왜 필요할까?
프론트엔드라고 개발하는 사람들은 대부분 대표적인 프레임워크를 사용할 것입니다.
앵귤러(AngularJS)-2010년
리액트(ReactJS) - 2013년
뷰(VueJS) - 2016년
이와 같은 프레임워크들의 등장이후 프론트엔드 분야는 가파른 성장세를 이어나갔고, 지금도 다양한 프레임워크와 기술이 등장하고 있습니다.
최근에는 이렇게 많은 프레임워크와 기술들이 나오기 시작하자, 이제 화두는 새로운 것이 아닌 성능 최적화라는 주제에 관심을 가지기 시작했습니다.
참고 ) KEYWORLD
탐색(Navigation) : Lighthouse의 기본 값, 초기 페이지 로딩 시 발생하는 성능 문제를 분석합니다.
기간(Timespan) : 사용자가 정의한 시간 동안 발생한 성능 문제를 분석합니다.
스냅샷(Snapshot) : 현재 상태의 성능 문제를 분석합니다.
Lighthouse
Lighthouse는 구글에서 개발한 오픈소스로서 웹 페이지의 품질을 개선할 수 있는 자동화 툴입니다. Lighthouse는 성능, 접근성, PWA, SEO 등을 검사하며 이를 이용해 사용자는 어떤 웹페이지든 품질 검사를 할 수 있습니다.
Lighthouse 시작하기
크롬에서 검사하고 싶은 페이지의 url을 입력합니다.
개발자 도구를 엽니다.
lighthouse 탭을 클릭합니다.
Analyze page load를 클릭합니다. Categories에서 특정한 지표만 선택하여 검사할 수도 있습니다.
대략 30 ~ 60초간 검사가 실행됩니다.
그 후 리포트가 해당 페이지의 개발자 도구내에 생성됩니다.
Lighthouse 분석 결과 항목
Performance
Performance 항목은 웹 성능을 측정합니다. 화면에 콘텐츠가 표시되는데 걸리는 시간, 표시된 후 사용자와 상호작용까지 걸리는 시간, 화면에 불안정한 요소가 없는지 확인합니다.
Accessibility
Accessibility 항목은 웹 페이지가 웹 접근성을 잘 갖추고 있는지 확인합니다. 대체 텍스트를 잘 작성했는지, 배경색과 콘텐츠 색상의 대비가 충분한지, 적절한 WAI-ARIA 속성을 사용했는지 등을 확인합니다.
Best Practices
Best Practices 항목은 웹 페이지가 웹 표준 모범 사례를 잘 따르고 있는지 확인합니다. HTTPS 프로토콜을 사용하는지, 사용자가 확인할 확률은 높지 않지만 콘솔 창에 오류가 표시되지는 않는지 등을 확인합니다.
SEO
SEO 항목은 웹 페이지가 검색 엔진 최적화가 잘 되어있는지 확인합니다. 애플리케이션의 robots.txt가 유효한지, meta요소는 잘 작성되어 있는지 등을 확인합니다.
PWA(Progressive Web App)
PWA 항목은 해당 웹 사이트가 모바일 애플리케이션으로서 잘 작동하는지 확인합니다. 앱 아이콘을 제공하는지, 스플래시 화면이 있는지 등을 점수가 아닌 체크리스트로 확인합니다.
LCP, FID, CLS, FP
LCP (Largest Contentful Paint) : 사용자가 페이지를 방문하고 나서 가장 큰 콘텐츠(이미지나 텍스트 블록 등)가 화면에 표시되기까지 걸린 시간을 측정합니다.
LCP는 페이지 로딩 성능을 평가하는 데 사용되며, 2.5초 이내에 완료되는 것이 이상적입니다.
따라서 LCP는 웹 페이지의 주요 컨텐츠가 모두 표시되어 사용자가 인식할 수 있기까지의 시간을 의미!! 이때 주요 콘텐츠로 판단하는 것으로는 img, svg, video, 텍스트 노드가 있다.
<=2.5 good <=4s Need Improvement, >4s Poor(red)
FID (First Input Delay): 사용자가 페이지에서 어떤 상호작용(예: 클릭, 탭)을 시도했을 때부터 브라우저가 해당 상호작용에 응답하기까지의 시간을 측정합니다.
FID는 사이트의 상호작용성과 응답성을 평가하는 데 사용되며, 100밀리초 이내가 이상적입니다.
따라서 FID는 사용자가 상호 작용을 처음으로 시작하고 브라우저가 응갑하여 실제로 이벤트 핸들러를 처리하기까지 걸리는 시간을 의미합니다.
페이지 응답 성능을 측정하는 영역, 최초 입력으로 평가 되는 것으로는 클릭, 입력이 있습니다.
<=100ms good, <=300ms yellow, >300ms Poor
CLS (Cumulative Layout Shift): 페이지 로드 중에 발생하는 모든 예상치 못한 레이아웃 이동의 정도를 측정합니다.
CLS는 페이지의 시각적 안정성을 평가하는 데 사용되며, 0.1 이하가 이상적입니다.
<=0.1 Good, <=0.25 Need Improvement, >0.25 Poor
FP (First Paint): 사용자가 페이지를 방문하고 나서 브라우저가 화면에 첫 번째 픽셀을 그리기 시작할 때까지 걸린 시간을 측정합니다.
FP는 페이지가 로딩을 시작하는 속도를 나타내며, 사용자가 사이트가 로딩되고 있다는 첫 인상을 받는 순간과 관련이 있습니다.
즉, 페이지에 필요한 기본 리소스를 불러오는데 문제가 있는지 판단할 수 있는 항목!!
<=1s Good, <=3s Need Improvement, >3s Poor(red)
여태까지 Lighthouse에 대해 잘 살펴보았는데여^^
코드를 짜는 것도 중요하지만 이렇게 성능분석을 통해 성능을 올림으로써 유저들에게 좋은 영향력을 행사할 수도 있습니다.
YB최민준 이었습니다. 감사합니다 :)
