6월에는 데보션에서 웹 프론트엔드 성능 최적화를 주제로 세미나를 열어주셨어요 !
성능 최적화는 모든 개발자들의 숙명 같아요 ,,,, 저와는 아직 어색하지만요 ...
프론트엔드 최적화 스터디를 마무리 한지 얼마 안된 시점에서 세미나 주제를 접하고 시작 전부터 너무나도 기대가 되었던 세미나인데요 ! 들은 내용을 바탕으로 한번 정리해보려 합니다 :)
1. 웹 프론트엔드 성능 최적화를 하는 이유
처음 위의 사진을 보고 깜짝 놀랐습니다. 페이지가 로드되는데 5초만 지나도 90%의 사용자가 나간다니 ..!!
곰곰히 생각해보니 저도 기분 좋은 날에나 5초를 기다릴 수 있을 것 같더라구요.
이처럼 사진만 보아도 개발자 역량에 필요할 뿐만이 아니라 서비스 관점에서도 웹 성능 최적화가 중요하다는 것을 알 수 있습니다.
2. 구글의 프론트엔드 웹 성능 지표 : Core Web Vitals (CWV)
- LCP (Largest Contentful Paint) : 웹 페이지에서 가장 큰 컨텐츠를 표시하는데 걸리는 시간
- FID (First Input Delay) : 웹페이지 반응성에 대한 지표
- CLS (Cumulative Layout Shift) : 웹페이지의 레이아웃이 변경 되는 빈도와 양 측정
📌 INF 등장 ( FID 대체 )
구글에서는 더 나은 응답 지표를 위해FID를 대체하여 INF를 도입한다고 발표하였습니다. ( 2023. 5월)
FID는 브라우저가 페이지에서 첫 번째 상호 작용을 처리하는데에 중점을 두었지만,
INP는 사용자가 페이지에서 수행한 모든 상호 작용의 대기 시간을 관찰한다고 합니다 !
3. 웹 성능 측정 방법
웹 성능 측정할 수 있는 툴은 생각보다 엄청 많았습니다 ! 스터디를 진행하며 사용해본 Lighthouse도 포함되어 있군요 !
좌측은 Lab Data 기반 측정도구, 우측은 Rum Data 기반 측정도구라는 차이점이 있습니다 !
🗯️RUM이란? 온라인 방문자가 웹사이트 또는 애플리케이션과 상호 작용하는 방식을 정확히 관찰하여 , 속도와 오류율을 파악합니다 .
4. 웹 성능 최적화 방법
LCP 최적화
- HTML 에서 LCP 리소스 ( 주로 이미지 ) 가 빠르게 찾아져야 한다.
- LCP 리소스가 우선적으로 다운로드 되어야 한다.
- CDN을 사용하여 TTFB(Time To First Byte)를 최적화 해야한다. (CDN이란 ? 사용자로부터 물리적으로 가까운 서버에서 데이터를 전해준다. )
CLS 최적화
- 콘텐츠에 명시적으로 크기를 설정한다.
- Animations / transitions 사용을 피한다.
FID 최적화
- 긴 작업을 피하고, 분할한다.
- 불필요한 Javascript 사용을 피한다.
- 대규모 렌저링 업데이트를 피한다.
마지막에 강연자님이 말씀해 주신 것 처럼 ! 훗날에 측정 가능한 지표를 정의하고 목표를 달성할 뿐만 아니라 인정 받는 그런 개발자가 되고 싶습니다. 말씀해주신 내용을 바탕으로 프로젝트를 열심히 준비해보아야겠어요. 설레네요 ...😆🥰
일부 내용만 정리해보았지만, 이 밖에도 웹 성능 최적화 경험 및 팁 공유와, ifland 웹 프론트엔드 성능 최적화 적용 사례 등 더 많은 유익한 내용을 담고 있으니 꼭 다들 한번 확인해보았으면 좋겠어요 !!
https://devocean.sk.com/vlog/view.do?id=423&vcode=A03
https://devocean.sk.com/vlog/view.do?id=423&vcode=A03
devocean.sk.com
이번에도 좋은 세미나 제공해주신 데보션 사랑해요 ❣️
