SCRIPT

들어가며 HTML의 스크립트 요소 는 JavaScript 코드를 포함하거나 외부 스크립트 파일을 불러오는 역할을 수행합니다. 우리는 이러한 요소를 통하여 웹 페이지에 동적 기능과 인터랙티브한 요소들을 추가할 수 있습니다. 이러한 script 요소에는 많은 속성이 존재하는데 본 포스팅에서는 그 중에서 async와 defer에 대하여 알아보고자 합니다. async와 defer 속성을 사용하는 이유는 무엇일까?https://what-time.tistory.com/50 [SEO] script 태그는 html에서 어디에 넣는 것이 가장 좋을까?시작하며 현재 진행 중인 프로젝트의 성능 개선을 위하여 가장 많은 사용자가 진입하고, 많은 로직을 처리하는 홈 부분부터 차근차근 개선을 시작하기로 하였습니다. Reques..

들어가며 프로젝트 성능 개선의 일환으로 태그를 이용하여 Kakao Javascript SDK Script를 사용하던 부분을 next/script 컴포넌트를 사용하도록 바꾸고 lazyOnload을 적용하고자 하였습니다.   그리고 해당 스크립트를 깔끔하게 next/head 안에 넣어두고 테스트 서버에 배포하였는데... (사실 next/head 안에 넣은 것은 공식 문서에서 제공하는 형태를 최대한 가져가고자 하였습니다.)   오잉..? 태그 안에 해당 script가 들어가지 않는 모습을 볼 수 있었습니다. next/head가 아닌 다른 곳에 next/script를 위치시키자 바로 문제가 해결 되었습니다.  무엇이 문제일까?(참고: next/script 뿐만 아닌 script 역시 head 태그 안에 들어..

시작하며 현재 진행 중인 프로젝트의 성능 개선을 위하여 가장 많은 사용자가 진입하고, 많은 로직을 처리하는 홈 부분부터 차근차근 개선을 시작하기로 하였습니다. Request Waterfall을 보며 특별한 문제가 없는지 확인해본 결과 아래와 같았습니다.    원인 script 태그의 위치가 태그 안쪽에 위치한 것이 PARSER-BLOCKING의 원인이었습니다. 해당 코드의 히스토리를 살펴보니 KAKAO JS SDK 탑재 공식 문서에 기재된 컨벤션을 유지하기 위하여 태그 안쪽에 위치하도록 작성된 것으로 보였습니다.  해결 및 처리 방향 진행하는 프로젝트의 경우에는 Next.js를 사용하고 있었기 때문에 script 태그를 next/script 컴포넌트로 교체하는 작업을 진행하였으며, Kakao JS S..