[SW] 웹 최적화, 프론트 성능 개선에 대해

 

 

💡 웹 성능 개선이란? 속도 개선?

• 사이트에 렌더링 될 여러 파일들의 로드 시간 단축하기
• 로드를 시작하고 사용자에게 안정적으로 서비스 제공하기
• 사이트와 사용자의 상호작용을 즉각적이고 매끄럽게 표현(반응)하기
• 사이트의 실제 로드 시간보다 사용자가 느끼는 체감 시간 줄이기(로딩 화면 준비 등)

요약하자면,

리소스를 빨리 받는 로딩 성능 & 받은 리소스를 빨리 그리는 렌더링 성능 + 서비스에서 느끼는 사용자 경험

 

⏳ 로딩 성능 개선

• 네트워크 개선
• 리다이렉트 방지
• 캐시 적극적으로 사용
• 불러오는 리소스 압축

 

🎨 렌더링 성능 개선

먼저, 브라우저가 그려지는 과정 이해하기 ⬇️

 

FP First Paint : 최초의 픽셀이 그려진 시점

FCP First Contentful Paint : 최초의 컨텐츠가 그려진 시점

LCP Largest Contentful Paint : 보여지는 화면에서 가장 큰 컨텐츠가 그려진 시점

DCL Document Content Loaded : DOM 이 완성되는 시점

L Load : 문서가 완료되는 시점

 

• 불필요하게 추가된 파서 과정 없애기

 

HTML, CSS Parser 가 합쳐져 DOM Tree, Render Tree 가 만들어지는데, 

불필요한(반복되는) 파서 과정을 줄여 렌더링 성능을 개선시킬 수 있다.

 

🫂 사용자 경험 개선 feat.Lighthouse

Core Web Vitals : 사용자 경험을 개선하는 지표

• FCP First Contentful Paint : 첫 콘텐츠가 그려지는 시점, 빈 페이지가 조금이라도 그려지면 사용자는 빠르게 느끼기 때문에
  빨리 흰 페이지를 넘어가는게 관건
• LCP Lagest Contntful Paint : 빠른 로딩, 가장 큰 컨텐츠가 빨리 나올수록 높은 점수를 줌,
  시각적으로 큰 부분이기에 체감 속도에 큰 영향이 있음
• FID First Input Delay : 빠른 상호작용
• CLS cumulative Layout Shift : 시각적인 안정성, 레이아웃이 바뀌는 범위 줄이기

라이트하우스에서 위 사항들 외에도 여러 기준으로 측정한 점수를 확인할 수 있다.

 

 

 

🔗 https://www.inflearn.com/course/%EC%9D%B8%ED%94%84%EC%BD%982023-%EB%8B%A4%EC%8B%9C%EB%B3%B4%EA%B8%B0/dashboard

[지금 무료] 인프콘 2023 다시보기 강의 | 인프런 - 인프런