Creative Elements 2.11 : Améliorations majeures des performances et de la vitesse

Creative Elements 2.11 : Améliorations majeures des performances et de la vitesse

Dans le monde du e-commerce en constante évolution, chaque seconde compte. Découvrez Creative Elements 2.11, notre dernière mise à jour conçue pour améliorer significativement la vitesse et l’efficacité de votre boutique PrestaShop.

Lorsqu’il s’agit de la vitesse globale de votre site, nous nous concentrons souvent sur les performances front-end et les optimisations visant à améliorer les temps de chargement des pages. Cependant, il est tout aussi important de prendre en compte les performances côté serveur, là où le processus de chargement de votre site commence.

Améliorations majeures

Réduction du Time To First Byte (TTFB)

Dans cette nouvelle version, nous avons significativement réduit le TTFB de 30 % à 70 % grâce à des optimisations de la base de données et du PHP, ainsi qu’à l’introduction d’une nouvelle fonctionnalité Element Cache.

Qu’est-ce que le TTFB ?

TTFB signifie Time To First Byte. Il mesure le temps que le navigateur met à recevoir le premier octet de données depuis le serveur. Plus ce délai est long, plus l’affichage de votre page est retardé. Lire la suite

Fonctionnalité Element Cache

Des tests de performance internes montrent des améliorations significatives grâce à la nouvelle fonctionnalité de cache, réduisant l’utilisation de la mémoire de 32 Mo à 10 Mo et améliorant le TTFB de 38 % à 80 %. Cette fonctionnalité stocke le rendu des widgets sur le serveur après le premier affichage, permettant aux visiteurs suivants de charger le contenu sans recalculer le code du widget. Elle distingue également les widgets statiques et dynamiques afin d’éviter la mise en cache de données inutiles.
Pour activer la fonctionnalité Element Cache, rendez-vous dans :
Back-office PrestaShop → Creative Elements → Réglages → onglet Avancé.
Vous pouvez y définir la durée de mise en cache des données de votre site.

Element Cache - paramètres globaux

Vous pouvez également modifier le paramètre par défaut d’un widget spécifique en activant ou désactivant l’option « Element Cache » dans l’onglet Avancé de votre panneau d’édition. La valeur par défaut est désactivée pour les widgets dynamiques et activée pour les éléments statiques.

Element Cache d’un widget spécifique

Autres améliorations des performances

Préchargement des ressources critiques

Le chargement efficace d’une page ne dépend pas uniquement du temps de réponse du serveur, mais aussi de la rapidité avec laquelle le contenu s’affiche dans le navigateur de l’utilisateur. Le préchargement des ressources critiques, telles que les images d’arrière-plan et les polices, peut améliorer considérablement la métrique Largest Contentful Paint (LCP).

Qu’est-ce que le LCP ?

Le LCP mesure le temps nécessaire pour afficher le plus grand élément visible (image ou bloc de texte) dans la zone visible de l’écran, à partir du moment où l’utilisateur accède à la page. Lire la suite

Pour améliorer le LCP, nous nous concentrons sur le préchargement des ressources critiques — les éléments situés au-dessus de la ligne de flottaison et immédiatement visibles lorsque l’utilisateur arrive sur votre page. Voici comment Creative Elements 2.11 améliore ce processus :

Chargement prioritaire des images d’arrière-plan

La première section d’une page d’accueil contient souvent une bannière avec une image d’arrière-plan et un texte. Les images d’arrière-plan se chargent généralement plus tard dans le processus de rendu, ce qui peut retarder l’affichage du contenu. Creative Elements 2.11 introduit une technique permettant d’augmenter la priorité de chargement de ces images.

Nouveau contrôle de chargement: Cette option est disponible dans tous les éléments permettant de définir une image d’arrière-plan. En l’activant, vous permettez aux images de se charger plus tôt, améliorant ainsi la vitesse de chargement perçue.

Préchargement des images d’arrière-plan

Préchargement des polices

Les polices sont également des ressources critiques pouvant impacter l’expérience de chargement. Lorsqu’elles ne sont pas préchargées, les utilisateurs peuvent observer un « clignotement du texte » ou un « flash de texte non stylisé » (FOUT), le navigateur utilisant temporairement des polices système.

Préchargement automatique des polices: Dans Creative Elements 2.11, nous avons automatisé le préchargement des polices personnalisées auto-hébergées. Cela garantit que les fichiers nécessaires sont chargés dès le début, offrant une expérience fluide et visuellement cohérente.

Améliorations JavaScript

Avec l’évolution des navigateurs, certaines fonctionnalités auparavant dépendantes de bibliothèques JavaScript peuvent désormais être implémentées en JavaScript natif. La bibliothèque 'waypoints.js', utilisée pour les interactions liées au scroll, a été remplacée. Cette suppression réduit l’utilisation de bande passante de 12 Ko. De plus, les optimisations des fichiers JavaScript principaux ont permis de réduire leur taille de 111 Ko, améliorant les performances frontend et les scores SEO.

Mise à jour de Swiper.js avec lazy-loading natif

Dans Creative Elements 2.11, nous avons intégré une mise à jour de la bibliothèque Swiper.js utilisée pour les carrousels. Cette version prend désormais en charge le lazy-loading natif des images fourni par les navigateurs.

Astuce :

Dans le widget Image Carousel, vous pouvez définir le lazy-loading image par image. Si votre carrousel est visible dès le chargement, vous pouvez définir la première image en « Eager » et les suivantes en « Lazy » pour optimiser les performances.

Carrousel produit avec le nouvel effet « Cards »

Étude de cas : succès d’un utilisateur précoce

Vincent Cluizel, propriétaire de Fuzco, a constaté des améliorations significatives de la vitesse de son site après la mise à jour vers Creative Elements 2.11.

  • Le Time To First Byte (TTFB) de la page d’accueil est passé de 1478 ms à 781 ms, soit une amélioration de 47 % côté serveur.
  • La page catégorie, auparavant chargée en 1243 ms, se charge désormais en 914 ms.
  • Le temps de chargement de la page produit est passé de 1620 ms à 924 ms.
Early Adopter - fuzco.

Creative Elements 2.11 apporte des améliorations majeures en matière de vitesse et de performance à votre boutique PrestaShop. Grâce à l’optimisation du TTFB, aux nouvelles fonctionnalités de cache et aux optimisations côté client, votre boutique offre une expérience d’achat plus rapide et plus efficace.

Comment mettre à jour ?

Creative Elements v2.11 est disponible dès maintenant. Vous pouvez effectuer la mise à jour directement via votre gestionnaire de modules afin de profiter immédiatement de ces nouvelles fonctionnalités.

Le processus de mise à jour prend tout en charge automatiquement, vous permettant de reprendre rapidement la création de vos pages sans interruption.

Chargez plus vite. Améliorez les performances. Convertissez davantage.

Explorer d’autres mises à jour