Boostez la vitesse de votre site Divi avec des fonctionnalités anti-ballonnement

Rifat Divi Tutorials Sep 13, 2021

Avec la nouvelle version de Divi , vous disposez de la puissance ultime d'un puissant constructeur de pages. Désormais, Divi est plus léger et dispose de fonctionnalités intégrées pour éliminer les ballonnements. Vous pouvez utiliser les fonctionnalités anti-ballonnement de Divi pour accélérer votre site Web. Il s'agit d'une petite partie de la procédure d'optimisation des performances massives de Divi grâce à laquelle vous pouvez atteindre le score ultime de vitesse de page Google.

Aujourd'hui, nous discuterons de 4 fonctionnalités anti-ballonnement -

  • Cadre de module dynamique
  • CSS dynamique
  • Icônes dynamiques
  • Optimisation JavaScript avec les bibliothèques JavaScript dynamiques

Ne perdons pas plus de temps et voyons combien Divi nous réserve .

Solution Divi pour le problème de ballonnement

Définition du gonflement du site Web

Toute page Web statique composée de HTML et de CSS généraux avec un code JavaScript complexe qui a rendu la page plus lourde qu'elle ne le devrait - est appelée ballonnement Web. Étant donné que les pages Web sont simplement du texte balisé, elles ne devraient occuper que quelques kilo-octets. Mais les éléments de page critiques tels que les fenêtres contextuelles, les effets de mouvement et les animations graphiques rendent la page lourde.

Créer des sites Web incroyables

Avec le meilleur constructeur de page Elementor

Commencer Maintenant

Les thèmes WordPress comme Divi utilisent dynamiquement des pages HTML qui s'affichent sur des fichiers PHP. Nous devons donc ici considérer la taille et l'efficacité des fichiers PHP comme un gonflement du Web.

Simplement, charger de manière inefficace plus de fichiers sur une page qui sont inutiles et rend la page en surpoids que nécessaire - signifie que le site Web est gonflé.

Comment cela affecte la vitesse d'un site Web

Si une page doit charger plus de fichiers inhabituels en arrière-plan que ce qui se trouve sur la page, le chargement prend plus de temps. Par exemple, il y a une page qui n'a besoin que de 100 lignes de CSS mais la page a plus de 2000 lignes de codes, ce qui signifie que le temps de chargement de 1800 lignes est un gaspillage total.

Supposons encore une fois que vous utilisez 5 bibliothèques JavaScript pour exécuter une page de votre site Web où vous pouvez faire tout le travail avec 1. Il ne sert donc à rien d'utiliser 4 bibliothèques JavaScript inutiles. Notez qu'une bibliothèque JavaScript contient des milliers de lignes de code.

Outre CSS et Js, votre page Web s'exécute sur un fichier PHP qui contient une quantité massive de fonctions. Supposons que votre function.php a 20 000 lignes de code et des centaines de fonctions. Ainsi, la diffusion de contenu sur une page particulière exécute tout cela - c'est totalement inutile là où seuls quelques-uns d'entre eux sont nécessaires.

Résoudre les problèmes de ballonnement dans Divi

Le design de la Divi se modernise de jour en jour. Ainsi, progressivement, le problème de ballonnement augmentait également. Pour résoudre ce problème, une nouvelle fonctionnalité appelée logique "Anti-Bloat" a été appliquée qui peut complètement effacer ce problème. Avec cette fonctionnalité anti-ballonnement, Divi est désormais beaucoup plus rapide qu'avant et les utilisateurs peuvent continuer leurs activités de manière beaucoup plus efficace.

Que contient cette fonction anti-ballonnement

La fonction "anti-ballonnement" de Divi joue 4 rôles majeurs pour des pages définies -

Cadre de module dynamique : il résout les problèmes créés via les fichiers PHP en les optimisant. Ainsi, seules les fonctions et les codes nécessaires à l'exécution d'une page fonctionnent activement pour cette page.

CSS dynamique : il créera une feuille de style personnalisée qui ne comprendra que les codes CSS nécessaires au chargement d'une page. Pas de temps de chargement pour les fichiers CSS supplémentaires.

Bibliothèques Javascript dynamiques : il optimisera et créera dynamiquement un fichier script.js qui chargera la bibliothèque JS externe nécessaire à la page.

Icônes dynamiques : il chargera un sous-ensemble d'icônes utilisées sur la page, pas toutes les icônes utilisées pour le site Web.

Activez cette fonctionnalité en naviguant sur Divi

Comment les fonctionnalités anti-ballonnement fonctionneront

Comme nous le savons déjà, Divi a lancé une nouvelle fonctionnalité appelée « anti-ballonnement » pour réduire le temps de chargement des pages qui se produit à travers des lignes de codes non pertinentes. Voyons comment fonctionne cette fonctionnalité.

Framework PHP dynamique : fonctions

Divi suit ici une règle simple qui n'exécute que les fonctions qui en ont besoin. C'est une logique à toute épreuve qui effectue cette action.

Contrôle avant traitement

Fournir des données de votre serveur à votre site Web à l'aide de PHP dynamique est très simple et permet de gagner du temps. S'il constate qu'un composant ou une fonction est utilisé, il effectue un contrôle de vitesse sur le système et obtient tous les codes qui prennent en charge cet élément et les délivre en conséquence, et ne s'exécute pas tant que l'action n'est pas terminée.

Modules à la demande

Avec cette nouvelle fonctionnalité, les pages peuvent charger des modules de manière flexible. En raison de la logique anti-ballonnement de PHP, Divi ne traite que les shortcodes dont la page a besoin. Ainsi, par exemple, si vous avez 5 modules sur une page, Divi ne traitera que ces cinq, pas tous, et affichera et sortira ces cinq modules.

Fonctionnalités à la demande

Pour chaque fonctionnalité d'une page, Divi traite et charge automatiquement les modules. Plus précisément, ce système ne traite que les modules tels que les effets de défilement, les animations, les bordures et les options collantes qui sont utilisés sur la page. Elle s'applique également aux sections, lignes et colonnes.

CSS Daynamic

La feuille de style Divi maintient également la logique anti-ballonnement qui était utilisée dans le framework PHP. La fonctionnalité CSS de Divi est assez importante et crée souvent des gonflements inutiles sur les pages.

Chargement CSS basé sur la page

C'est ce qui se passe lorsqu'une page charge dynamiquement du CSS,

  • Il ne charge que les fichiers CSS qui doivent styliser le thème Divi. La taille du fichier ne dépasse pas 50 Ko.
  • Ensuite, il charge les fichiers CSS contenant le diagramme de conception de la page. Il n'ouvrira dynamiquement que les fichiers qui sont utilisés dans différentes sections de la page. Par exemple, pour une simple page d'accueil, il n'y aura que 30ko de fichier.

Ici, c'est maintenant 80ko de fichier CSS sans aucun ballonnement. Avant, la taille était de 900 Ko et presque pleine de ballonnements.

Ici, cette page d'accueil a été réalisée à l'aide du constructeur Divi et vous pouvez voir comment les fichiers CSS natifs de cette page sont en action pour afficher les composants de la page.

JavaSript dynamique

Nous utilisons généralement JavaScript pour améliorer les performances du site Web, simplifier et moderniser nos conceptions. À l'aide de JavaScript dynamique, Divi peut importer des fonctions Js depuis une bibliothèque externe. Ainsi, il y aura un codage moins complexe sur la page et sûrement la page sera plus légère et plus rapide qu'avant. Les fonctionnalités anti-ballonnement fonctionnent par page, vous n'avez donc pas à vous soucier des dommages de fonctionnalité, Divi s'en chargera.

Voici un petit exemple de la façon dont les fonctionnalités lightbox et sticky sont prises en charge par la fonction anti-ballonnement de Divi.

Icônes dynamiques

Les icônes sont une partie très importante d'une page Web. Divi permet un moyen intelligent de charger les sous-ensembles de polices requis pour cette page au lieu de charger toutes les icônes. Fondamentalement, chaque page Web a trois sous-ensembles d'icônes,

  • Base - Icônes par défaut du thème Divi du module.
  • Social - Les médias sociaux suivent les icônes du jeu d'icônes de base.
  • Tout - Ensemble complet d'icônes où le sélecteur d'icônes peut sélectionner et utiliser celle de votre choix.

Si une page n'utilise pas de modules de médias sociaux ou d'icônes sélectionnées par le sélecteur d'icônes, la page utilisera un jeu d'icônes de base qui occupe 6 Ko d'espace. La taille augmentera un peu si nous incluons les icônes des réseaux sociaux.

Si nous utilisons un module de sélection d'icônes/de présentation, la taille totale de l'ensemble d'icônes peut aller jusqu'à 90 Ko.

Emballer

La fonction anti-ballonnement de Divi est décidément très utile. Cela rendra les sites Web Divi plus rapides et améliorera beaucoup l'expérience utilisateur. En apportant plus de puissance et de vitesse au site Web Divi , les utilisateurs bénéficient en permanence d'un meilleur support. Espérons que ces efforts se poursuivront. Si vous aimez cet article, partagez-le avec vos amis et faites-nous part de votre requête dans la section des commentaires.