페이지 전환 시 네트워크에서 차단되는 느낌이 들지 않음

빠른 페이지 전환은 사용자가 프로그레시브 웹 앱 (PWA)의 성능을 인식하는 데 중요한 역할을 합니다. 느린 네트워크에서도 전환이 빠르게 느껴져야 합니다.

권장사항

페이지 전환이 느린 것을 찾으려면 시뮬레이션된 느린 네트워크를 사용하여 웹 앱을 탐색합니다. Chrome에서 이 작업을 수행하려면 다음 단계를 따르세요.

[comment]: <> (처음 두 개 항목은 web.dev의 단축 코드이지만 영어에서 번역되지 않은 언어입니다.) 1. Control+Shift+J (Mac의 경우 Command+Option+J)를 눌러 DevTools를 엽니다. 2. Network 탭을 클릭합니다. 3. 제한 드롭다운 목록에서 느린 3G를 선택합니다.

앱에서 링크 또는 버튼을 탭할 때마다 페이지가 다음 두 가지 방법 중 하나로 즉시 응답하는지 확인합니다.

  • 페이지가 즉시 다음 화면으로 전환되고 네트워크의 콘텐츠를 기다리는 동안 로드 화면을 표시합니다.
  • 앱이 네트워크의 응답을 기다리는 동안 페이지에 로딩 표시기가 나타납니다.

클라이언트가 렌더링한 단일 페이지 앱에서 작업하는 경우 사용자를 다음 페이지로 즉시 전환하고 스켈레톤 화면을 표시합니다. 나머지 콘텐츠가 로드되는 동안 페이지 제목이나 썸네일과 같이 이미 사용 가능한 콘텐츠는 즉시 표시해야 합니다.

자료