연결 상태가 좋지 않거나 불안정할 때 앱이나 사이트를 사용하는 느낌을 이해하고 그에 따라 빌드하는 것이 중요합니다. 다양한 도구가 도움이 될 수 있습니다.
낮은 대역폭과 높은 지연 시간으로 테스트
점점 더 많은 사람들이 휴대기기에서 웹을 경험하고 있습니다. 심지어 집에서도 많은 사람이 유선 광대역 대신 모바일을 사용하고 있습니다.
이러한 맥락에서 연결 상태가 좋지 않거나 불안정할 때 앱이나 사이트를 사용하는 느낌을 이해하는 것이 중요합니다. 다양한 소프트웨어 도구를 사용하면 낮은 대역폭과 높은 지연 시간을 에뮬레이션하고 시뮬레이션할 수 있습니다.
네트워크 제한 에뮬레이션
사이트를 빌드하거나 업데이트할 때는 다양한 연결 조건에서 적절한 성능을 보장해야 합니다. 몇 가지 도구가 도움이 될 수 있습니다.
브라우저 도구
Chrome DevTools를 사용하면 Network 패널의 사전 설정 또는 맞춤 설정을 사용하여 다양한 업로드/다운로드 속도와 왕복 시간으로 사이트를 테스트할 수 있습니다. 기본사항을 알아보려면 네트워크 성능 분석 시작하기를 참조하세요.
시스템 도구
Network Link Conditioner는 Xcode용 Hardware IO 도구를 설치하는 경우 Mac에서 사용할 수 있는 환경설정 패널입니다.
기기 에뮬레이션
Android Emulator를 사용하면 Android에서 앱 (웹브라우저 및 하이브리드 웹 앱 포함)을 실행하는 동안 다양한 네트워크 조건을 시뮬레이션할 수 있습니다.
iPhone의 경우 Network Link Conditioner를 사용하여 손상된 네트워크 상태를 시뮬레이션할 수 있습니다 (위 참고).
다양한 위치 및 네트워크에서 테스트
연결 성능은 서버 위치와 네트워크 유형에 따라 달라집니다.
WebPagetest는 다양한 네트워크와 호스트 위치를 사용하여 사이트의 성능 테스트를 실행할 수 있는 온라인 서비스입니다. 예를 들어 2G 네트워크를 사용하는 인도의 서버에서 또는 미국의 한 도시에서 케이블을 통해 사이트를 사용해 볼 수 있습니다.
위치를 선택하고 고급 설정에서 연결 유형을 선택합니다. 스크립트(예: 사이트 로그인) 또는 RESTful API를 사용하여 테스트를 자동화할 수도 있습니다. 이렇게 하면 연결 테스트를 빌드 프로세스 또는 성능 로깅에 포함할 수 있습니다.
Fiddler는 GeoEdge를 통한 전역 프록시를 지원하며, 맞춤 규칙을 사용하여 모뎀 속도를 시뮬레이션할 수 있습니다.
손상된 네트워크에서 테스트
소프트웨어 및 하드웨어 프록시를 사용하면 대역폭 제한, 패킷 지연, 무작위 패킷 손실과 같은 문제가 있는 모바일 네트워크 상태를 에뮬레이션할 수 있습니다. 공유 프록시 또는 손상된 네트워크를 사용하면 개발자팀이 워크플로에 실제 네트워크 테스트를 통합할 수 있습니다.
Facebook의 Augmented Traffic Control(ATC)은 트래픽을 형성하고 손상된 네트워크 상태를 에뮬레이션하는 데 사용할 수 있는 BSD 라이선스 애플리케이션 집합입니다.
Facebook은 2G 사용자가 제품을 사용하는 방식을 이해하기 위해 2G Tuesdays를 도입하기도 했습니다. 화요일에는 직원들에게 2G 연결을 시뮬레이션할 수 있는 옵션을 제공하는 팝업이 표시됩니다.
Charles HTTP/HTTPS 프록시를 사용하여 대역폭과 지연 시간을 조정할 수 있습니다. Charles는 상용 소프트웨어이지만 무료 체험판을 사용할 수 있습니다.
Charles에 관한 자세한 내용은 codewithchris.com에서 확인할 수 있습니다.
불안정한 연결 및 'lie-fi' 처리
Lie-Fi란 무엇인가요?
lie-fi라는 용어는 최소 2008년 (휴대전화가 이런 모습이었을 때)으로 거슬러 올라가며, 겉보기와 다른 연결 상태를 의미합니다. 어떤 이유로든 연결이 되지 않을 때 브라우저가 연결된 것처럼 작동합니다.
연결 상태를 잘못 해석하면 브라우저(또는 JavaScript)가 포기하고 적절한 대체 수단을 선택하는 대신 리소스를 가져오려고 계속 시도하므로 환경이 저하될 수 있습니다. Lie-fi는 실제로 오프라인보다 더 나쁠 수 있습니다. 적어도 기기가 확실히 오프라인 상태인 경우 JavaScript가 적절한 회피 조치를 취할 수 있습니다.
Lie-fi는 더 많은 사용자가 고정 광대역에서 모바일로 이동함에 따라 더 큰 문제가 될 가능성이 높습니다. 최근 미국 인구조사 데이터에 따르면 고정 광대역에서 벗어나는 추세입니다. 다음 차트는 2013년과 비교한 2015년의 가정 내 모바일 인터넷 사용량을 보여줍니다.
제한 시간을 사용하여 간헐적인 연결 처리
과거에는 간헐적인 연결을 테스트하기 위해 XHR을 사용하는 임시방편이 사용되었지만, 서비스 워커를 사용하면 네트워크 제한 시간을 설정하는 더 안정적인 방법을 사용할 수 있습니다. 이는 몇 줄의 코드만으로 Workbox를 사용하여 달성할 수 있습니다.
workboxSW.router.registerRoute(
'/path/to/image',
workboxSW.strategies.networkFirst({networkTimeoutSeconds: 3}),
);
Jeff Posnick의 Chrome Dev Summit 강연인 Workbox: Flexible PWA Libraries에서 Workbox에 관해 자세히 알아볼 수 있습니다.
Fetch API를 위한 제한 시간 기능도 개발 중이며, Streams API는 콘텐츠 전송을 최적화하고 모놀리식 요청을 방지하는 데 도움이 됩니다. 제이크 아치볼드는 페이지 로드 속도 향상에서 lie-fi를 해결하는 방법에 관해 자세히 설명합니다.