Met de nieuwe Divi- versie heb je de ultieme kracht van een machtige pagebuilder. Divi is nu lichter en heeft ingebouwde functies om een opgeblazen gevoel te verwijderen. U kunt de anti-bloat-functies van Divi gebruiken om uw website sneller te maken. Dit is een klein onderdeel van Divi's enorme prestatie-optimalisatieprocedure waarmee u de ultieme Google-paginasnelheidsscore kunt behalen.
Vandaag bespreken we 4 anti-bloat-functies:
- Dynamisch modulekader
- Dynamische CSS
- Dynamische pictogrammen
- JavaScript-optimalisatie met dynamische JavaScript-bibliotheken
Laten we niet meer tijd verspillen en kijken hoeveel meer Divi voor ons heeft.
Divi-oplossing voor bloat-probleem
Definitie van website-bloat
Elke statische webpagina gemaakt van algemene HTML en CSS met complexe JavaScript-code die de pagina zwaarder heeft gemaakt dan zou moeten, wordt webbloat genoemd. Omdat webpagina's gewoon gemarkeerde tekst zijn, zouden ze slechts enkele kilobytes in beslag moeten nemen. Maar kritische pagina-items zoals pop-ups, bewegingseffecten en grafische animaties maken de pagina zwaar.
Maak geweldige websites
Met de beste gratis paginabuilder Elementor
Begin nuWordPress-thema's zoals Divi gebruiken dynamisch HTML-pagina's die worden weergegeven op PHP-bestanden. Dus hier moeten we de grootte en efficiëntie van PHP-bestanden beschouwen als webbloat.
Het inefficiënt laden van meer bestanden op een pagina die onnodig zijn en de pagina te zwaar maken dan nodig is, betekent dat de website opgeblazen is.
Hoe het de snelheid van een website beïnvloedt
Als een pagina meer ongebruikelijke backend-bestanden moet laden dan op de pagina staat, duurt het laden langer. Er is bijvoorbeeld een pagina die slechts 100 regels CSS nodig heeft, maar de pagina heeft meer dan 2000 regels codes, wat betekent dat de laadtijd van 1800 regels een totale verspilling is.
Stel nogmaals, u gebruikt 5 JavaScript-bibliotheken om een pagina van uw website te draaien waar u al het werk met 1 kunt doen. Het heeft dus geen zin om 4 nutteloze JavaScript-bibliotheken te gebruiken. Merk op dat een JavaScript-bibliotheek duizenden regels code bevat.
Afgezien van CSS en Js, draait uw webpagina op een PHP-bestand dat een enorm aantal functies bevat. Laten we aannemen dat uw function.php 20.000 regels code en honderden functies heeft. Dus het leveren van inhoud aan een bepaalde pagina voert al deze uit - dat is helemaal niet nodig als er maar een paar nodig zijn.
Bloat-probleem oplossen in Divi
Het design van de Divi wordt met de dag moderner. Dus geleidelijk aan nam ook het bloatprobleem toe. Om dit op te lossen, is een nieuwe functie genaamd "Anti-Bloat"-logica toegepast die dit probleem volledig kan wissen. Met deze anti-bloat-functie is Divi nu veel sneller dan voorheen en kunnen gebruikers hun activiteiten op een veel efficiëntere manier voortzetten.
Wat zit er in deze anti-bloatfunctie?
Divi's "anti-bloat"-functie vervult 4 belangrijke rollen voor bepaalde pagina's -
Dynamic Module Framework: het lost problemen op die zijn gemaakt via PHP-bestanden door ze te optimaliseren. Dus alleen de functies en codes die nodig zijn om een pagina te laten lopen, werken actief voor die pagina.
Dynamische CSS: het zal een aangepast stijlblad bouwen dat alleen bestaat uit CSS-codes die een pagina nodig heeft om te laden. Geen laadtijd voor extra CSS-bestanden.
Dynamische Javascript-bibliotheken: het optimaliseert en maakt dynamisch een script.js-bestand dat de externe JS-bibliotheek laadt die nodig is voor de pagina.
Dynamische pictogrammen: het laadt een subset van pictogrammen die op de pagina worden gebruikt, niet alle pictogrammen die voor de website worden gebruikt.
Schakel deze functie in door Divi . te navigeren 
Hoe Anti-Bloat-functies werken?
Zoals we al weten heeft Divi een nieuwe functie gelanceerd genaamd "anti-bloat" om de laadtijd van pagina's te verminderen die optreedt door irrelevante coderegels. Laten we eens kijken hoe deze functie werkt.
Dynamisch PHP Framework: Functies
Divi volgt hier een eenvoudige regel die alleen die functies uitvoert die nodig zijn. Het is een volledig bewezen logica die deze actie uitvoert.
Controle vóór verwerking
Het leveren van gegevens van uw server naar uw website met behulp van dynamische PHP is zeer eenvoudig en tijdbesparend. Als het constateert dat een component of functie wordt gebruikt, voert het een snelheidscontrole uit op het systeem en haalt alle codes op die dit item ondersteunen en levert deze dienovereenkomstig, en wordt pas uitgevoerd als de actie is voltooid.
Modules op aanvraag
Met deze nieuwe functie kunnen pagina's flexibel modules laden. Vanwege de anti-opgeblazen logica van PHP verwerkt Divi alleen die shortcodes die de pagina nodig heeft. Dus als je bijvoorbeeld 5 modules op een pagina hebt, zal Divi alleen die vijf verwerken, niet allemaal, en die vijf modules tonen en uitvoeren.
Functies op aanvraag
Voor elke feature op een pagina verwerkt en laadt Divi automatisch modules. Om precies te zijn, dit systeem verwerkt alleen modules zoals scroll-effecten, animaties, randen en plakkerige opties die op de pagina worden gebruikt. Het is ook van toepassing op secties, rijen en kolommen.
Daynamic CSS
Divi-stylesheet handhaaft ook de anti-bloat-logica die werd gebruikt in het PHP-framework. Divi CSS-functionaliteit is behoorlijk groot en zorgt vaak voor onnodige bloats op pagina's.
CSS laden op basis van pagina
Dit is wat er gebeurt als een pagina dynamisch CSS laadt,
- Het laadt alleen CSS-bestanden die het Divi-thema moeten opmaken. De bestandsgrootte is niet meer dan 50kb.
- Vervolgens laadt het CSS-bestanden met een ontwerpdiagram voor de pagina. Het zal alleen die bestanden dynamisch openen die in verschillende secties van de pagina worden gebruikt. Voor een eenvoudige startpagina is er bijvoorbeeld slechts een bestand van 30 kb.
Hier is het nu 80 kb CSS-bestand zonder enige bloat. Vroeger was de grootte 900 kb en bijna vol met bloats.
Hier is deze homepage gemaakt met behulp van Divi builder en je kunt zien hoe native CSS-bestanden voor deze pagina in actie zijn om paginacomponenten weer te geven.
Dynamische JavaSript
Over het algemeen gebruiken we JavaScript om de prestaties van de website te verbeteren en onze ontwerpen te vereenvoudigen en te moderniseren. Met behulp van dynamisch JavaScript kan Divi Js-functies importeren uit een externe bibliotheek. Er zal dus minder complexe codering op de pagina zijn en de pagina zal zeker lichter en sneller zijn dan voorheen. Anti-bloat-functies werken per pagina, dus u hoeft zich geen zorgen te maken over functionaliteitsschade, Divi regelt het.
Hier is een klein voorbeeld van hoe lightbox- en sticky-functies worden verzorgd door de Divi-anti-bloat-functie.
Dynamische pictogrammen
Pictogrammen zijn een zeer belangrijk onderdeel van een webpagina. Divi biedt een slimme manier om subset-lettertypen te laden die voor die pagina nodig zijn in plaats van alle pictogrammen te laden. In principe heeft elke webpagina drie subsets van pictogrammen,
- Basis - Divi-thema standaardpictogrammen van module.
- Sociaal - Sociale media volgen pictogrammen uit de basispictogramreeks.
- Alles - Volledig pakket pictogrammen waar de pictogramkiezer de gewenste kan selecteren en gebruiken.
Als een pagina geen sociale-mediamodules of pictogrammen gebruikt die door de pictogramkiezer zijn gekozen, gebruikt de pagina een basispictogramset die 6 kb aan ruimte in beslag neemt. De grootte zal iets groter worden als we social media-iconen opnemen.
Als we een icon pick / blurb-module gebruiken, kan de volledige grootte van de pictogrammenset oplopen tot 90 kb.
Afsluiten
De anti-opgeblazen functie van Divi is zeker erg handig. Dit zal de Divi- websites sneller maken en de gebruikerservaring aanzienlijk verbeteren. Door meer kracht en snelheid naar de Divi- website te brengen, krijgen gebruikers voortdurend betere ondersteuning. Hopelijk zullen deze inspanningen worden voortgezet. Als je dit bericht leuk vindt, deel het dan met je vrienden en laat ons je vraag weten in het commentaargedeelte.
