Next.js
canonical URL 문제로 페이지 속도가 느려졌을 때
Next.js에서 메타데이터 설정 문제가 야기하는 성능 저하를 진단하는 방법을 정리했습니다.
페이지 속도가 갑자기 느려지면 보통 DOM 문제나 요청 문제로만 생각하기 쉽다. 하지만 canonical URL이나 og 태그 같은 메타데이터 문제도 검색 엔진 크롤러에 의한 중복 요청을 유발할 수 있다.
공개 URL의 메타 태그 확인
먼저 실제 배포된 페이지에서 메타 태그를 본다.
curl -s https://example.com | grep -Ei 'title|description|canonical|og:|twitter:'
canonical URL이 자신을 가리키고 있는지, 아니면 다른 URL을 가리키고 있는지 확인한다. 만약 순환 참조나 잘못된 URL을 가리킨다면 크롤러가 무한 루프에 빠질 수 있다.
로컬과 배포 비교
로컬 빌드 결과와 배포된 버전의 메타 태그를 비교해 보자.
npm run build
npm run start
로컬에서는 제대로 생성되는데 배포 서버에서는 다르게 보이면, 환경변수나 빌드 시간의 차이 때문일 수 있다. Next.js의 metadata 함수에서 동적으로 canonical을 생성하고 있다면 실행 환경의 BASE_URL이 올바른지 확인해야 한다.
빌드 로그와 설정 검증
배포 전에 빌드 로그를 저장해 둔다. 경고 메시지나 오류가 있었는지, 메타 태그 생성이 정상적으로 이루어졌는지 확인한다.
Sitemap과 RSS도 확인한다. 이들이 올바른 URL을 포함하고 있는지, 중복 항목이 없는지 봐야 한다.
성능 측정
curl -w "@curl-format.txt" -o /dev/null -s https://example.com
수정 전후로 응답 시간을 측정해 본다. 메타 태그 수정만으로는 직접적인 성능 개선이 없어야 하는데, 크롤러 요청 감소로 간접적인 개선이 있을 수 있다.
다시 확인하는 체크리스트
- canonical이 자신을 올바르게 가리키는가
- og:url이 공개 URL과 일치하는가
- 로컬과 배포 버전의 메타 태그가 같은가
- 빌드 로그에 경고나 오류가 있었는가
- Sitemap과 RSS가 유효한가
메타 태그는 보이지 않지만 크롤러 트래픽에 큰 영향을 미친다.