참여를 크게 높이고 데이터 사용량을 줄인 Twitter Lite PWA

트위터 세부정보

Twitter는 세상에서 무슨 일이 일어나고 있는지 알아보는 플랫폼입니다. 전 세계적으로 3억 2,800만 명의 월간 활성 사용자가 정보를 소비, 생성, 공유합니다. 사용자의 80% 이상이 모바일을 이용하는 Twitter는 더 빠르고 안정적이며 몰입감 있는 모바일 웹 환경을 갖추기를 원했습니다. Twitter Lite 프로그레시브 웹 앱은 최신 웹 기능과 네이티브 기능의 장점을 결합한 앱입니다. 2017년 4월에 전 세계 모든 사용자를 위한 기본 모바일 웹 환경이 되었습니다. Twitter는 인스턴트 로드, 사용자 참여, 데이터 소비 감소를 위한 명시적인 목표를 포함하여 더욱 강력한 환경을 제공하기 위해 Twitter Lite를 개발했습니다.

  • 세션당 페이지 조회수 65% 증가
  • 전송된 트윗 수 75% 증가
  • 이탈률 20% 감소

Twitter Lite는 Twitter를 사용할 수 있는 가장 빠르고 저렴하며 안정적인 방법입니다. 웹 앱은 기본 앱의 성능에 필적하지만 Android용 Twitter에 비해 필요한 기기 저장공간이 3% 도 되지 않습니다.

니콜라스 갤러거, Twitter Lite 엔지니어링 책임자

'홈 화면에 추가' 메시지와 웹 푸시 알림을 통해 참여도 높이기

Twitter 웹사이트는 수백만 명의 사용자에게 도달하고 있지만, 전통적으로 모바일 웹에서 사용자의 재참여를 유도하는 것은 어려웠습니다. 사용자에게 Twitter Lite를 홈 화면에 저장하라는 'Add to Homescreen' 메시지를 구현한 후 Twitter의 일일 순 사용자 25만 명은 하루 평균 4번 홈 화면에서 Twitter Lite를 실행합니다.

Twitter는 네이티브 앱과 동일하게 작동하며 사용자의 브라우저가 닫혀 있어도 도착하는 웹 푸시 알림을 구현했습니다. 이 구현을 통해 하루에 1,000만 개가 넘는 푸시 알림을 제공하고 있습니다.

데이터 소비 줄이기

Twitter Lite는 기본적으로 데이터를 더 적게 사용하며 더 작은 미디어 리소스를 제공하고 캐시된 데이터를 최대한 많이 사용합니다. 또한 PWA는 사용자가 타임라인을 스크롤할 때 데이터 소비를 최대 70% 까지 줄일 수 있도록 이미지를 최적화합니다. 데이터 절약 모드를 사용하면 Twitter Lite에서 미디어 애셋을 다운로드할 때 사용자가 제어하여 더 많은 모바일 데이터를 보존할 수 있습니다.

Twitter는 다운로드 속도가 느리고 휴대기기 성능이 떨어지는 신흥 시장을 비롯한 광범위한 사용자에게 도달하는 것이 중요합니다. Twitter Lite는 저대역폭 환경에서 Twitter를 더 빠르고 쉽게 사용할 수 있도록 하여 이 잠재고객에게 더 효과적으로 도달할 수 있도록 합니다.

Twitter Lite 사용자는 데이터 소비를 절약할 수 있습니다. PWA의 경우 유선으로 600KB에 불과하지만 이는 기본 Android 앱을 설치하는 데 필요한 다운로드 데이터의 크기가 23.5MB에 달합니다.

서비스 워커 스크립트를 사용한 거의 즉각적인 로드

Twitter Lite의 첫 번째 로드는 대부분의 기기에서 3G 네트워크를 통해 5초 이내에 작동하며, 후속 로드는 비정상적인 네트워크에서도 거의 즉각적입니다. 앱은 초기 HTML 응답을 브라우저로 스트리밍하고 중요한 리소스를 미리 로드하기 위한 안내를 전송합니다. 리소스는 초기 로드 시 표시되는 화면에 필요한 리소스만 필요하도록 세분화된 부분으로 나뉩니다. 서비스 워커 스크립트는 추가 리소스를 캐시하여 다른 화면으로 빠르게 탐색할 수 있도록 합니다.

Twitter는 모바일이 80% 이상을 차지하며, Twitter Lite의 많은 사용자가 2G 또는 3G 네트워크를 통해 사이트에 도달합니다. 최초 로드 및 후속 조회 시 빠른 사용자 환경은 사용자가 최대한 빨리 트윗을 보고 작성할 수 있도록 하는 데 필수적입니다. Twitter는 서비스 워커와 PRPL (푸시, 렌더링, 사전 캐시, 지연 로드) 패턴의 일부와 같은 지능형 로드 전략을 도입하여 두 활동의 로드 시간을 크게 줄였습니다. 서비스 워커에서 현재 뷰, 피드 업데이트, 알림, 메시지, 설정을 캐싱하기 때문에 재방문이 거의 즉각적으로 이루어집니다. Twitter Lite 사용자는 상호작용까지의 시간(백분위수) 지연 시간이 50% 감소하고 로그인한 사용자의 평균 로드 시간이 30% 감소했습니다.

Twitter는 네트워크 연결을 사용할 수 없을 때마다 표시되는 커스텀 오프라인 페이지로 시작하는 등 오프라인 및 네트워크 복원력을 위해 서비스 워커를 활용하는 점진적인 접근 방식을 채택했습니다. 그런 다음 반복 방문 속도를 높이기 위해 CSS, 이미지, JavaScript 번들과 같은 정적 리소스의 오프라인 캐싱으로 전환했습니다. 마지막으로 애플리케이션 셸의 오프라인 캐싱 지원을 추가했습니다. 그 결과 Twitter Lite는 사용자가 PWA로 돌아오면 속도가 느린 휴대기기나 네트워크에서도 3초 이내에 부팅됩니다.

추가 자료