Comment optimiser la vitesse de chargement et les performances du slider dans le thème Astra

Ajout de la page d'accueil du thème Astra CurseurSi la taille de l'image de la diapositive est trop grande, si les ressources ne sont pas compressées ou si le chargement des scripts n'est pas optimisé, la vitesse de chargement de la page d'accueil est souvent ralentie, ce qui entraîne des retards de page, un ralentissement du premier écran, ce qui affecte l'expérience globale du visiteur et le classement dans les moteurs de recherche.

Afin de résoudre ces problèmes, cet article présente un ensemble de méthodes d'optimisation réalisables sous plusieurs angles, tels que l'optimisation des images, la gestion des scripts, la sélection des plugins, les paramètres du cache, etc., pour vous aider à atteindre un équilibre entre les performances de chargement et l'effet visuel lors de l'utilisation de diaporamas dans les thèmes Astra.

I. Choisir un plugin de slider léger

Pas tousPlugin diaporamaTous conviennent aux sites qui recherchent la rapidité. Les curseurs suivants sont recommandés de préférence :

• Smart Slider 3La structure de l'application est très complète mais simplifiée pour la plupart des utilisateurs.

• MetaSliderInterface simple, adaptée aux besoins d'affichage de base

• Gutenslider: Conçu pour les éditeurs Gutenberg

• Elementor est livré avec un composant slider: Correspondance Astra + Elementor le plus compatible

En revanche, les plugins dotés de fonctionnalités complexes (tels que Slider Revolution) sont visuellement riches mais prennent plus de temps à charger, ce qui les rend inadaptés à la construction de sites légers.

Optimiser les ressources des images du Slider

Les images constituent la principale ressource des diaporamas. La clé de l'amélioration de la vitesse est la compression et le contrôle du format :

• Il est recommandé de limiter la largeur de l'image à 1920px
• utiliser WebP mise en formeRemplace JPG/PNG

• Il est recommandé de limiter la taille d'une seule image à Moins de 200KB
• Compression par lots avec des outils tels que TinyPNG, Squoosh, etc.

En outre, le fait de ne charger que la première image et de retarder le chargement des autres réduit le poids initial de la page.

III. activer le chargement paresseux

De nombreux plugins de performance proposent un chargement paresseux des images, qui ne charge les images suivantes que lorsque l'utilisateur passe dans la zone de diaporama.

Recommandé :

• LiteSpeed Cache
• WP Rocket
• Perfmatters
• FlyingPress

Ces plugins reconnaissent automatiquement les images des curseurs et retardent le chargement afin d'améliorer la vitesse de rendu du premier écran.

IV. retard dans l'exécution des scripts du slider

Les composants des curseurs reposent souvent sur des animations JavaScript ou des scripts de basculement, qui ont tendance à bloquer le fil principal de la page.

Recommandation :

• Retarder l'exécution du script JS du Slider avec le Performance Plugin
• Ajouter JS lié au curseur à la liste des retards (Delay JS)

Si vous utilisez le plugin Flying Scripts, vous pouvez définir des mots-clés (par ex. slider.js) pour retarder l'exécution et réduire les blocages.

V. Contrôle de la complexité de la structure des curseurs

Réduire au minimum les hiérarchies de diapositives et les animations dynamiques :

• rester à l'intérieur 3 à 5 diapositives
• Chaque feuille ne contient qu'une image et un court texte.
• Désactiver l'automatismetournerFonctions visant à réduire la duplication des rendus

• Évitez de superposer plusieurs couches de vidéos, d'icônes, de boutons, etc.

Plus la structure est propre, plus le chargement est rapide et moins le rendu du front-end est sollicité.

Mise en cache et accélération CDN

Mise en cache et CDN Un outil indispensable pour l'optimisation des performances des curseurs.

Recommandations opérationnelles :

• Utilisez des plugins de mise en cache comme LiteSpeed Cache, WP Rocket, etc.

• Hébergement d'images et de scripts JS sur des CDN comme Cloudflare, BunnyCDN

• Activer la mise en cache des objets pour réduire les requêtes à la base de données

La mise en cache réduit la charge de PHP et de la base de données pour chaque requête de page, et les CDN augmentent les vitesses de chargement globales.

Seven, optimisation des sliders mobiles

Slider est mal adapté pour les mobiles et est recommandé :

• Utiliser des bannières statiques au lieu de sliders sur mobile
• Les utilisateurs d'Elementor peuvent mettre en place un module de curseur "desktop only".
• Simplifier le contenu des diapositives pour mobile afin d'éviteranimeCommutation avec plusieurs images

Le fait de maintenir un chargement mobile propre et net permet d'améliorer les performances d'accès et la lisibilité.

VIII Résumé

Astra La structure elle-même est légère, mais l'ajout d'un slider peut entraîner un gonflement des ressources de la page et une dégradation de la vitesse s'il n'est pas géré correctement. Tant que vous choisissez raisonnablement les plug-ins de slider, les images compressées, les scripts retardés, le cache, et que vous combinez le chargement paresseux et la technologie CDN, vous pouvez équilibrer l'effet visuel et les performances.

Si votre site utilise un slider pour présenter un contenu clé, c'est le moment de l'optimiser.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.