[인프콘 2023] "당신의 웹페이지는 몇점인가요? : Light House를 이용한 성능개선" 리뷰

🎈개요

 인프콘 2023 에서 발표한 " 당신의 웹페이지는 몇점인가요? " 발표를 듣고 강의 내용을 간략히 정리하고, 느낀점과 해야할 일을 적는 리뷰 글입니다.

 

📚강의 내용 정리

• 웹성능
  • 사이트 내의 로드 시간을 단축 : 리소스들의 로딩 시간을 단축
  • 서비스를 빠르게 사용 가능하게 준비
  • 매끄러운 상호작용성
  • 사용자의 체감 성능 : 실제 로딩 시간보다 사용자가 더 빠르게 느끼게 하기
  • 로딩 성능과 렌더링 성능을 고려해야한다.
• 로딩성능
  • 리소스가 렌더링 되기 전에 로딩되는 성능
  • Network 바에서 확인 가능
• 로딩성능의 개선
  1. 네트워크 개선 및 리다이렉트 방지, 캐시 적극적 사용
     • 보통 캐시를 이용해서 쉽게 개선이 가능하다
  2. 리소스 압축 및 최적화
• 렌더링 성능 개선
  • 받아온 리소스가 DOM 에 그려지는 성능
  • FP / FCP / LCP
• 렌더링 관련 용어
  • FP(First Paint) : 최초의 픽셀이 그려진 시점
  • FCP(First Contatful Paint) : 최초의 컨텐츠가 그려진 시점
  • ✨LCP(Largest Contentful Paint) : 화면에서 가장 큰 컨텐츠가 그려진 시점
  • DCL(Document Content Loaded) : DOM이 완성되는 시점
  • L(Load) : 문서가 완료되는 시점
• Javascript에 의해 HTML 파싱이 여러 번 이루어 질 수 있다. ⇒ 잘 작성
• Render Tree가 그려지는 과정 : Layout ⇒ Paint ⇒ Composite
  • 특정 스타일마다, Layout이나 paint 등 특정 과정들을 생략이 가능하다.
• 로딩성능, 렌더링 성능 뿐만 아니라 사용자 경험이 중요하다
• Core Web Vitals
  • LCP : 빠른 로딩
  • FID(First Input Delay) : 빠른 상호작용
  • CLS(Cumulative Layout Shift) : 시각적인 안정성
• Lighthouse를 통해 위 성능 측정이 가능하다. 단, FID 대신 TBT를 사용한다.
• Lighthouse
  • 로딩, 렌더링 성능과 사용자 경험을 토대로 점수를 매겨준다
• Lighthouse 설정
  • 모드
  • 디바이스 선택 (모바일/데스크탑) : 뷰포트의 차이
  • 카테고리 : 성능, 접근성 등..
• TBT(Total Blocking Time) : Long Task의 50ms 제외한 나머지 시간
• TTI(Time to Interactive) : 상호작용이 안정적으로 응답할 수 있는 시간
• CLS : 화면 기준으로 특정 영역이 이동한 거리로 계산

 

✨느낀점과 해야 할 것

 평소에 프론트엔드 성능측정과 관련하여 관심이 많았습니다. 그래서 그런지 익숙한 내용은 많았으나, FID나 TBT같은 단어들은 언제 들어도 적응이 잘 안되는 것 같습니다.🤔 꾸준히 관심가지고 보다보면 적응이 되지 않을까 싶습니다.

 

 Light House에서 문제점을 제시해주는데, 이를 간단하게 고쳐가는 과정들을 보여주셔서 쉽게 볼 수 있는 강의였습니다.

 

 기존에 Light House를 이용하여 이전 프로젝트에서의 성능 측정을 먼저 하고 있었습니다. 그래서 강의를 들으면서 내가 어떤 식으로 추가로 리팩토링 해야 하는지에 대해서 참고가 됐습니다.

 

또한 다음 프로젝트에는 프론트엔드 성능과 관련된 지표들을 생각하며 아키텍쳐를 고민해 봐야겠습니다.

 

내가 해야할 것

• JS챔피언 정보 관리시스템의 LCP를 개선하기
  • 가장 큰 영역인 사진 이미지 로드를 최적화 하기
  • 캐쉬를 이용해서 이미지 최적화를 진행하여 보기
• 다음에 진행될 프로젝트에서도 캐시를 이용하여 이미지 최적화 작업을 고려