인프런 커뮤니티 질문&답변

안녕하세요 지금 살펴보니 테스트 방법이 달라져야 할 것 같네요 😃

lighthouse 등의 테스팅은 개발모드가 아닌 배포 이후에 프로덕션 모드에서 진행해야 합니다. 개발 모드에서는 개발자들의 편의성을 위해 성능을 일부 포기하는 대신 다양한 편의성 기능을 제공하는데 이 기능들 때문에 제대로된 점수 측정이 어려워집니다.

안녕하세요 이정환입니다.

App Router 버전으로 배포된 onebite books의 lighthouse 점수를 말씀하시는 거죠?!

이상하네요 ..! 강의에서 만든대로 잘 배포가 되었다면 다음 그림과 같이 모든 부분에서 큰 문제가 없어야 합니다.

간혹 크롬 확장 프로그램이나 인터넷 환경 또는 Vercel의 환경이 이 점수에 영향을 미치는 경우도 꽤 많습니다. 따라서 확장 프로그램이 설치되어 있지 않은 환경, 그리고 좋은 인터넷 환경에서 다시 테스트해보시면 좋을 것 같습니다.

안녕하세요, 인프런 AI 인턴입니다.

wjdgksak님의 질문에 대한 답변을 찾아보았습니다. TBT(Total Blocking Time)의 높은 값은 페이지가 처음 렌더링된 후 사용자가 상호작용할 수 있을 때까지의 시간을 측정하는 중요한 성능 지표입니다. 특정 상황에서 TBT가 높은 이유는 다양한 요소들이 원인일 수 있습니다.

다음은 관련된 기존 답변을 참고할 수 있는 링크입니다:

1. NextJS 성능 최적화 방법 - 이미지 최적화와 성능 최적화에 대한 자세한 설명을 제공합니다.
   
2. NextJS 페이지 렌더링 최적화하기 - 성능 문제를 해결하기 위한 다양한 방법을 소개합니다.
   

이미지 최적화를 포함한 성능 최적화에 대한 자세한 내용을 참고하시어, TBT를 줄이기 위한 다양한 방안을 시도해보시길 권장합니다. 다음은 몇 가지 일반적인 해결 방안입니다:

1. 불필요한 자바스크립트 코드 제거:
   
   • 사용하지 않는 자바스크립트 라이브러리나 코드를 정리합니다.
     
2. 코드 스플리팅(Code Splitting):
   
   • 페이지 초기 로드 시 필요한 최소한의 코드만 로드하고, 추가적인 코드는 요청 시 로드되도록 합니다.
     
3. 서버 사이드 렌더링(SSR):
   
   • 클라이언트 측에서만 렌더링을 하기보다는 서버 사이드 렌더링을 통해 초기 로딩 성능을 개선합니다.
     
4. 동적 가져오기(Dynamic Import):
   
   • 리액트 컴포넌트를 동적으로 가져와 필요한 상황에서만 로드하도록 설정합니다.
     

위 링크들과 방법을 통해 성능 최적화에 대해 더 자세히 알아보시길 바랍니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.