프론트엔드 개발자 엄성준 블로그

Lighthouse 90점대인데 체감은 느린 이유? Vercel Region 최적화로 해결하기

현재 제 포트폴리오 프로젝트는 Next.js와 Supabase를 기반으로 구축되어 있으며, Vercel을 통해 배포 및 관리되고 있습니다. 그동안 Lighthouse 점수 개선, SEO 최적화, 이미지 최적화 등 프론트엔드 개발자로서 할 수 있는 다양한 최적화 작업을 진행해 왔습니다. 그 결과 성능 97, 접근성 85, SEO 100이라는 준수한 지표를 얻을 수 있었습니다. 하지만 지표와는 별개로, 실제 페이지 진입 시 질문 데이터를 불러오는 과정에서 이해하기 힘들 정도의 로딩 지연이 발생했습니다. 이번 글에서는 코드 레벨을 넘어 인프라 설정(Region)을 통해 이 문제를 해결한 과정을 공유합니다.왜 성능 지표는 좋은데 체감 속도는 느렸는가?Lighthouse는 정적 리소스 로딩과 초기 렌더링 성능..

최근 제가 만들고 배포한 포트폴리오 프로젝트가 잘 배포되어 있는지 확인을 해보았는데 아래와 같이 오류가 발생하는 중이었습니다. 이 문제를 해결하기 위해 network tab을 봤을 때 notion에서 이미지를 가져오는데 이때 이미지가 aws로 배포되어 있는데 도메인에 변경이 있는 듯했습니다. 그래서 network tab에 잡힌 도메인 주소를 next.config.js에 추가해 주었다. /** @type {import('next').NextConfig} */ const nextConfig = { images: { domains: [ "prod-files-secure.s3.us-west-2.amazonaws.com", // 추가 한 도메인 "s3.us-west-2.amazonaws.com", "images...