시작하며
현재 진행 중인 프로젝트의 성능 개선을 위하여 가장 많은 사용자가 진입하고, 많은 로직을 처리하는 홈 부분부터 차근차근 개선을 시작하기로 하였습니다. Request Waterfall을 보며 특별한 문제가 없는지 확인해본 결과 아래와 같았습니다.
원인
script 태그의 위치가 <head> 태그 안쪽에 위치한 것이 PARSER-BLOCKING의 원인이었습니다. 해당 코드의 히스토리를 살펴보니 KAKAO JS SDK 탑재 공식 문서에 기재된 컨벤션을 유지하기 위하여 <head> 태그 안쪽에 위치하도록 작성된 것으로 보였습니다.
해결 및 처리 방향
진행하는 프로젝트의 경우에는 Next.js를 사용하고 있었기 때문에 script 태그를 next/script 컴포넌트로 교체하는 작업을 진행하였으며, Kakao JS SDK를 통하여 이용하는 기능이 '카카오 로그인'과 '카카오톡으로 공유하기' 2가지밖에 없었기에 script를 lazy load하는 것이 오히려 FCP, LCP 수치를 향상시킬 수 있었습니다.
이번 개선에서는 Script 컴포넌트의 strategy를 lazyOnLoad로 설정하여 페이지 라이프 사이클 load 이후 발생하도록 하여 body 태그 마지막에 추가되는 것과 동일한 역할을 수행하도록 하였습니다.
기존 script를 이용하는 경우에는 script 태그 위치를 조정하는 것과 async, defer 속성을 적절히 부여하는 것으로 조정 가능합니다. 추후 다른 포스트에서 아래 동작에 대하여 deep dive 한 내용을 다뤄보아도 좋을 것 같다는 생각이 들었습니다.
결론적으로 html 로드를 중간에 blocking하지 않도록 body 태그 최하단에 배치하는 것이 FCP, LCP 향상에 큰 도움이 될 것으로 보입니다.
