Tinder PWA: 프로그레시브 웹 앱의 성공적인 예

Tinder가 지금까지의 연애 생활에 어떤 영향을 미치나요? Tinder 사용 경험은 어떻습니까? 진정한 관계만을 찾는 사람들에게는 Tinder가 마음을 놓칠 수 없습니다. 그러나 Tinder는 그들이 틀렸음을 증명하기로 결정하고 모든 사람이 정당한 사랑을 찾을 수 있는 다재다능한 데이트 사이트가 되는 것을 목표로 합니다. 결과적으로 Tinder PWA 는 세계 최대 데이트 사이트가 인지도를 높이고 원하는 트래픽, 멘션 및 전환을 달성할 수 있도록 돕기 위해 탄생했습니다.

오늘의 사례 연구에서 우리는 또 다른 성공적인 PWA 채택과 이것이 Tinder가 목표를 달성하는 데 어떻게 도움이 되었는지 소개할 것입니다. Tinder PWA를 공개하고 성능을 살펴보겠습니다.

틴더 개요

Tinder는 기술에 정통한 세대를 위한 새로운 데이트 솔루션으로 구축되었습니다. 일반적으로 연결 사이트라고 할 수 있지만 Tinder의 핵심은 국경과 시간대를 초월한 매치 메이킹이라는 아이디어를 기반으로 합니다.

2012년 Tinder가 시장에 출시되었을 때 대부분 싱글이 Tinder를 자주 사용하여 캐주얼한 데이트를 위한 파트너를 찾기 위해 어슬렁거렸습니다. Tinder의 존재가 활발하고 무책임한 관계를 장려하는 데이트 언어 세트의 발명에 추가되었지만 Tinder는 또한 많은 성공적인 약혼과 결혼의 고향이기도 합니다.

Tinder에 가입하려면 비슷한 관심사를 가진 사람들을 끌어들이기 위해 아바타와 매력적인 약력을 포함한 적절한 프로필이 필요합니다. 프로필이 보이면 왼쪽이나 오른쪽으로 스와이프하여 패스하거나 이동할 수 있습니다. 짝을 맞추면 그 사람과 계속해서 메시지를 주고받을 수 있습니다.

일치 항목을 생성하기 위해 Tinder는 사용자 범위, 성별, 가까운 위치 및 사용 가능한 모든 친구와 같은 정보를 사용자에게 제공합니다. 사랑을 찾을 수 있는 안전한 장소로 만들기 위한 노력에도 불구하고 Tinder를 통해 지속 가능한 관계를 얻기가 어렵고 사기가 증가하고 있습니다.

사용자 수에 따르면 Tinder는 전 세계에서 가장 큰 데이트 사이트로 남아 있으며 매월 플랫폼에서 7,500만 명의 사용자를 끌어모으며 그 중 780만 명이 미국 사용자입니다.

Tinder PWA 통합으로 이어지는 상황

다른 브랜드와 달리 Tinder는 큰 문제가 없었습니다. 그들은 운영 체제 전반에 걸쳐 잘 작동하는 괜찮은 모바일 네이티브 앱을 가지고 있었습니다. 클릭률은 높았지만 더 좋았을 수도 있다는 것을 알았습니다.

Tinder는 더 확장하고 새로운 시장을 점유하고 새로운 채택을 모색하며 다른 온라인 데이트 플랫폼 중에서 시장 리더로서의 위치를 ​​보호하기를 원했습니다.

그들의 경쟁자들이 모바일 사이트에서 보다 트렌디한 경험을 제공하고 있다는 것을 인식한 후, Tinder는 V1으로 Tinder의 경험에서 기능 동등성을 달성하기 위해 더 나은 것을 하기로 결정했습니다.

PWA로 전환하면 Tinder의 요청을 어떻게 해결할 수 있습니까?

PWA는 검색 가능성보다 기본 앱을 능가할 수 있습니다. 검색 엔진에서 홍보할 수 있으며 브라우저 전반에서 잘 작동하면서 네이티브 앱에 유사한 경험을 제공합니다. 이를 통해 PWA는 다양한 청중 그룹을 유치할 수 있으므로 상당한 경쟁 우위를 확보할 수 있습니다.

새로운 시장에 침투하여 반복 사용자로 전환하도록 영감을 주는 빠르고 안정적인 솔루션에 관해서는 PWA보다 앞서서는 안 됩니다.

우리는 Tinder가 높은 성취를 이룬다는 것을 알고 있지만, 최고의 빠르고 빠른 로딩 성능과 완전한 반응성, 번거로움 없는 사용자 모험을 제공하는 Tinder PWA를 구축하기 위해 많은 노력을 기울였습니다.

그런 다음 그들은 대체된 모바일 앱에 비해 작은 PWA를 개발하는 솔루션을 사용했습니다. 서비스 작업자와 함께 최신 웹 앱 기술을 능숙하게 활용하고 JavaScript 성능을 최적화함으로써 팀은 Tinder의 야심찬 목표를 충족할 수 있었습니다.

틴더 PWA의 영향

지금까지 구축된 가장 빠른 PWA 중 하나는 Tinder 개발자 팀이 처음부터 끝까지 강력한 프로젝트를 완료하는 데 3개월이 걸렸습니다. Tinder PWA의 UI 라이브러리는 React가 사용되었고 상태 관리는 Redux가 담당했습니다.

Tinder 온라인이라고도 하는 새로운 웹 경험은 PWA를 채택하고 최상의 용도로 맞춤화하기 위한 현명한 움직임임을 입증했습니다. 그리고 그 결과는 매우 기대할만한 가치가 있었습니다.

Tinder의 돈은 확실히 흔들리는 것을 좋아하지 않았습니다. 이러한 데이터 비용이 많이 드는 환경에 대한 초기 투자의 10%만큼 낮은 비용으로 필수 Tinder 경험 패키지가 제공되었을 때 그들의 노력은 결실을 맺었습니다.

사용자 경험 검토

• 상호 작용은 신속하고 반응적인 방식으로 이루어집니다.
• 직관적이고 손쉬운 사이트 탐색은 고정되고 단순화되어 하단 배너를 상징하여 전체 사이트를 완전히 단순하게 만듭니다.
• 너무 빠르고 너무 많이 왼쪽으로 스와이프하면 지연이 발생할 수 있습니다.
• 주변을 경험 한 후 Tinder PWA는 홈 화면에 추가하고 팝업 메시지를 수신하라는 메시지를 표시합니다.
• PWA가 아직 이 생태계로부터 완전한 지원을 받지 못했기 때문에 iOS에서의 경험이 개입될 수 있습니다.

결과

Tinder PWA는 스와이프, 프로필 편집 및 사용자당 세션당 소요 시간과 관련하여 기본 앱을 능가했습니다. 작은 크기로 가는 것은 이전 11.9초에 비해 4.69초의 최소화된 로딩 시간으로 Tinder가 승리하는 데 도움이 되었으며, 역대 최고 수준의 사용자 참여, 재참여 및 더 많은 오른쪽 스와이프로 이어졌습니다.

Tinder PWA는 이 분야 최고의 프로그레시브 웹 앱 중 하나로 불려 왔습니다. 모바일 앱과 비교했을 때 이탈률은 15%, 클릭률은 30% 증가해 월등한 성능을 보였다.

데이터가 모든 것을 말해 줍니다. 사용자는 더 많이 스와이프하고, 더 많이 메시지를 보내고, 더 많이 프로필을 편집하고, 기본 앱보다 PWA에서 더 많은 시간을 보냅니다. 더 많은 참여, 더 적은 불필요한 단계.

Tinder와 같은 PWA를 어떻게 구축할 수 있습니까?

Tinder가 PWA로 계속해서 나아가는 방법을 알고 싶습니까? 더 말하지 마. 그들이 한 일에 대한 요약을 알려드리겠습니다.

프레임워크 공개

경로 수준에서 코드 분할

처음에 Tinder 앱은 불필요한 코드가 포함된 크고 두툼한 모놀리식 JavaScript 번들을 사용했으며 사용자가 앱에서 핵심 상호 작용을 할 때 모두 부팅되었습니다.

그 때 전체 경험이 지연되었습니다. 따라서 그들은 코드 분할을 사용하여 가장 필요한 코드를 선행 코드로 전송하기로 결정하고 느린 로딩 코드는 시간이 되기 전에 필요한 만큼 휴식할 수 있습니다.

Tinder는 아이디어를 실행하기 위해 React Router와 React Loadable에 의존했고, 앱이 구성 기반 정보 렌더링으로 모든 경로를 중앙 집중화하면서 최상위 코드 분할을 간단하게 시작했습니다.

React Loadable은 React에서 코드 분할을 위한 James Kyle의 작은 구성 요소 중심 라이브러리에 속합니다.

다른 컴포넌트를 생성할 수 있는 기능이므로 번들을 컴포넌트로 나누기가 쉽습니다. 그 결과 166KB가 아닌 101KB 크기의 번들이 생성되었으며 DCL은 5.46초에서 4.69초로 단축되었습니다.

React 16은 결국 이전 버전에서 React의 번들 크기를 최소화하는 업그레이드를 릴리스해야 했으며, 이는 롤업으로 더 나은 패키징 및 사용되지 않는 코드 교체를 위한 전략의 일부입니다.

Tinder는 또한 여러 경로에서 장기간 단일 번들 파일로 라이브러리 청크를 위한 인기 있는 웹팩인 CommonsChunkPlugin에 의존했습니다.

장기 자산 캐싱

[chunkhash]를 사용하여 정적 리소스 출력 및 웹팩으로 장기간 사용을 추출하여 각 파일에 캐시 버스터를 첨부합니다.

예산 목표를 충족하면서 3G 연결이 느린 모바일 장치에서도 경험이 잘 예약되도록 하기 위해 Tinder는 "실제 성능 예산"으로 기본 규칙을 설정했습니다.

코어 및 공급업체 청크에 대해 155KB 예산이 시행되었지만 느린 로딩 청크는 55KB로 제한되었고 나머지는 35KB였습니다. 이 최소 설정을 통해 사이트를 빠르게 시작하고 대화식으로 유지할 수 있습니다.

CSS는 성능 저하를 피하기 위해 20KB 제한에 있어야 했습니다.

CSS 전략

Tinder는 Atomic CSS에서 재사용할 수 있는 고품질 CSS 스타일을 만들었으며 초기 페인트 및 기타 스타일시트 기반 로딩 CSS와 인라인 상태를 유지했습니다. 20KB gzipped는 중요한 스타일의 상단에 있지만 최근에는 11KB 미만으로 다시 작성할 수 있습니다.

Workbox 및 오프라인 자산 캐싱 사용

Tinder는 Workbox Webpack 플러그인과 함께 네트워크 차단을 활용하여 App Shell과 주요 정적 자산, 즉 CSS와 모든 핵심, 공급업체 및 매니페스트 번들을 캐싱했습니다.

이렇게 하면 사용자가 두 번째 방문자 위로 돌아올 때 앱 시작 속도가 빨라지고 모든 반복 방문은 모든 네트워크 연결에서 탄력적입니다.

프리미엄 PWA 서비스

참고로, 프로그레시브 웹 앱이라는 이름은 적절한 사용을 위해 모든 세부 사항을 활용하고 사용자 정의하기 위해 각 브랜드가 최신 기술을 활용하도록 PWA가 열려 있다는 사실에서 유래했습니다.

온라인 상점을 위해 Tinder PWA와 같은 고품질 작업을 생성하려는 경우 프리미엄 PWA 서비스를 우선적으로 사용하십시오. 모든 웹 개발자와 디자이너가 PWA 개발에 익숙해지는 것은 아닙니다.

PWA 기관에 의존할 때 전문 지식과 수년간의 경험은 고려해야 할 중요한 사항입니다. 여기 Tigren에서 우리는 Google이 이 개념을 세상에 소개한 이후로 PWA를 연구해 왔습니다. 우리는 여러 글로벌 전자 상거래 비즈니스와 함께 PWA를 주도하고 번창했습니다.

Tigren은 Magento PWA 솔루션을 전문으로 하는 베트남 기반의 프리미엄 PWA 개발 제공업체입니다. 우리의 목표는 온라인 비즈니스가 가장 예산 효율적인 방법으로 목표를 달성하도록 돕는 것입니다.

PWA에 대해 문의 사항이 있으면 [email protected] 으로 메시지를 보내주십시오.

주요 내용

PWA는 모든 웹사이트 운영의 미래 표준으로 간주됩니다. 더 많은 잠재 고객을 유치하고 더 많은 청중에게 도달하고 방문자와 소통하며 대다수가 전환하도록 하는 동안 더 오래 머물게 합니다.

속도와 편의성에 대한 특별한 조정을 통해 Tinder PWA는 더 많은 사용자가 웹에서 상호 작용하고 더 많은 일치 항목을 만들고 더 많은 앱 변환기를 유도하여 Tinder 기능에 대한 더 큰 시장 채택이라는 목표를 달성했습니다.