문제

네트워크창

다양한 원인

최근 배포한 error.tsx를 고친 PR때문인가?

git reset Head^를 하여, PR 반영 이전 상태로 되돌리고 해봤는데 동일하다.

뭐가 원인일까?

응답 시간이 가장 긴 것은 _next/static/chunks파일이다.

캐싱의 문제인가?

시크릿 환경으로 크롬 브라우저로 접속했다. 여전하다.

개발 환경의 문제인가?

배포된 환경에서는 main-app 파일이 0밀리초이다. 이게 정상인데.

Vs Code의 문제인가?

배포된 환경에서 Next.js는 Vercel이 호스팅하고 있고, 개발 환경에서는 내 local환경에서 호스팅을 한다. 서버 측에서 전달되는 속도가 느린 것이니 내 PC혹은 Vs Code문제라 생각하였다.

브라우저 문제인가?

사파리로 실행했을 때이다. 이거다. 브라우저 캐싱의 문제인 듯하다. 기존 배포 서버는 정상적인 속도이니, localhost:3000에 대한 캐싱이 문제인듯하다.

빠른 3G가 켜져있었다.

이런 실수를 ,, 그러니까 다운로드 속도가 느리지. 그나저나, 휴대폰에서는 평균적으로 이런 속도일텐데 .. 이런 속도의 서비스를 제공받는 사용자는 무조건 이탈할 것이라 생각했다. 개선이 필요하다고 또 느꼈다.

네이버의 속도는 빠를까?

네이버는 속도가 빠르다. 첫 페이지가 보이는 FCP까지는 정말 빠르고, 그 이후로도 계속 다운로드를 받긴하다. 하지만 사용자에게 필요한 화면을 먼저 보여준다는 것이 중요하다. 이를테면 입력창, 로그인버튼 등 말이다.

결론

개발자 모드 > 네트워크 > 속도제한을 설정해둔 것이 원인이었다. 다양한 원인들을 고민해보고, 시도해봤다는 점에서 좋은 경험이었다고 생각한다. 앞으로는 속도가 느리다? 내 네트워크 설정을 먼저 파악하자는 경험이 쌓였다.

그리고, 이렇게 느린 환경에서 접속하는 사용자도 분명히 있을 텐데, 이런 사용자에게는 어떤 화면을 먼저 보여줄 지 고민을 해봐야겠다.