Les grilles en boucle sont assez lentes : chaque étape « où regarder et comment voir » est expliquée en une seule fois.

Les Loop Grids deviennent généralement lentes non pas à cause d'un seul point défaillant, mais plutôt à cause de l'effet cumulatif de plusieurs facteurs : requêtes lentes, images lourdes, échecs de cache et pression élevée sur le rendu frontal. Ci-dessous, nous aborderons ces problèmes étape par étape. Requête / Image / Cache / Rendu frontal Quatre lignes écrites, chacune vous indiquant où WordPressetElementorOù exactement dois-je chercher dans le navigateur ?

1) Déterminez d'abord si le ralentissement se produit au niveau du backend ou du frontend (où vérifier).

1.1 Dansnavigateur (logiciel)Vérifier le TTFB (pour déterminer si le backend est lent)

Localisation :Chrome → Appuyez sur F12 → Réseau

Fonctionnement :

• tique Désactiver le cache(À des fins de test uniquement)
• Actualiser la page (Ctrl+R)
• Appuyez sur celui du haut. Demande de documents(Généralement de type Doc / HTML)

• Cliquez sur le nom du document pour l'afficher à droite. Calendrier(Calendrier)

Comment visualiser :

• Attente (temps jusqu'au premier octet) Extrêmement lent : problèmes backend (requêtes/mise en cache/PHP)
• Le TTFB n'est pas long, mais le défilement des pages est lent : le rendu frontal subit une pression importante.

2) Demande de renseignements (Grille de boucles (Récupération des données) : Où puis-je consulter le « Nombre d'éléments par page » et les « Paramètres de requête » ?

2.1 Affichage du nombre d'éléments affichés par page dans Elementor

Localisation :Modifier cette page → Cliquer sur le widget Loop Grid → Panneau de gauche : Contenu

Noms d'entrée courants (peuvent varier légèrement selon les versions) :

• Contenu → Mise en page(Mise en page)
• Nombre de publications par page / Nombre d'éléments par page / Affichage par page(Nombre d'articles)

Les tests que vous devez passer :

• Modifiez le nombre d'éléments par page de 24 à 12, puis à 8, et comparez si cela devient plus rapide.

2.2 Dans Elementor Types de requêtes et conditions de filtrage

Localisation :Grille en boucle → Contenu → Requête

Vérifiez tout particulièrement si ces éléments ne sont pas réglés à un niveau trop élevé :

• Inclure / Exclure(inclure/exclure)
• Commander par(Le tri par popularité/ventes/note prend généralement plus de temps)
• Source(Source : Article/Produit/Type de catégorie d'article)

3) Images : où puis-je voir les dimensions de chaque image et la taille totale ?

3.1 Affichage de la taille d'une image dans un navigateur

Localisation :Chrome → F12 → Réseau → Filtrer en sélectionnant Img

Fonctionnement :

• rafraîchir la page
• Cliquez sur Img
• Voir la liste Taille(Taille)

Comment visualiser :

• Recommandations pour les vignettes de la liste 50 Ko – 150 KoEssayez de ne pas dépasser 200 kilo-octets
• Si vous remarquez de nombreuses vignettes de 300 Ko, 500 Ko ou 1 Mo, c'est la cause principale du ralentissement.

3.2 Dans WordPress Afficher les paramètres de taille des vignettes (basiques)

Localisation :Backend → Paramètres → Médias

Vous pouvez confirmer :

• Les dimensions des vignettes ont-elles été définies correctement (pas trop grandes) ?
• Cependant, veuillez noter qu'Elementor/les thèmes peuvent également utiliser leurs propres règles de dimensionnement.

4)Cache (informatique)Où puis-je vérifier si un cache a été utilisé ou s'il a été contourné ?

4.1 Vérifier si la mise en cache est active à l'aide d'une fenêtre de navigation privée (méthode la plus simple)

Localisation :Chrome → Trois points dans le coin supérieur droit → Nouvelle fenêtre de navigation privée

Fonctionnement :

• Ouvrez la même page sans laisser de trace et comparez la vitesse.
  Comment visualiser :
• Le mode invisible est nettement plus rapide : votre état connecté peut contourner le cache, ou les règles de mise en cache diffèrent pour les utilisateurs connectés.

4.2 Vérifier si le navigateur accède au cache/CDN (avancé)

Localisation :Chrome → F12 → Réseau → Cliquez sur Doc/HTML → En-têtes de réponse

Vous pouvez voir des champs similaires à ceux-ci (varie selon le serveur) :

• cf-cache-status(Cloudflare Common : HIT/MISS)
• x-cacheetcontrôle du cache et al. (et autres auteurs)

Comment visualiser :

• Avec HIT, c'est plus stable.
• Une erreur MISS persistante indique des échecs de cache ou des règles contournées (par exemple, en raison de paramètres ou de pages contenant un contenu dynamique important).

5)faire avancer une partie de qqch.Rendu : où puis-je vérifier les « pertes d'images pendant le défilement » et les « performances de rendu » ?

5.1 Performances lors du défilement dans un navigateur

Localisation :Chrome → F12 → Performances

Fonctionnement :

1. Cliquez sur Enregistrer
2. Faites défiler la page pendant 3 à 5 secondes.
3. Arrêter l'enregistrement

Comment visualiser :

• Rendu/Peinture Très élevé : ombres, filtres, animations, DOM excessif
• Script Très élevé : JavaScript est trop lourd (généralement en raison d'animations excessives et du chargement de scripts).

6) Suivez cette séquence pour un positionnement plus rapide.

1. navigateur (logiciel) Vue réseau TTFB(Confirmer backend/frontend)
2. Elementor met Réduire de moitié le nombre d'éléments par page Faites une comparaison
3. Filtrage des images réseau taille de l'image
4. Comparaison sur écran partagé Variance des accès au cache
5. Enregistrement des performances, regarder Le rendu est-il hors normes ?

remonter

Compléter dans l'ordre Temps jusqu'au premier octet → Éléments par page → Taille des images → Taux de réussite du cache → Performances de défilementVous pouvez alors identifier précisément où se trouve le goulot d'étranglement. Ensuite, modifiez uniquement le plus lent :

• Il est grand temps de passer à la première octaveRationalisez les requêtes et réduisez leur nombre par page.
• Grande imageTaille et compression uniformes des vignettes
• Carte à faire défiler：Désactiver les animations, réduire les ombres, minimiser les champs

Après avoir apporté les modifications, effectuez deux nouveaux tests en mode navigation privée : Le TTFB et les temps de fin ont considérablement diminué, le problème est donc résolu.

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.