Pinterest PWA: Creșterea performanței mobile în mod corect

Dacă sunteți în căutarea unei soluții pentru a accelera creșterea afacerii dvs. de comerț electronic, trebuie să vedeți postări care vă sugerează să investiți în M-commerce și PWA. Aceste sugestii se bazează pe numere reale, pe care vă puteți baza. De la creșterea conversiilor pe dispozitive mobile până la îmbunătățirea performanței site-ului care duce la o experiență mai bună pentru utilizator, dezvoltarea PWA este o potrivire perfectă pentru strategia dvs. de comerț M. Pentru a afla mai multe despre aceasta, vă invităm să vizitați studiul de caz de astăzi al Pinterest PWA: Cum să utilizați această aplicație web viitor-next pentru a crește performanța mobilă și a vă mări rentabilitatea investiției în timp.

O prezentare generală a Pinterest

Fiind o platformă socială pentru iubitorii de imagini, cei care caută inspirație și cei care caută idei, Pinterest le permite tuturor să se alăture și să se aventureze prin pachetele lor de idei pentru rețete, idei de decor pentru casă, idei de ținute, citate încurajatoare și animale drăguțe, si multe altele.

Fiecare postare de pe Pinterest se numește pin. Există miliarde de pini pe Pinterest, iar această platformă acționează ca un motor de descoperire vizuală, deoarece pinii necesită să încărcați sub formă de jpg sau png, mai degrabă decât text. Puteți salva pini pe panourile private sau publice și vă puteți păstra inspirația organizată într-un singur loc, astfel încât data viitoare să puteți recupera cu ușurință ceea ce căutați.

Pinterest a fost fondat de Paul Sciarra, Evan Sharp și Ben Silbermann în urmă cu 12 ani. Pinterest se referă la sine drept „catalogul de idei al lumii”. Datorită Pinterest, oamenii au o modalitate mult mai ușoară de a găsi idei chiar și atunci când acestea nu au fost încă numiți.

Prin reducerea pașilor de la descoperire la conversie, Pinterest are mai multe șanse să transforme browserele în clienți potențiali și clienții potențiali în vânzări mai rapid decât majoritatea site-urilor de social media. Peste 433 de milioane de persoane sunt active pe Pinterest pe lună, cu aproximativ 10 milioane de vizitatori unici, ceea ce o face una dintre platformele cu cea mai rapidă creștere.

De ce Pinterest și PWA se unesc?

Totul a început pentru că Pinterest avea un public internațional pe care să-l supravegheze. Prin urmare, au apelat la internetul mobil. Pinterest era conștient de faptul că aplicația și site-ul său web nu erau la cele mai bune performanțe optimizate. Pe măsură ce peisajul online crește, trebuiau să facă ceva pentru a se relaxa de concurență.

Cercetarea utilizatorilor lor de web mobil neautentici le permite să vadă puterea slabă de conversie de 1% din experiența lor web veche și lentă în înscrieri, autentificări sau instalări de aplicații. Tehnologiile aplicațiilor web au evoluat rapid în acel moment, ceea ce le-a dus la un decalaj considerabil în îmbunătățirea ratei de conversie a site-ului lor.

În 2015, Google a introdus PWA ca soluție pentru a aduce cea mai mare valoare atât comercianților, cât și utilizatorilor finali. Pinterest a ușurat ideea unde să investească pentru o nouă experiență web mobilă.

Iată cum ar putea furniza PWA:

• Pentru utilizatori: PWA încearcă să îmbunătățească experiența utilizatorului la scară globală, ceea ce înseamnă că site-ul dvs. mobil va economisi lățime de bandă și se va încărca rapid și receptiv, în ciuda faptului că locuiți în locuri cu conexiuni la internet reduse sau cu procesare limitată a datelor. Interacțiunile rapide, fluide și fără întreruperi ale site-ului fac toată diferența, conducând o călătorie plăcută.
• Pentru comercianți: economisirea costurilor de dezvoltare a aplicațiilor duplicate, deoarece PWA rulează printr-un browser pentru a funcționa pe mai multe sisteme de operare. PWA poate acționa ca o aplicație nativă, dar poate oferi și comercianților șanse de a prezenta site-urile mobile ale mărcilor lor pe pagina cu rezultate ale motorului de căutare, chiar și locuri de top cu o experiență bună pentru utilizator.

Provocările Pinterest care stimulează integrarea PWA

Datele au arătat că 80% dintre utilizatorii Pinterest au folosit site-ul pe browsere mobile în loc de o aplicație nativă. Deși rata de instalare a aplicației a crescut de-a lungul timpului, aceasta a venit cu defecțiunea: numeroase recenzii negative, nesatisfăcute și frustrate legate direct de web-ul lor mobil.

Cu peste jumătate dintre utilizatorii din afara SUA, construirea unui web mobil excelent cu lățime de bandă limitată și o viteză mare de încărcare poate ajuta utilizatorii globali să acceseze Pinterest mai ușor. De asemenea, a existat un procent mic de utilizatori neautentificați care au trecut la aplicația mobilă, care nu avea o experiență încântătoare în aplicația nativă.

Cu toate acestea, aplicația a adus în continuare un public mai mare, cu interacțiuni mai mari decât web-ul mobil. Conversia utilizatorilor nativi ai aplicației în web mobil nu a fost o sarcină ușoară. Dar Pinterest era mai ambițios decât atât.

Un alt lucru este că web-ul mobil anterior al Pinterest a necesitat minim 23 de secunde pentru a începe să interacționeze. Utilizatorii au analizat prezența Pinterest pe mobil înainte de transformarea din 2017 drept „un blestem rău pentru web-ul mobil”. Mai exact, peste 2,5 MB de JavaScript au fost trimise pentru suficient timp pentru a fi analizate și compilate înainte de stabilirea finală a firului principal pentru a rămâne interactiv.

Rezultatele Pinterest PWA

Despre Funcții

Pentru a rezolva timpul obositor de interacțiune, noul Pinterest PWA și-a redus sute de JavaScript, reducându-și pachetul de bază la 150 KB de la 650 KB inițiali. Mai mult, au reușit să ridice valorile critice de performanță. Timpul interactiv are nevoie de mai puțin de 6 secunde, iar prima vopsea a apărut după 1,8 secunde, redusă de la 4,2 secunde.

În general, web-ul mobil este acum mai ușor și mai receptiv. Platforma este plină de imagini, dar toate elementele sunt aliniate scurt și viu. Tranzițiile de pagină funcționează, de asemenea, bine conform așteptărilor lor.

Rezultatele

Transformarea din 2017 a generat o creștere de 103% a utilizatorilor activi săptămânal pe noul web mobil, an de an.

Pinterest PWA comparație cu vechiul web mobil:

• Cu 40% mai mare în timpul petrecut la fața locului peste 5 minute
• Creștere cu 44% a anunțurilor generate de utilizatori
• Creștere cu 50% a ratei de clic pe anunțuri
• Cu 60% mai mare în angajamentele de bază

Pinterest PWA comparație cu aplicația nativă:

• Cu 5% mai mare în timpul petrecut la fața locului peste 5 minute
• Creștere cu 2% a anunțurilor generate de utilizatori
• Rata de clic pe anunțuri a rămas
• Cu aproximativ 2-3% mai mare în angajamentele de bază

Rezultatele au dezvăluit cel mai mare secret al creșterii profitului din construirea unei prezențe online și ne-au confirmat convingerea că o experiență excelentă a utilizatorului conduce la un nivel impresionant de interacțiune cu utilizatorul, crescând conversiile în timp.

Pinterest PWA este din ce în ce mai aproape de a imita o aplicație nativă. Prin urmare, nu există modificări viabile ale funcționalității. Cu toate acestea, utilizarea stocării solicită utilizatorilor iOS 56 MB și utilizatorilor Android 9,6 MB pentru a oferi aceeași experiență pe care o oferă PWA, cu mai puțină sarcină pentru descărcarea de 150KB minificați și zipați. Toate mulțumită caracteristicii fantastice de adăugare la ecranul de pornire.

Ce poți învăța din transformarea aplicației mobile Pinterest?

Numele a fost „Proiect Duplo”, care a venit din inspirația simplității și accesibilității în vara lui 2017, când s-a născut o echipă de dezvoltatori de platforme web și ingineri de dezvoltare. Când au verificat performanța vechiului site pentru măsurători, web-ul lor mobil poate gestiona mai puțin de 10% din înscrieri, în timp ce web-ul desktop a făcut de cinci ori mai mult.

Ceea ce este special la acest proiect este că inginerilor Pinterest le-au luat doar 3 luni scurte pentru a construi, integra și lansa noul site mobil, de asemenea, cel mai mare PWA din lume. Deci, cum au făcut-o? Privind retrospectiv, ei au împărtășit aceeași îngrijorare de a fi primitori din punct de vedere la 2 ani după lansarea termenului Progressive Web App.

Dezvăluirea Cadrului

Gestalt este considerată perioada scurtă de creare și livrare a întregului proces rescris în funcțiile Pinterest. Această bibliotecă UI open-source îi ajută să livreze proiectul într-un sfert. Suita de componente de la Gestalt le permite să construiască un limbaj de design unic pentru a crea în mod constant și ușor pagini uimitoare, fără a atinge CSS.

Apoi a fost creată o altă suită numai pentru web mobil, cu componente specifice de aspect pentru anumite pagini distanțate. Pentru a obține o dezvoltare rapidă și rezistentă la erori, limitele implicite ale PageContainer trebuie să excludă FullWidth, excluzând limitele FixedHeader. Și React 16 a fost folosit pentru fiecare dezvoltare web care a avut loc la Pinterest.

Ei au acordat o atenție deosebită Service Worker, deoarece PWA își câștigă faima prin valorificarea utilizării convenționale cu bibliotecile Workbox pentru generare și gestionare. Pinterest prioritizează astăzi strategia cache-first pentru a modifica orice pachet JavaScript sau CSS și interfața de utilizare a shell-ului aplicației lor.

Cum au accelerat viteza

Performanța și viteza în special au fost epicentre de top în transformarea Pinterest. După optimizare, Pinterest a redus dimensiunea fișierului JavaScript de la 490 KB la 190 KB, efectuând de la nivelul implicit al împărțirii codului în rută, apoi a solicitat utilizarea unei componente <Loader> cu divizarea codului de la nivel de componentă.

Contul pe sistemul de preîncărcare din partea client-server funcționează, de asemenea, deoarece ajută la accelerarea încărcării, îmbunătățind încărcarea inițială a paginii și modificările rutei pe partea client.

Pentru a asigura o experiență rapidă, dar extrem de asemănătoare nativă, Pinterest s-a bazat pe magazinul redux normalizat, care este responsabil pentru schimbarea rutelor într-un moment apropiat, având un singur model sursă de adevăr, cum ar fi un Pin sau acțiunea utilizatorilor.

Într-o vedere concretă, vedeți doar un Pin cu conținut limitat. Îl veți citi mai întâi până când decideți să faceți clic pentru mai multe informații. În acest fel, suficient timp pentru ca detaliile să fie preluate de pe server. Toate acestea sunt posibile deoarece datele Pin sunt normalizate pentru mase.

Recomandări cheie

Pinterest PWA a preluat conducerea în adoptarea PWA și a reușit enorm. Ei au auzit plângerile utilizatorilor lor și și-au asumat responsabilitatea corespunzătoare, dezvoltând noul web mobil care funcționează și convertește aproape că seamănă cu ceea ce pot aduce aplicațiile native.

Sperăm că, prin acest studiu de caz inspirator, veți fi deschis la minte pentru a afla mai multe despre PWA și veți încerca să vedeți cum vă poate ajuta să rămâneți puternic și periculos. Dacă sunteți în căutarea unui expert de un deceniu în dezvoltarea PWA pentru Magento, platforma de comerț electronic cu cele mai bune rezultate în acest moment, nu uitați să verificați Tigren.

Pentru a afla mai multe despre soluțiile noastre premium Magento PWA, contactați Tigren și spuneți-ne unde aveți probleme.