상세 내용

1. 프론트엔드 성능 개선 스터디 진행, 성능 개선 계획 수립
   • <프론트엔드 성능 최적화 가이드> 책으로 한 달 동안 업무 외 시간에 스터디 진행
   • 성능 개선 정도를 확인 할 수 있는 지표 선정 (Chrome LightHouse 점수 선택)
   • 학습한 내용을 기반으로 현재 홈페이지에서 진행할 수 있는 성능 개선 과제 목록 작성. 이후 스터디원끼리 과제 분담
2. 성능 개선 작업 진행
   • JS 번들 사이즈 감소: lodash, framer 등 라이브러리 최적화, 날짜 관련 라이브러리를 momet에서 dayjs로 변경, import 방식 변경 등)
   • 애니메이션 최적화: reflow, repaint를 발생시키는 애니메이션 삭제 또는 수정, Intersection Observer 이용하여 스크롤 이벤트 부하 감소)
   • 이미지 사이즈 최적화 및 지연로딩 적용
   • 2개월 간 LightHouse 점수 11% 증가