# lighthouse를 이용해 성능 최적화 하기 (intro)

# lighthouse란?

크롬에서 제공하는 웹사이트의 성능을 측정하는 도구입니다. 모바일, 데스크탑 모두 지원하며, 카테고리에는 Perfomance, Progressive web app, seo 등 다양한 지표가 있습니다. 그중에서 Perfomance만 중점으로 다룹니다.

# 측정하기

분석하고자 하는 사이트를 띄우고 크롬 개발자 도구를 띄워주세요. 그 다음 Lighthouse를 클릭하시고 카테고리의 Perfomance를 클릭 후, Generate report를 클릭하면 사이트를 분석해줍니다.

# 측정결과 참고사항

컴퓨터마다 같은 사이트도 점수가 다릅니다. 크롬에 달려있는 Lighthouse 는 결국 로컬 PC에서 검사를 진행하기 때문에 PC 환경에 영향을 받을 수 밖에 없기 때문입니다.

  • CPU의 작업량에 여유가 있는 상태 vs CPU가 바쁘게 돌고 있는 상태(여러 프로그램을 띄워둔 상태)
  • 미국에 있는 서버 홈페이지를 한국의 사용자가 검사할 때 vs 미국의 사용자가 검사할 때
  • 웹서버에 트래픽이 많은 상황에서 검사를 했을 때 vs 트래픽이 없는 상황에서 검사를 했을 때

그래서 검사 결과를 절대적인 지표로 삼기 보다는 하나의 가이드로 생각하시는게 좋습니다.또한, 필요에 따라 한 번이 아닌 여러번 검사를 돌려보는 것도 좋은 방법입니다.

# 사이트의 문제점 및 해결책 제안

빨, 노 -> 최적화 하라 회색 → 문제는 아니지만 살펴봐라 초, Passed audits → 잘 되고 있는 항목

# Opportunities

리소스의 관점에서 가이드 → 로딩 성능

  • Properly size images → 적절한 사이즈의 이미지를 써라
  • Serve images in next-gen formats → 이미지 포맷 맞춰라
  • Efficiently encode images → 효과적인 이미지 포맷을 써라
  • Minify JavaScript → js 사이즈 줄여라
  • Preconnect to required origins → preconnect를 사용하라
  • Enable text compression → 서버에서 텍스트 압축을 받아서 api 통신을 하라
    • network 탭의 api의 Headers의 Content-Encoding 값이 gzip이면 압축한 값으로 요청한다는 의미
    • axios을 쓴다면, header에 {Content-Encoding : gzip}을 넣어서 압축된 값을 달라고 요청해야합니다.
    • 압축은 서버에서 해서 주는 것이기 때문에 요청해도 gzip으로 안온다면 서버 문제
    • 모든 파일을 인코딩하면 성능이 오히려 떨어진다고 합니다. (2kB이상이면 인코딩을 하는것이 유리, 그 이하면 그냥 보내는게 성능상 좋습니다. - 왜냐하면 서버에서 인코딩하면 프론트에서 디코딩해야하는 시간을 고려 했을때 용량이 극히 작다면 압축하고, 압축 푸는 시간이 더 오래 걸리기 때문 )

# Diagnostics

페이지의 실행 관점 → 렌더링 성능

  • Minimize main-thread work → 메인 쓰레드 일을 최소화 하라
  • Serve static assets with an efficient cache policy → 캐시 써라
  • reduce JS execution time → 실행시간 감소하라

다음 포스팅 부터 각 문제별 해결방법을 포스팅하겠습니다.

#react #optimize-performance
노경환
이 글이 도움이 되셨다면! 깃헙 스타 부탁드립니다 😊😄
최근변경일: 9/23/2024, 2:14:43 AM