Elementor 加载缓慢？图片与媒体优化完整指南

utiliser Elementor Lors de la construction de sites web WordPress, il est courant de rencontrer des pages qui s'ouvrent lentement, des réponses d'éditeurs lentes et des temps de chargement de prévisualisation longs. Outre les conflits entre plugins ou les paramètres de cache, les images et les ressources multimédias non optimisées sont également l'un des principaux facteurs contribuant à la lenteur du chargement dans Elementor.

Cet article traite des moyens d'optimiser les images et les ressources multimédias afin d'améliorer la vitesse d'ouverture des pages et les performances globales.

I. L'impact des images sur les performances d'Elementor

La structure des pages Elementor est basée sur des composants visuels, qui sont souvent chargés avec un grand nombre d'images d'arrière-plan, de graphiques rotatifs, de modules graphiques et de ressources vidéo. Si ces fichiers multimédias sonthors gabarit (bagages, cargaison, etc.)Les phénomènes suivants sont dus au fait que la taille de la page sera augmentée directement si elle n'est pas compressée ou si elle n'est pas appelée de manière raisonnable :

Temps de chargement du premier écran prolongé
La page est lente lorsqu'on la fait défiler
L'éditeur est bloqué au chargement

Par conséquent, l'optimisation des images est essentielle à la performance d'Elementor.

Deuxièmement, les méthodes pratiques d'optimisation des images

1. contrôler la taille des images téléchargées

Avant de télécharger les images, il est recommandé de recadrer le traitement en fonction des exigences d'affichage réelles. Par exemple, il est recommandé de recadrer les images en fonction des exigences d'affichage réelles :

L'image d'arrière-plan de la bannière peut être réglée sur 1920×1080 pixels.

Les images d'affichage mobile sont limitées à 800 pixels.
Les images de logos ou d'icônes ne doivent pas dépasser 200 x 200 pixels.

Le téléchargement direct d'images originales surdimensionnées peut sérieusement affecter la taille de la page.

2. utilisation d'outils de compression pour réduire la taille

Utilisation d'outils en ligne ou de plug-insImages compresséesest une opération clé pour améliorer la vitesse de chargement.

Les outils recommandés sont TinyPNG, Squoosh.app, les plugins optionnels Smush, ShortPixel,ImaginezToutes prennent en charge la compression par lots et préservent la qualité de l'image.

3. activer le chargement paresseux

La technologie de chargement paresseux permet aux images de ne commencer à se charger que lorsqu'elles entrent effectivement dans la zone de visualisation, ce qui réduit la pression exercée sur le premier écran.

Méthode 1 : Utiliser le chargement paresseux par défaut de WordPress (5.5 et plus)

A partir de WordPress 5.5, le système ajoute automatiquement l'option loading="lazy" Propriétés. Il n'est pas nécessaire d'activer cette fonction, seules les conditions suivantes doivent être remplies :

WordPress Système 5.5 ou supérieur (6.0 ou supérieur recommandé)

Les images sont téléchargées à l'aide de la bibliothèque multimédia du système et insérées dans la page par l'intermédiaire d'un composant image (par exemple, le module image standard d'Elementor).

Lorsque ces conditions sont remplies, l'image est chargée lorsqu'elle défile jusqu'à la position de la fenêtre, ce qui réduit la pression initiale sur les ressources de la page.

Méthode 2 : étendre le chargement paresseux à l'aide d'un plugin de mise en cache

Peut être jumelé avec par exemple WP Rocket ou des plugins comme LiteSpeed Cache pour contrôler davantage le comportement de chargement paresseux.

WP Rocket peut activer le chargement différé des images et des iframes, LiteSpeed Cache fournit également des paramètres de chargement paresseux pour les images, les vidéos et les images d'arrière-plan. La façon de procéder est généralement d'aller dans l'interface de paramétrage du plugin, d'activer l'interrupteur correspondant et de le sauvegarder.

4. l'utilisation de formats modernes tels que WebP

WebP Le format d'image est plus petit et se charge plus rapidement que les fichiers JPG ou PNG et est déjà compatible avec les principaux navigateurs.

Vous pouvez utiliser le plug-in de compression pour générer automatiquement une copie du WebP, ou vous pouvez configurer l'application CDN pour la conversion des formats. La vitesse de chargement globale des sites web compatibles WebP est considérablement améliorée.

Procédure (en utilisant ShortPixel comme exemple) :

Installez et activez le plugin ShortPixel Image Optimizer

Allez dans le backend [Settings] > [ShortPixel].
Cochez "Créer des images WebP".
Cochez "Délivrer des images de nouvelle génération en utilisant le CDN ShortPixel".

Enregistrez les paramètres et le plugin générera automatiquement une copie WebP de l'image nouvellement téléchargée.
Pour assurer la compatibilité avec les anciennes images, vous pouvez cliquer sur "Optimisation par lots" pour traiter la médiathèque historique.

5. utilisation rationnelle des ressources vidéo

Si une vidéo est intégrée à la page, elle est recommandée :

Utiliser YouTube ou Vimeo chaîne de commandement externe (finances)Au lieu de téléchargements locaux

Activation du chargement vidéo différé
Évitez les vidéos d'arrière-plan en plein écran et les paramètres de lecture automatique pour réduire la consommation de ressources au premier écran.

III. options d'optimisation auxiliaires dans les paramètres d'Elementor

Le plugin Elementor dispose également de paramètres d'optimisation des performances intégrés qui peuvent être ajustés dans la nouvelle version de l'interface afin de réduire la charge de chargement des ressources de la page.

1) Activation de l'optimisation des performances (nouvelle page Features)

Trajectoire :WordPress Backend → Elementor → Settings → Features

Sur cette page, il est recommandé d'activer les options suivantes :

Un balisage optimiséOptimiser la structure de la sortie HTML en supprimant les balises imbriquées inutiles et en réduisant le nombre de balises DOM Nombre de nœuds
Mise en cache des élémentsLes pages statiques sont mises en cache au niveau des composants afin d'améliorer la rapidité des chargements répétés.

Réglez l'état de ces options sur Actif, puis cliquez sur le bas de la page Enregistrer les modifications Enregistrer les modifications.

2. basculer le mode de chargement de l'éditeur (améliore l'efficacité de l'édition en arrière-plan)

Trajectoire :Elementor → Paramètres → Avancé

Sur cette page, vous trouverez

Méthode de chargement de l'éditeur
Essayez d'activer cette option si l'éditeur se charge lentement ou si l'écran est blanc.

Le chargement alterné optimise la réactivité de l'éditeur Elementor pour certains hôtes ou environnements à faible mémoire.

IV. orientations suggérées pour la construction de pages légères

Outre la combinaison de l'optimisation des images, les points suivants sont également recommandés :

Utiliser des images stylisées pour éviter l'encombrement visuel
Réduire la longueur de défilement des pages et l'empilement des modules
Ajouter à chaque image alt DescriptionLe référencement est bon pour vous !

Accélérer le chargement des médias avec les CDN

Ces opérations, ainsi que la compression des images et la conversion des formats, peuvent améliorer considérablement les performances des pages.

V. Résumé

Le problème de la lenteur de chargement des pages Elementor est souvent étroitement lié à la manière dont les images et les ressources multimédias sont gérées. Une compression raisonnable des images, l'activation du chargement paresseux, l'adoption du format WebP et l'optimisation de l'appel des vidéos peuvent réduire efficacement la taille des pages et améliorer la vitesse de chargement sans altérer la qualité visuelle, ce qui rend l'édition et la navigation plus fluides.

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 : [email protected]
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.