Hoe de laadsnelheid van pagina's in Bubble optimaliseren

7 min read

Het optimaliseren van de laadtijden van pagina's is een cruciale factor voor elke website, vooral als je werkt met no-code platforms zoals Bubble. De laadsnelheid van een pagina heeft niet alleen invloed op de gebruikerservaring, maar ook op je positie in zoekmachines. In dit artikel bespreken we hoe je de laadsnelheid van pagina's in Bubble kunt optimaliseren aan de hand van praktische stappen.

‍

01 Gebruik minder elementen

Bij het bouwen van een Bubble app geldt de algemene regel: hoe minder elementen, hoe beter. Elk element dat je toevoegt verhoogt de complexiteit van het DOM (Document Object Model), dat Bubble moet renderen. Hoe meer elementen Bubble moet laden, hoe trager de pagina wordt. Dit is vooral belangrijk voor apps met veel herhalende elementen of dynamische inhoud.

In plaats van meerdere sets elementen te maken voor desktop-, tablet- en mobiele weergaven, kun je een enkele set gebruiken en hun zichtbaarheid en lay-out regelen met conditionals.

➤ In plaats van een verschillende koptekst te ontwerpen voor elke schermgrootte, kun je bijvoorbeeld één element gebruiken en voorwaarden instellen zoals "Huidige paginabreedte > 992" om het uiterlijk aan te passen. Deze methode vermindert het totale aantal elementen en vereenvoudigt de paginastructuur.

02 Verberg standaard optionele elementen

Verberg elementen standaard als ze alleen zichtbaar zijn onder bepaalde omstandigheden. Een goed voorbeeld hiervan is wanneer je elementen alleen op een bureaublad wilt laten verschijnen. In plaats van ze meteen te laden, kun je ze verbergen en tonen met behulp van voorwaarden. Op deze manier laadt het DOM sneller omdat er in eerste instantie minder elementen zichtbaar zijn, en de benodigde elementen worden daarna geladen.

➤ Als je bijvoorbeeld een grote koptekst hebt die alleen nodig is op een desktop, verberg deze dan standaard en gebruik de voorwaarde "Huidige paginabreedte > 992" om hem zichtbaar te maken als de pagina breed genoeg is.

‍

03 Vervang "Pagina wordt geladen" door "Doen wanneer de voorwaarde waar is" op SPA-websites

Het veelvuldig gebruik van de gebeurtenis "Pagina is geladen" in een applicatie met één pagina (SPA) kan de prestaties verminderen. Deze gebeurtenis treedt op telkens wanneer er een overgang is met "Ga naar pagina", zelfs wanneer de gebruiker gewoon navigeert tussen tabbladen op dezelfde pagina. In plaats van te vertrouwen op "Pagina is geladen", is het beter om de gebeurtenis "Doen wanneer de voorwaarde waar is" te gebruiken.

➤ Hier is een stap-voor-stap voorbeeld voor het optimaliseren van overgangen tussen secties zoals "Gebruikers" en "Gebruikersdetails":

Maak eerst een nieuwe aangepaste status aan op het element "Gebruikersgegevens". Geef deze status de naam "Geladen" met als standaardwaarde "Nee".
Stel vervolgens twee "Doen wanneer de voorwaarde waar is" workflows in met een frequentie die is ingesteld op "Elke keer":1️⃣ De eerste workflow wordt geactiveerd wanneer "Gebruikersgegevens zichtbaar zijn" en "Geladen is nee". Deze workflow zal dan de status "Geladen" op "Ja" zetten, wat aangeeft dat deze sectie is geladen. In deze workflow keten kun je nog een "Ingeschakelde toestand" actie toevoegen om dynamische standaardwaarden in te stellen voor de informatie van de gebruiker, zoals "Afbeelding", enz.2️⃣ De tweede workflow triggert wanneer "Gebruikersgegevens niet zichtbaar zijn" en "Geladen is ja". Dit zet "Geladen" op "Nee" en bereidt het voor op de volgende keer dat de sectie moet worden geladen.

Door deze methode te gebruiken, bereik je drie belangrijke voordelen:

Je zorgt ervoor dat de status dynamisch wordt beheerd voor elke gebruiker, waardoor het laden van gepersonaliseerde gegevens mogelijk wordt.
Er worden snellere laadtijden bereikt omdat de voorwaarden worden gecontroleerd zodra alle gegevens die nodig zijn om een echte waarde te genereren zijn geladen, in plaats van bij elke paginaovergang.
Eenvoudiger debuggen omdat het alleen geactiveerd wordt wanneer het geactiveerd moet worden en je niet door elke "Pagina is geladen" workflow hoeft te klikken als je de "Stap-voor-stap" modus gebruikt in de debug modus.

Deze aanpak maakt je Bubble applicatie vlotter en doeltreffender, door resources alleen te richten op relevante omstandigheden, in plaats van onnodige gebeurtenissen te triggeren.

‍

04 Het gebruik van plug-ins beperken

Probeer het aantal plug-ins dat je gebruikt tot een minimum te beperken. Waarom? Elke plug-in introduceert zijn eigen bibliotheken, kopteksten en elementen, die mogelijk niet volledig geoptimaliseerd zijn. Hoewel plug-ins de functionaliteit kunnen verbeteren, voegen ze ook complexiteit toe en vertragen ze de laadtijd van pagina's. Hoe minder plug-ins je gebruikt, hoe eenvoudiger je site zal zijn.

Als een plug-in een breed scala aan elementen bevat, overweeg dan om een plug-in te vinden die zich alleen richt op de specifieke functionaliteit die je nodig hebt. Dit kan het volume van de plug-in aanzienlijk verminderen en de algemene prestaties verbeteren.

05 Optimaliseer je afbeeldingen

Afbeeldingen zijn vaak de grootste boosdoeners als het gaat om trage paginasnelheden. Je kunt het beste afbeeldingen gebruiken die kleiner zijn dan 1MB. Let daarnaast op met vectorafbeeldingen (SVG-indeling), omdat deze vaak groter zijn dan PNG's en de laadtijd negatief kunnen beïnvloeden.

Als een afbeelding te groot is (meer dan 1MB), overweeg dan om deze te comprimeren om de grootte te verkleinen, maar doe dit alleen als het nodig is om de afbeeldingskwaliteit niet aan te tasten. Het optimaliseren van afbeeldingsformaten en -groottes kan een aanzienlijk verschil maken in de paginasnelheid.

‍

06 Variabelen gebruiken om het laden van gegevens te optimaliseren

Een variabele in Bubble is in wezen een standaard of herhalende groep met een gegevensbron waarnaar kan worden verwezen vanuit andere elementen. Dit is vooral nuttig wanneer meerdere elementen dezelfde gegevens nodig hebben, zodat je dubbele zoekopdrachten kunt vermijden en de prestaties verbeteren.

Laten we een veelvoorkomend voorbeeld nemen: je hebt een kleine marktplaats website met een zoekpagina die een herhalende groep producten, een invoerveld en een fuzzy search plug-in als zoekmachine bevat. Meestal maak je twee gegevensbronnen voor "Zoeken naar": één voor de herhalende groep en één voor de fuzzy search. Hierdoor verdubbel je echter de hoeveelheid gegevens die de gebruiker moet ophalen, wat de prestaties van uw site drastisch kan beïnvloeden, met name op mobiele apparaten of bij gebruik van client-side filtering.

Om dit te optimaliseren, kun je een enkele onzichtbare herhalende groep maken (vaak geplaatst in een onzichtbare pop-up) en de gegevensbron instellen met een "Voer een zoekopdracht uit voor". Zodra deze groep de gegevens heeft, kan elk ander element dat dezelfde informatie nodig heeft, gewoon verwijzen naar de gegevensbron van deze variabele. Zo wordt er maar één keer gezocht, waardoor de laadtijd korter wordt en de gebruikerservaring wordt verbeterd.

Door variabelen op deze manier te gebruiken, worden je gegevens doeltreffend geladen zonder dubbele zoekopdrachten, wat de prestaties van je app en het laden van je pagina aanzienlijk kan verbeteren, vooral voor gebruikers op tragere netwerken of mobiele apparaten.

Door deze optimalisatie toe te passen, verbeter je de prestaties van je Bubble app aanzienlijk. Deze aanpak zorgt voor snellere laadtijden, een soepelere gebruikerservaring en de mogelijkheid om je app doeltreffend te schalen, zelfs als deze complexer wordt. Een goed geoptimaliseerde site is essentieel om gebruikers betrokken te houden en je bedrijfspotentieel te vergroten. 🚀

‍

Heb je nog vragen?

Bij Minimum Code helpen we je om je project te optimaliseren met behulp van doeltreffende ontwikkelmethoden. Met onze ervaren ontwikkelaars wordt de realisatie van je site goed georganiseerd en gebouwd op een solide basis.