Le chargement d'images de grande taille peut allonger considérablement le temps de chargement des pages, ce qui affecte l'expérience de navigation de l'utilisateur et peut même nuire au classement dans les moteurs de recherche. Pour optimiser le chargement des images, de nombreux utilisateurs de WordPress utilisent des outils de construction de pages tels qu'Elementor. Dans cet article, nous verrons comment optimiser le chargement des images avec Elementor, les étapes pour activer et désactiver la fonctionnalité, le principe du chargement différé et ses avantages.

Pourquoi optimiser le chargement des images ?

L'optimisation du chargement des images vise à réduire le temps de chargement initial d'une page et à charger progressivement des images supplémentaires au fur et à mesure que l'utilisateur fait défiler la page. Cette technique est appeléechargement retardé(Chargement paresseux), qui réduit l'utilisation des ressources pour le chargement initial en ne chargeant les images que lorsque l'utilisateur a besoin de les voir. Cela permet non seulement d'accélérer l'ouverture des pages, mais aussi d'économiser la bande passante et de réduire la consommation des ressources du serveur.

L'optimisation du chargement des images permet d'obtenir les avantages suivants :

• Améliorez les performances de votre site web, en particulier la vitesse de chargement sur les appareils mobiles.
• Améliorer l'expérience de l'utilisateur en lui permettant de voir le contenu de la page plus rapidement.
• Améliorer le classement dans les moteurs de recherche car ces derniers préfèrent les sites web qui se chargent rapidement.
• Réduire l'utilisation de la bande passante du serveur et faire des économies.

Comment activer et désactiver l'optimisation du chargement des images dans Elementor

Si vous construisez un site WordPress avec Elementor, vous pouvez optimiser le chargement des images avec un simple réglage. Voici les étapes exactes pour activer et désactiver cette fonctionnalité :

1. Connectez-vous à l'administration de WordPress
2. Accédez à Elementor Settings (Paramètres d'Elementor) : Dans le menu WP Admin (backend de WordPress), naviguez jusqu'à l'onglet Elementor > Paramètres.

3. Allez dans l'onglet Performance : Dans le panneau Paramètres à droite, cliquez sur "représentations"Onglet.

4. Activer ou désactiver le chargement optimisé des images : Dans "représentationsDans l'onglet " Recherche ", vous trouverez la rubrique "Chargement optimisé des images"Options. Un menu déroulant permet d'activer ou de désactiver cette fonction.

5. Sauvegardez les modifications : Après avoir sélectionné vos paramètres, cliquez sur "Enregistrer les modifications"pour enregistrer votre configuration.

Lorsque le chargement optimisé des images est activé, Elementor détecte automatiquement les images de la page qui prennent le plus de temps à charger et les charge en premier. En règle générale, cette optimisation réduit le temps de chargement de la page de 5% jusqu'à 10%L'effet est particulièrement visible sur les sites web qui contiennent un grand nombre d'images à haute résolution.

Comment utiliser le chargement différé dans WordPress ?

Pour activer le chargement différé dans WordPress, vous pouvez utiliser une variété de méthodes, y compris l'utilisation de l'optionplug-in (composant logiciel)peut-êtreAjouter du code manuellement. Voici quelques moyens d'activer le chargement différé :

1. Utilisez les fonctionnalités offertes par Elementor : Si vous utilisez Elementor ProElementor optimise automatiquement le chargement des images en arrière-plan, sans nécessiter de plugin supplémentaire.

2. Utiliser des modules d'extension : Si vous n'utilisez pas Elementor ou si vous avez besoin de plus de contr?le, vous pouvez choisir d'utiliser des outils spécialisés.plug-in (composant logiciel)pour mettre en ?uvre le chargement différé. Exemple :
   • Lazy Load par WP RocketCe plugin est léger et permet de retarder le chargement des images. Il suffit d'activer le plugin pour retarder automatiquement le chargement des images.
   • a3 Charge paresseuse: Ce plugin offre plus d'options de personnalisation pour la page d'accueil deimagerieetvidéorépondre en chantant iframe Contenu activé pour un chargement différé.
3. Réalisé manuellement : Pour les utilisateurs avancés, il est possible de retarder le chargement en ajoutant un code manuellement. Dans WordPress, cela peut être fait dans la section functions.php en ajoutant l'élément JavaScript pour obtenir l'effet de chargement différé.

document.addEventListener("DOMContentLoaded", function() {
  var lazyImages = [].slice.call(document.querySelectorAll("img.lazy")) ;

  if ("IntersectionObserver" in window) {
    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let lazyImage = entries.target ;
          lazyImage.src = lazyImage.dataset.src ;
          lazyImage.classList.remove("lazy") ;
          lazyImageObserver.unobserve(lazyImage) ;
        }
      }) ;
    }) ;

    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage) ;
    }) ;
  } else {
    // Solution de repli pour les navigateurs dépourvus d'IntersectionObserver
    lazyImages.forEach(function(lazyImage) {
      lazyImage.src = lazyImage.dataset.src ; }) ; }
    }) ; }
  }
}) ;

L'ajout de ce code au fichier JS de votre page permettra à l'image de se charger lorsqu'elle entrera dans la fenêtre de visualisation.

Problèmes potentiels et solutions pour le chargement différé

Si le chargement différé présente de nombreux avantages pour l'amélioration des performances d'un site web, il peut également être à l'origine de certains problèmes :

1. Question sur le référencement : Si le chargement différé n'est pas correctement mis en ?uvre, les moteurs de recherche risquent de ne pas explorer l'image. Pour remédier à ce problème, assurez-vous que la mise en ?uvre du chargement différé est compatible avec les outils d'exploration de Google ou utilisez un plugin qui prend en charge l'optimisation des moteurs de recherche.
2. Le retard de chargement est excessif : Le chargement différé d'un trop grand nombre d'images peut obliger les utilisateurs à attendre leur chargement tout en faisant défiler la page, ce qui nuit à l'expérience de l'utilisateur. Pour éviter ce problème, veillez à ce que le chargement différé ne soit activé que pour les images non critiques, et non pour l'image principale en haut de la page.
3. Compatibilité avec les navigateurs : Tous les navigateurs ne prennent pas en charge le chargement différé, il convient donc de tenir compte des questions de compatibilité lors de sa mise en ?uvre. Les navigateurs modernes tels que Chrome, Firefox et Edge prennent en charge la propriété de chargement différé de manière native, mais les navigateurs plus anciens peuvent nécessiter la prise en charge d'un polyfill supplémentaire.

résumés

L'optimisation du chargement des images est essentielle pour améliorer les performances des sites web WordPress et l'expérience des utilisateurs. Pour ce faire, il fautUtilisez les fonctions d'optimisation d'image intégrées à Elementor, ou utilisez des plug-ins et du code.vous pouvez facilement mettre en ?uvre le chargement différé. Cela permet non seulement d'améliorer la réactivité de votre site web, mais aussi d'économiser de la bande passante et d'améliorer le classement SEO. Pour obtenir les meilleurs résultats, veillez à configurer correctement la fonction de chargement différé afin d'éviter tout impact sur le référencement et l'expérience utilisateur.

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.