On boude souvent les builders pour les problèmes de performance. Creative Elements continue son ascension sur PrestaShop en version 2.11 avec des nouveautés pour améliorer les performances globales de votre boutique ! La fin des préjugés sur les constructeurs de pages ?
Pourquoi les builders ont une mauvaise image de performance ?
Que ce soit Creative Elements sur PrestaShop, Divi sur WordPress, Elementor, etc., tous ont une image compliquée en ce qui concerne l’impact sur les performances et la vitesse d’un site internet, notamment à cause de la quantité de code qu’ils peuvent générer, mais pas seulement.
C’est vraiment super de pouvoir éditer son site via une interface intuitive et de voir les changements s’afficher directement sans coder, mais… pour que tout cela fonctionne, les builders embarquent pas mal de fichiers, de scripts et chargent un excédent de code pour assurer leur fonctionnement.
Exemple pour charger une image :
On peut largement l’améliorer en le plaçant dans une <section>, mais on peut aussi coder un bloc simplement avec ça.
Pour ajouter un widget image dans Creative Elements, il faut d’abord le placer dans une section qui comporte une colonne, et ensuite, toutes les balises nécessaires au bon chargement de l’image sont générées.
Cependant, tout ce code permet non seulement un chargement facile des éléments sans avoir à coder, mais aussi d’ajouter des animations, de rendre l’élément adapté pour le mobile, et d’ajouter de nombreuses fonctionnalités autour de l’image, au-delà de son simple chargement.
Au fil des années, les développeurs adaptent leurs constructeurs pour améliorer les performances globales, et c’est notamment le cas de Creative Element savec la version 2.11.
Creative Elements optimise les performances en front-office
Cette mise à jour se concentre sur les performances en front-office de votre site et non sur la partie administration. La priorité est l’expérience utilisateur mais aussi augmenter le Core Web Vitals pour le SEO de votre site PrestaShop.
Négligez pas les performances de votre serveur
Même si les développeurs ont fait de gros efforts sur ces optimisations, il est essentiel que la base de votre boutique en ligne, à savoir l’hébergeur, soit de qualité. Oubliez les serveurs perso ou les offres ‘performance’ chez OVH… Optez plutôt pour quelque chose de fiable comme 772424 ou encore O2switch.
Si votre serveur n’est pas adapté, peu importe les efforts d’optimisation que vous ferez, les résultats seront peu visibles.
Accélération du Temps de Réponse Initial (TTFB)
Le TTFB (Time to First Byte) correspond au temps que met un site web à commencer à charger après qu’on a cliqué sur un lien. Plus ce délai est court, plus la page s’affiche rapidement. Un TTFB rapide améliore l’expérience utilisateur et aide au bon référencement du site.
Dans cette nouvelle version, Creative Elements a considérablement réduit le temps de réponse de 30 à 70 %. Cela a été rendu possible grâce à des optimisations de la base de données et du code PHP, ainsi qu’à l’ajout d’une nouvelle fonctionnalité appelée Element Cache.
Ces améliorations permettent d’accélérer significativement le chargement des pages, offrant ainsi une expérience utilisateur plus fluide tout en optimisant les performances du site pour un meilleur référencement.
Des nouvelles options de cache dans Creative Elements
Pour améliorer le temps de réponse, une nouvelle option de cache est disponible dans les réglages du module. Plusieurs choix s’offrent à vous pour réduire l’utilisation de la mémoire et améliorer les performances de 38 à 80 %, selon les sites.
Chaque widget chargé par un visiteur sur votre site Prestashop ne sera pas rechargé à chaque fois. De plus, la fonctionnalité fait la distinction entre les widgets dynamiques et statiques afin de ne pas mettre en cache des éléments inutiles.
Allez dans Creative Elements > réglages > onglet avancés > Cache d’éléments pour l’activer.
Il est important d’activer le cache uniquement après avoir terminé de modifier les éléments de votre boutique, afin de pouvoir observer les résultats en front-office.
Une fois activé, vous pouvez également le gérer individuellement par widget dans l’onglet Avancé.
Le chargement prioritaire des backgrounds
Vous pouvez rencontrer des problèmes de performance lors du chargement des images en arrière-plan sur PrestaShop, car elles se chargent généralement après les autres éléments de la page.
Creative Element a ajouté une option pour gérer le chargement des images d’arrière-plan, leur permettant d’être chargées en priorité. Cela accélère le chargement et améliore l’aspect visuel de votre boutique.
Précharger les typographies et amélioration du javascript
La version 2.11 de Creative Elements a automatisé le préchargement des polices personnalisées hébergées localement. Cela permet de télécharger les fichiers de polices dès le début du processus de chargement, garantissant ainsi une expérience visuelle plus fluide et cohérente dès le départ. Un peu comme les backgrounds, ça évite d’avoir des effets sur les typographies juste au chargement de la page en question.
Les développeurs ont vraiment allégé la bibliothèque JavaScript du module. En remplaçant certaines bibliothèques par du code natif, ils ont réussi à rendre le site plus léger, ce qui a permis de réduire la bande passante de 12 Ko. En plus de ça, l’optimisation des fichiers JavaScript principaux a libéré 111 Ko supplémentaires (comme mentionné sur le site de Creative Element). Tout ça contribue à rendre le site plus rapide et à améliorer les performances SEO.
Optimisation des sliders avec Swiper.js
Ce builder PrestaShop utilise la bibliothèque swiper.js pour les diaporamas. Avec la mise à jour 2.11, il est désormais possible d’activer le chargement différé des images dans vos sliders, ce qui contribue à optimiser le temps de chargement des pages.
Vous devez définir la première image du diaporama en “eager” et les autres en “lazy”. Pour cela, ouvrez les paramètres d’une image du slider (la petite roue crantée) et accédez aux informations de l’image.
Plus d’excuse pour ne pas utiliser Creative Element ?
Il y a quelques semaines, la possibilité de créer des modèles de pages catégorie a été introduite, et aujourd’hui, ils proposent des options d’optimisation des performances. Il ne faut pas oublier que d’autres facteurs, comme les modules supplémentaires, le serveur, ou encore l’utilisation d’images trop lourdes, peuvent également impacter la vitesse de votre site.
De manière générale, le builder offre suffisamment de fonctionnalités pour vous permettre d’avoir une boutique en ligne performante tout en personnalisant le design selon vos besoins.