들어가며 많은 사용자들이 페이지의 로딩 속도가 느린 경우에 높은 이탈율을 보이곤 합니다. 특히 많은 이미지가 포함된 웹 사이트에서 로딩 속도가 느린 것을 볼 수 있습니다. 이렇듯 이미지 최적화는 초기 사용자 이탈율을 줄일 수 있는, 웹 개발에서 빼놓을 수 없는 중요한 작업입니다. 사용자 환경에 따라 적합한 포맷과 크기의 이미지를 제공하면 웹사이트의 성능, SEO, 그리고 사용자 경험이 모두 향상됩니다. 이번 포스팅에서는 특히 포맷 최적화를 위한 태그의 강점을 알아보고자 합니다. 이미지 포맷 최적화의 중요성이미지 포맷 최적화의 중요성은 아래와 같습니다. 파일 크기 감소 이미지 포맷은 같은 품질의 이미지를 얼마나 압축할 수 있는지를 결정합니다.WebP는 JPG 대비 최대 30% 더 작은 파일 크기를 제공..
Web/SEO 개선
시작하며 현재 진행 중인 프로젝트의 성능 개선을 위하여 가장 많은 사용자가 진입하고, 많은 로직을 처리하는 홈 부분부터 차근차근 개선을 시작하기로 하였습니다. Request Waterfall을 보며 특별한 문제가 없는지 확인해본 결과 아래와 같았습니다. 원인 script 태그의 위치가 태그 안쪽에 위치한 것이 PARSER-BLOCKING의 원인이었습니다. 해당 코드의 히스토리를 살펴보니 KAKAO JS SDK 탑재 공식 문서에 기재된 컨벤션을 유지하기 위하여 태그 안쪽에 위치하도록 작성된 것으로 보였습니다. 해결 및 처리 방향 진행하는 프로젝트의 경우에는 Next.js를 사용하고 있었기 때문에 script 태그를 next/script 컴포넌트로 교체하는 작업을 진행하였으며, Kakao JS S..
