Praktisch advies van de ontwikkelaars van GoodBarber om de snelheid van uw toepassing te optimaliseren

on 

Onze nieuwe generatie smartphones is gewend aan "onmiddellijke bevrediging", we worden steeds ongeduldiger, en dit is sterk voelbaar in de manier waarop we mobiele Toepassen op ons Telefoonnummer of tablet gebruiken.
Voor elke extra seconde die uw applicatie nodig heeft om te laden, daalt uw conversiepercentage met 7%. Met een steeds grotere keuze aan applicaties in de Stores, raakt het geduld van gebruikers op. Om uw gebruikers te behouden, is het essentieel dat uw applicatie snel werkt op uw computer of mobiel, en terecht. Toen Amazon bijvoorbeeld zijn laadtijd met 100 milliseconden verkortte, steeg zijn omzet met 1%!
U zult hier en daar lezen dat de ideale laadtijd voor een computer- of mobiele applicatie 2 seconden is. Dit is inderdaad een goed gemiddelde. In dit artikel bekijken we hoe u dicht bij of onder deze drempel kunt blijven.

We vroegen een van onze hoofdontwikkelaars, Sergio, om advies over hoe u de snelheid van uw GoodBarber app kunt optimaliseren.
Hier zijn zijn 3 aanbevelingen:

Tip #1: Ga altijd voor een eenvoudig, elegant Ontwerp

Ontwerp is wat uw toepassing uniek, mooi en... begrijpelijk maakt! Maar een mooi Ontwerp maken is niet voor iedereen weggelegd, en sommige mensen zijn er beter in dan Overige. Daarom heeft GoodBarber zich omringd met de best mogelijke ontwerpers. Hun missie: kant-en-klare sjablonen bedenken en maken die ergonomisch, elegant en uniek zijn, aangepast aan de eisen van de nieuwe generatie. Het doel is om u in staat te stellen snel en gemakkelijk een applicatie te maken.
Mobiel ontwerp heeft de afgelopen tien jaar een lange weg afgelegd, en terecht. Webgiganten zoals Apple en Google hebben een grote invloed gehad. U herinnert zich misschien nog de dagen van het skeuomorfe ontwerp op iOS, waarbij afbeeldingen met echte effecten het paradigma waren voor het maken van gebruikersinterfaces op mobiel. Deze manier van denken, die nu verouderd is, heeft plaatsgemaakt voor modernere benaderingen zoals Flat Ontwerp en Material Ontwerp. Wat deze nieuwe concepten gemeen hebben, is een minimalisme dat draait om eenvoudige, overzichtelijke en moderne elementen. Het resultaat is een duidelijk Ontwerp en lichtere Pagina's. Hoe lichter Pagina's zijn, hoe sneller ze worden weergegeven.
Wanneer u een toepassing maakt via GoodBarber, wordt er automatisch een Ontwerp op uw project Toepassen, zodat u niet vanaf nul hoeft te beginnen. Dit ontwerp wordt willekeurig gekozen uit een groep thema's die door ons ontwerpteam zijn gemaakt, afhankelijk van de categorie van uw toepassing. Besteed als ontwikkelaar vooral aandacht aan het Ontwerp van dit Sjabloon. Het volgt moderne ontwerpprincipes en helpt daarom om ervoor te zorgen dat uw toepassing snel is. Als u de sjabloon wilt aanpassen, blijf dan dicht bij de geest van de sjabloon, zodat u de voordelen van een lichtgewicht, krachtig en elegant ontwerp behoudt.
Als u er de voorkeur aan geeft om uw toepassing aan te passen met achtergrondafbeeldingen of andere zware elementen, wees u dan bewust van de negatieve effecten die dit kan hebben op de snelheid van uw toepassing.

Praktische tip: Blijf dicht bij het lichtgewicht concept van het Sjabloon. Alles in GoodBarber is ontworpen om u in deze richting te wijzen. Neem bijvoorbeeld de Global Style tool, waarmee u de kleur van het thema, typografie, knoppen en alle Overige Ontwerp-elementen kunt aanpassen. Al deze aanpassingselementen zijn zo ontworpen dat ze geen negatieve invloed hebben op de snelheid van uw app.

Tip #2: Kies de juiste Secties voor het gewenste Effecten


Als u erover nadenkt, is de Structuur van een GoodBarber-toepassing vrij eenvoudig te begrijpen. Het bestaat uit secties, die elk een specifieke functionaliteit hebben. Er zijn er ongeveer 1000 waarmee u uw toepassing kunt maken. Het is dus belangrijk om te begrijpen hoe u ze het beste kunt gebruiken.
U hebt misschien gemerkt dat u met GoodBarber met verschillende soorten inhoud kunt werken: Blog, video's, Foto's, podcasts, nuttige punten, formulieren, enz.
Voor elk type inhoud stelt u zichzelf dezelfde vraag: hoe geeft u de Inhoudslijst en de inhoud zelf weer.
Dit is waar GoodBarber echt tot zijn recht komt. Afhankelijk van de sectie kunt u kiezen uit verschillende sjablonen voor het weergeven van de lijst met inhoud en de inhoud zelf. Welke oplossing er ook wordt geboden, het zal altijd lichtgewicht zijn .
Afhankelijk van het doel van de sectie, hebt u toegang tot speciale instellingen om het aan uw behoeften aan te passen en het snel en efficiënt te laten werken.
Daarom is het belangrijk om de juiste Secties te gebruiken om het gewenste resultaat te krijgen.
U moet bijvoorbeeld een grote hoeveelheid informatie weergeven. De Secties Bloggen en Bloggen zijn hier perfect voor. Het is ontworpen om de Lijst met de eerste 24 items in deze sectie te laden. En dan de volgende 24 items te laden als de gebruiker naar beneden scrollt, enzovoort.
De hoeveelheid gegevens die wordt ontvangen om de Lijst weer te geven, blijft beheersbaar. De gebruikerservaring blijft aangenaam, omdat 24 Blog items genoeg zijn om door te navigeren voordat de 24 extra items nodig zijn, zodat uw toepassing niet onnodig vertraagd wordt.
Praktische tip: Gebruik een Sectie altijd op de beste manier en houd de Structuur zeer eenvoudig. Onthoud dat hoe meer secties u invoegt, hoe langer het duurt om uw toepassing op het scherm van de gebruiker weer te geven. Als u secties gebruikt waarin u veel elementen kunt weergeven, maar deze elementen worden alleen weergegeven als dat nodig is, dan krijgt u een applicatie die rijk is aan Inhoud, maar zeer snel weer te geven is.

Hier volgt een korte samenvatting om u te helpen de juiste Secties te kiezen:
  • Inhoudsectie: artikel, video, kaart, foto enz.
Deze hebben lichte parameters en zijn de ideale oplossing voor het weergeven van een grote hoeveelheid inhoud.
  • Menu-sectie:
Dit is een sectie die Andere secties bevat. Het fungeert als een navigatie-element in de applicatie. Daarom bevat het, wat Ontwerp betreft, talrijke Instellingen. Het is zeer veelzijdig. Maak er goed gebruik van. Als u er veel van gebruikt in uw toepassing, en als u voor elk ervan een achtergrondafbeelding hebt geconfigureerd in plaats van een effen kleur om toegang te krijgen tot de subsecties, dan zal het gewicht erg hoog zijn. Neem een stap terug en zoek een slimmere manier om uw toepassing te organiseren.
  • HTML- en Plug-in-secties
Deze secties gebruiken webelementen buiten de applicatie zelf.
Webelementen zijn inherent langzamer dan native componenten. Native componenten communiceren rechtstreeks met het besturingssysteem, terwijl webelementen communiceren met de browser, die op zijn beurt communiceert met het besturingssysteem. Ze voegen een extra communicatieniveau toe en maken uw native applicatie langzamer.
  • Sectie Over
Met deze sectie kunt u informatie presenteren. Net als de Menu-sectie is deze erg veelzijdig en dezelfde concepten zijn hier van toepassing.

Tip #3: Weet wanneer u uw sollicitatie moet updaten

Wanneer een gebruiker uw applicatie voor de eerste keer opent, worden bepaalde onderdelen naar hun apparaat gedownload.
Als het uw native applicatie is, zullen ze een binair bestand downloaden van een Store (.ipa bestand voor iOS, .apk bestand voor Android). Zodra het bestand op het apparaat van de gebruiker is geïnstalleerd, kan de native applicatie beginnen werken.
Als het uw Progressive Web App (PWA) is, zal de webbrowser van het apparaat ook bepaalde elementen downloaden (manifest, service worker, enz.). Zodra deze gedownload zijn, kan de Progressive Web App (PWA) beginnen werken.

Met "beginnen te werken" bedoelen we dat de applicatie kan weergeven wat u in uw GoodBarber backoffice hebt gemaakt. Laten we, om de zaken te vereenvoudigen, zeggen dat er 2 dingen moeten gebeuren op het apparaat van de gebruiker. Ten eerste moet het Ontwerp van de toepassing worden gerenderd. Ten tweede moet dit Ontwerp gevuld worden met uw Inhoud.
Wanneer u uw toepassing naar de Stores stuurt, bevat het binaire bestand het Ontwerp en de Inhoud die geconfigureerd werden toen u op de knop "Mijn toepassing compileren" in de backend klikte. Dit zijn de "pre-rendering" elementen.
Het belangrijkste doel van deze pre-rendering elementen is om altijd een werkende Versie van uw applicatie weer te geven op het apparaat van de gebruiker, zelfs als de applicatie zonder internetverbinding wordt gestart.
Zodra uw applicatie in de Stores is gepubliceerd, zal deze evolueren. U brengt wijzigingen aan vanuit uw backoffice: nieuwe Inhoud, wijzigingen in het ontwerp, enz.
Dit is waar GoodBarber (bijna) magisch werkt: voor 90% van de wijzigingen die u in uw applicatie aanbrengt, hoeven gebruikers geen nieuwe versie van het binaire bestand te downloaden. Ze ontvangen automatisch de laatste wijzigingen.

Het werkt als volgt: telkens wanneer u op de groene knop"Update" in het menu Publiceer> Update> Krant klikt, worden er verschillende configuratiebestanden gegenereerd door de GoodBarber server .
Wanneer de toepassing op het apparaat van de gebruiker wordt gestart, wordt aan de GoodBarber servers gevraagd of de meest recente Versie van deze configuratiebestanden al is gedownload. Als dat zo is, wordt de toepassing onmiddellijk gestart, anders informeert de server de toepassing over het verschil tussen wat er al beschikbaar is op het apparaat en wat er is geüpdatet op de server. De toepassing downloadt en bewaart deze delta voor toekomstig gebruik en wordt onmiddellijk daarna gestart.
Is het u ooit opgevallen dat er van tijd tot tijd een witte balk op het splash-scherm van uw applicatie verschijnt? Deze verschijnt alleen wanneer de applicatie een delta in de configuratiebestanden inhaalt. Hoe groter de delta, hoe langer het duurt om de toepassing bij te werken en te starten (en hoe langer de voortgangsbalk).
Hoe kunt u, nu u dat weet, de laadtijd van uw applicatie verbeteren?

Bedenk dat al uw gebruikers een andere delta hebben. De verschillen zijn specifiek voor elke gebruiker en hangen af van hun betrokkenheid bij uw applicatie. Stel dat u een maand lang elke dag kleine updates verstuurt. Een zeer toegewijde gebruiker, iemand die uw applicatie heel vaak opstart, zal altijd zeer kleine delta's downloaden, omdat hij elke dag het verschil met de vorige dag zal downloaden. De applicatie zal snel opstarten.
Iemand die uw applicatie niet regelmatig opent, bijvoorbeeld een maand lang, zal alle wijzigingen downloaden die zijn aangebracht sinds de applicatie voor het laatst werd geopend, waardoor het langer duurt voordat de applicatie start dan bij de betrokken gebruiker.
Praktisch advies:
1/ Stuur regelmatig kleine updates in plaats van een groot aantal veranderingen in één keer.
2/ Houd uw gebruikers betrokken. Pushmeldingen zijn een goede manier om dit te doen.
Laten we het voorbeeld nemen waarbij u al 3 maanden lang dagelijks kleine updates verstuurt. Zoals we eerder hebben uitgelegd, verloopt alles soepel voor toegewijde gebruikers. Maar hoe zit het met nieuwe gebruikers, mensen die uw applicatie voor het eerst downloaden?
Vergeet niet dat toen u uw applicatie compileerde, pre-rendering elementen werden opgeslagen in het binaire bestand. In dit voorbeeld zijn deze elementen 3 maanden oud. Wanneer een nieuwe gebruiker uw applicatie uit de Store downloadt en opstart, moet hij veel inhalen. De eerste ervaring van de gebruiker zal niet goed zijn en hij zal lang moeten wachten voordat hij uw applicatie kan gebruiken.
De beste manier om dit probleem op te lossen is om uw applicatie opnieuw te compileren en een nieuw binair bestand in te dienen bij de Store.
Het is ook de moeite waard om te onthouden dat:
  • Toepassingen met weinig updates worden beschouwd als van slechte kwaliteit en worden daarom slecht gerangschikt.
  • Het ontwikkelingsteam werkt voortdurend aan het verbeteren van het GoodBarber-platform: bugs oplossen, nieuwe functies toevoegen, software bijwerken, enz. Het Blok "Wat is er nieuw" onderaan uw dashboard geeft een overzicht van de updates en verbeteringen die door het technische team van GoodBarber zijn aangebracht. Bij alle wijzigingen wordt duidelijk aangegeven welk gebied is beïnvloed: welke sectie, native of PWA, iOS of Android, welke functie. Als geen van de wijzigingen op u van toepassing is, hoeft u niet opnieuw te compileren.
Praktisch advies:
1/ Hercompileer en dien een update in voor uw Toepassen als u veel wijzigingen hebt aangebracht sinds de laatste compilatie.
2/ Controleer de sectie "Wat is er nieuw" van het dashboard en compileer opnieuw als er verbeteringen beschikbaar zijn voor de secties die u in uw toepassing gebruikt.
3/ Onze ontwikkelaars raden aan om 3 tot 4 keer per jaar opnieuw te compileren en een update in te dienen.
Tegenwoordig zijn applicaties een uitstekend medium om uw publiek te bereiken en uw bedrijf te stimuleren. Maar als ze niet werken zoals verwacht, of als ze traag zijn, loopt u het risico gebruikers te verliezen. Het is essentieel om snel de verschillende redenen aan te pakken waarom uw app snelheid dreigt te verliezen. Door Sergio's advies en dat van onze experts op te volgen, zal uw applicatie altijd optimaal presteren.
VOOR MEER INFORMATIE: