Optimera hastigheten på din app

Utvecklares bästa praxis för att optimera hastigheten på din app.

Mobile har utbildat oss alla att förvänta oss att få vad vi vill, när vi vill. Effekterna av detta nya sätt att tänka kan även ses på det sätt vi interagerar med mobilappar. Med varje extra sekund din app tar att ladda, sjunker din omvandlingsfrekvens med 7%. Att hålla din app igång snabbt ett måste. Till exempel, när Amazon minskade sin laddningstid med 100-millisekund, deras intäkter ökar med 1%!

Och med så många alternativ som finns i butikerna idag, användare tålamod krymper. Du kommer att läsa här och där att den idealiska laddningstiden för en app är 2 sekunder. Det är ett bra genomsnitt faktiskt.

Vi kommer att se i detta blogginlägg hur man stannar nära eller under denna tröskel. Vi har bett en av våra ledande utvecklare från 3D Team Sthlm, om några råd om hur du optimerar hastigheten på din app.

Här är hans 3 bästa praxis tips:

Tips #1: alltid gynna en enkel men vacker design

Design är det som gör din app unik, vacker och… Förståeligt! Det är svårt att göra en bra design. Vissa människor är bättre på det än andra. Det är anledningen vi är omgiven av de bästa designers där ute. Deras uppdrag är att tillverka de bästa mallarna och de bästa design alternativen, så att du snabbt och enkelt kan skapa en bra app.

Mobile design har utvecklats mycket under de senaste 10 åren. Det har formats av webben jättar som Apple och Google. Kanske kommer du ihåg de gamla dagarna av skeuomorphic design på iOS-enheter, där verkliga bilder var paradigmet för att bygga mobila användargränssnitt. Detta sätt att tänka UI är nu föråldrad. Det har ifrågasatts av mer moderna metoder som platt design, material design och gillar. Vad dessa nya metoder har gemensamt är användningen av enkla former och minimala texturer. Förutom att producera stilren design, producerar det tekniskt mycket lätta sidor. Ju mindre storleken på en sida, den snabbaste det kommer att visas på en enhet.

När du registrerar dig för första gången för att skapa en ny app, tillämpas en standard design på din app, så att du inte börjar med ett tomt projekt. Denna design väljs slumpmässigt bland en grupp teman som skapats av vårt design team, enligt kategorin för din app. ägna särskild uppmärksamhet åt utformningen av mallen. Det är efter moderna design principer, och därmed bidrar till att göra appen beter sig snabbt. Om när du anpassar mallen du håller dig till andan i mallen, kommer du att hålla fördelarna med en lätt men ändå kraftfull och vacker design. Om du föredrar att anpassa din app med hjälp av bakgrundsbilder eller andra tunga element bör du vara medveten om de negativa effekter den kan ge på din apphastighet.

Den bästa praxis här är att hålla sig till andan i en lätt mall. Allt pekar du i denna riktning. Till exempel, ta mycket hjälpsamma verktyg som Global Style. De låter dig anpassa färgtema, typografi, knappar och alla andra designelement på en gång. Du väljer blandfärger, vectorial-tillgångar och andra lätta element för att anpassa din app.

Tips #2: Välj rätt sektion för önskat utfall

När du tänker på det, är strukturen på en app ganska lätt att förstå. Den är gjord av sektioner, varje sektion har ett dedikerat syfte. Det finns cirka 100 typer av avsnitt som du kan använda för att skapa din app. Det är viktigt att förstå vilken typ av sektion som bäst används för. Som du kanske har märkt att du kan arbeta med olika typer av innehåll: artiklar, videor, bilder, evenemang, podcasts, intressepunkter, blanketter, osv… För varje typ av innehåll står du alltid inför samma problem. Hur visas listan över mina avsnitts objekt och hur du visar själva objektet?

Det är där kraften som kommer i spel. Beroende på avsnittet kan du välja bland olika mallar för att visa listan med objekt och själva objektet. Den medföljande lösningen är alltid lätt. Beroende på syftet med avsnittet har du tillgång till dedikerade parametrar för att anpassa avsnittet efter dina behov samtidigt som det fungerar på ett snabbt och effektivt sätt. Det är därför det är viktigt att använda den högra sektionen för rätt önskat resultat.

Låt oss säga att du måste visa en stor mängd information. Artikeln avsnitt är perfekt för det. Det har utformats för att läsa in listan över de första 24 objekten i avsnittet. Och sedan Ladda 24 ytterligare objekt när användaren rullar ned och så vidare. Mängden data som tas emot för att visa listan är hanterbar. Användarupplevelsen är fortfarande bra eftersom 24 artiklar är tillräckligt för att bläddra innan du behöver 24 ytterligare artiklar, och som ett resultat, är hastigheten bevaras.

Den bästa praxis här är att använda varje avsnitt på rätt sätt och hålla en mycket enkel struktur för din app. kom ihåg att ju fler avsnitt du lägger, desto mer tar det tid att visa din app på användarens skärm. Om du använder avsnitt där du kan visa en hel del objekt, men dessa objekt visas bara när det behövs, du sluta med en innehållsrik app, men mycket snabbt att visa.

Här är snabb resumé för att hjälpa dig att välja rätt avsnitt:

  • Innehållsbaserade avsnitt: artikel, video, karta, Foto, etc.

De har ljus inställningar och är lösningen gå till för att Visa hög volym av innehåll.

  • Meny sektion

Det är ett avsnitt som innehåller andra avsnitt. Den används som ett navigeringselement i appen. Det är anledningen till att, när det gäller design, många parametrar är tillgängliga för det här avsnittet. Det är mycket mångsidig. Använd den klokt. Om du lägger många av dem i din app, och om för var och en av dem du har setup en bakgrundsbild i stället för en solid färg för att komma åt underavsnitten, kommer vikten att vara mycket hög. Gå tillbaka och hitta ett mer smart sätt att organisera din app.

  • HTML och plugins avsnitt

Dessa avsnitt anropar webbelement utanför själva appen. Av Nature Web Elements är långsammare än inhemska komponenter. Native komponenter prata direkt till operativsystemet, medan webbelement prata med webbläsaren, som talar till OS. De lägger till ett extra lager av kommunikation och gör din egen app något långsammare.

  • Om avsnitt

Med det här avsnittet kan du Visa en information. Det är en mycket mångsidig sektion, som meny sektionen, så samma råd gäller för det här avsnittet.

 

Tips #3: veta när du ska uppdatera din app

När en användare öppnar för första gången till din app, hämtas vissa tillgångar på sin enhet. Om det är din ursprungliga app, kommer de att ladda ner en binär fil från en butik (. IPA-fil för iOS,. APK-fil för Android). När filen har installerats på användarens enhet kan den inbyggda appen börja fungera. Om det är din PWA, enhetens webbläsare kommer sömlöst Ladda ner vissa tillgångar också (manifest, service Worker,…). När dessa tillgångar har hämtats kan PWA börja arbeta.

Med börja arbeta, menar vi att appen kan visa vad du har skapat från din backend. För att föreställa vad som händer på ett enkelt sätt, låt oss säga att 2 saker måste hända på användarens enhet. Först måste utformningen av appen återges. För det andra måste denna design fyllas med ditt innehåll.

När du skickar din app till butikerna, den binära filen innehåller design och innehåll som har ställts in vid den tidpunkt du trycker på knappen skapa min app på serverdelen. Vi kallar dem pre-rendering element. Huvudsyftet med dessa pre-rendering element är att alltid visa en fungerande version av din app på användarens enhet, även om appen lanseras utan en Internet-anslutning.

När du har skickat din app till butikerna kommer din app att utvecklas säkert. Du kommer att göra ändringar i den från din serverdel. Du lägger till innehåll, du justerar designen osv. VI arbetar på ett (magiskt) sätt att för 90% av de ändringar du gör i din app slutanvändarna inte behöver ladda ner en ny version av den binära filen. De får de senaste ändringarna av din app automatiskt. Här är hur det fungerar. Flera konfigurationsfiler genereras av backend varje gång du trycker på den gröna uppdatera-knappen från Publish > Update > Changelog-menyn.

När appen lanseras på användarens enhet, frågas det om servrar om den redan har hämtat den mest uppdaterade versionen av dessa konfigurationsfiler. Om ja, appen startar omedelbart, om inte, servern talar om för appen vad skillnaden är mellan vad som redan är tillgängligt på enheten och vad som är uppdaterat på servern. Appen laddar ner och lagrar denna delta för framtida bruk, och lanserar strax efter. Har du någonsin märkt en vit förloppsindikator visas då och då på din app splashscreen? Det visas bara när appen är ikapp med ett delta i konfigurationsfilerna. Ju större differential, desto längre tid det tar att uppdatera och sedan starta appen (och ju längre du ser förloppsindikator).

Vad kan du göra för att förbättra laddningstiden att veta denna information?

Tänk på att alla användare har en annan delta. Skillnaderna är specifika för en användare och beror på deras interaktion med din app. Låt oss säga att du skickar små justeringar av din app varje dag under en månad. En mycket engagerad användare, någon som lanserar din app mycket ofta, kommer alltid att ladda ner mycket små deltan, eftersom varje dag, kommer de att ladda ner skillnaden med dagen innan. Appen startar snabbt.

Någon som inte öppnar regelbundet din app, låt oss säga i en månad, kommer att ladda ner alla ändringar som inträffat sedan förra gången de öppnade appen, vilket gör att appen tar längre tid att lansera än den engagerade användaren.

Bästa praxis här är att:

1/Ship liten modifiering i stadig takt, i stället för en stor uppsättning ändringar på en gång.

2/Håll din användarbas inkopplad. Push anmälan är ett bra verktyg för att överväga att uppnå detta mål.

Låt oss säga nu att det har varit 3 månader som du har släppt små ändringar varje dag. Det kommer att vara sömlös för engagerade användare, som förklarats ovan. Men vad händer med nya användare, till personer som laddar ned din app för första gången?

Kom ihåg, när du trycker på skapa min app-knappen, pre-rendering element har lagrats i din binära fil. I vårt exempel är dessa pre-rendering element 3 månader gamla. När användaren laddar ner appen från affären och lanserade appen, kommer den att behöva komma ikapp med en stor delta. Den första lanseringen erfarenhet kommer inte att vara mycket bra. Användaren måste vänta extra tid för att börja interagera med din app.

Det bästa sättet att lösa det här problemet är att återskapa din app och skicka en ny binär till butikerna.

Det är också bra att tänka på att:

  • appar med sällsynta uppdateringar betraktas som dålig kvalitet och har därför lägre ranking. Var inte rädd för att återskapa och skicka in en uppdatering, men inget behov av att göra det alltför ofta.
  • Utvecklingsteamet arbetar ständigt med att förbättra plattformen: från Bug Fix, lägga till nya funktioner till programuppdatering. Den What ’ s New block längst ner på din Dashboard kommer att lista uppdateringar och förbättringar från Tech team. Alla ändringar kommer att tydligt visa vilket område som berörs: vilken sektion, Native eller PWA, iOS eller Android, vilken funktion. Om du inte berörs av någon av de ändringar, då inget behov av att återuppbygga.
Bästa praxis här är att:

1/återskapa och skicka en uppdatering av din app om du gjorde en hel del ändringar sedan förra gången du bygger den.

2/Kontrollera avsnittet Vad är nytt i instrumentpanelen och återskapa när vissa förbättringar är tillgängliga för de avsnitt som du använder i din app.

3/våra utvecklare rekommenderar att återuppbygga (regenerera) och skicka en uppdatering 3 till 4 gånger per år.

Nuförtiden är appar ett bra sätt att nå din målgrupp och öka din verksamhet. Men om de inte presterar som förväntat eller blir långsamma, kan du förlora användare. Det är viktigt att snabbt ta itu med de olika orsakerna till varför din app kan förlora hastigheten. Genom att följa de råd av Sergio och våra experter, kommer du att förbli på toppen av ditt spel.