- En bref
- LCP, INP, CLS : les trois indicateurs expliqués
- Pourquoi tant de sites tunisiens sont lents en 4G
- Mesurer dans les conditions de vos clients
- Hébergement en Tunisie ou à l’étranger ?
- Corriger le LCP : l’affichage du contenu principal
- Les images, premier chantier des sites tunisiens
- Corriger l’INP : la réactivité au toucher
- Corriger le CLS : la page qui saute
- Thèmes, constructeurs de pages et extensions
- Le plan d’action en 8 étapes
- Ce que la vitesse change (et ne change pas) pour le SEO
Les Core Web Vitals mesurent ce que vit réellement un visiteur : le temps d’affichage du contenu principal, la réactivité quand il touche l’écran et la stabilité de la mise en page. Beaucoup de sites tunisiens échouent sur mobile, non pas à cause du réseau seul, mais parce qu’ils cumulent des images trop lourdes, des thèmes surchargés et des scripts tiers pensés pour une connexion fibre. Ce guide explique comment mesurer ces trois indicateurs dans les conditions de vos clients, en 4G, puis comment les corriger, étape par étape.
En bref
- Trois seuils à passer : LCP ≤ 2,5 s, INP ≤ 200 ms, CLS ≤ 0,1, mesurés sur 75 % des visites réelles.
- Mesurez en 4G sur un téléphone Android d’entrée de gamme, pas sur votre ordinateur au bureau.
- Les images sont la première cause de lenteur que nous rencontrons : une photo de téléphone publiée telle quelle pèse souvent plusieurs mégaoctets.
- L’hébergement compte, mais la configuration (cache, version de PHP) compte davantage que le pays du serveur.
- Moins de scripts tiers (chat, pixels, widgets sociaux) : c’est le levier principal de l’INP.
LCP, INP, CLS : les trois indicateurs expliqués
Les Core Web Vitals sont trois mesures de l’expérience réelle, définies par Google et calculées à partir des visites de vrais utilisateurs de Chrome. Google retient le 75e percentile : pour qu’une page soit « bonne », au moins trois visites sur quatre doivent passer le seuil. Depuis mars 2024, l’INP a remplacé l’ancien FID pour mesurer la réactivité.
| Indicateur | Ce qu’il mesure | Bon | À améliorer | Mauvais |
|---|---|---|---|---|
| LCP (Largest Contentful Paint) | Le temps d’affichage du plus grand élément visible : photo principale, bannière, bloc de titre | ≤ 2,5 s | 2,5 à 4 s | > 4 s |
| INP (Interaction to Next Paint) | Le délai entre un toucher (menu, bouton « Ajouter au panier ») et la réaction visible de la page | ≤ 200 ms | 200 à 500 ms | > 500 ms |
| CLS (Cumulative Layout Shift) | Les déplacements inattendus du contenu pendant le chargement | ≤ 0,1 | 0,1 à 0,25 | > 0,25 |
Les définitions et seuils officiels sont détaillés sur web.dev (Google) et dans la documentation Google Search Central sur les Core Web Vitals.
Pourquoi tant de sites tunisiens sont lents en 4G
Réponse courte : les sites sont conçus et testés sur un ordinateur en Wi-Fi, puis consultés sur des téléphones modestes, en 4G, avec une connexion qui varie selon le quartier et l’heure. Dans les audits que nous réalisons, les mêmes causes reviennent presque toujours.
Un réseau mobile variable
La qualité de la 4G n’est pas la même au centre de Tunis, dans une zone industrielle de Sfax, sur la route de Gabès ou dans les régions de l’intérieur. Elle baisse aussi aux heures de pointe, dans les bâtiments et en été dans les zones touristiques très fréquentées. Nous ne citons volontairement pas de débit moyen : il dépend de l’opérateur, de l’endroit et du moment. La seule règle sûre est de concevoir pour une connexion moyenne, pas pour la meilleure.
Des téléphones d’entrée et de milieu de gamme
Une grande partie des visiteurs navigue sur des smartphones Android au processeur modeste. Le réseau n’est alors plus le seul frein : le téléphone met du temps à exécuter le JavaScript. C’est ce qui dégrade l’INP, même quand la page semble chargée.
Des forfaits data comptés
Beaucoup de Tunisiens rechargent leur forfait internet mobile. Une page de 8 Mo n’est pas seulement lente : elle coûte au visiteur, qui apprend vite à éviter les sites lourds. Sur une boutique en ligne avec paiement à la livraison, chaque abandon avant l’affichage est une commande perdue.
Des sites construits pour impressionner, pas pour charger
Diaporamas en page d’accueil, vidéos d’arrière-plan, animations au défilement, trois ou quatre polices dont une police arabe complète, bulle WhatsApp, Messenger, pixels publicitaires : chaque élément est justifié isolément, leur somme ne l’est pas.
| Cause fréquente | Indicateur touché | Correctif prioritaire |
|---|---|---|
| Photo d’en-tête publiée depuis le téléphone (4 à 8 Mo) | LCP | Redimensionner, convertir en WebP ou AVIF, servir plusieurs tailles |
| Diaporama (slider) en haut de page | LCP, CLS | Remplacer par une image fixe et un message clair |
| Hébergement mutualisé saturé, sans cache | LCP (TTFB) | Cache de page, PHP récent, offre adaptée au trafic |
| Chat, pixels et widgets chargés immédiatement | INP | Chargement différé ou au clic |
| Polices web multiples, police arabe complète | LCP, CLS | Deux familles maximum, sous-ensembles, font-display: swap |
| Bannière promo ou cookies injectée après coup | CLS | Réserver l’espace dès le départ |
Mesurer dans les conditions de vos clients
Il faut distinguer les données de terrain (ce que vivent vos visiteurs) des tests de laboratoire (une simulation). Google classe sur les premières ; les seconds servent à diagnostiquer.
| Outil | Type de données | À quoi il sert |
|---|---|---|
| PageSpeed Insights | Terrain (si trafic suffisant) + laboratoire | Vérifier les trois seuils page par page et lire les recommandations |
| Search Console, rapport Signaux Web essentiels | Terrain, par groupes d’URL | Repérer les modèles de pages en échec (fiches produits, articles…) |
| Chrome DevTools, onglet Performance | Laboratoire, avec bridage réseau et processeur | Reproduire une 4G lente et un téléphone modeste depuis un ordinateur |
| Chrome UX Report (CrUX) | Terrain, par origine et par pays | Comparer votre site à d’autres sites tunisiens dans les données publiques |
Complétez toujours par un test simple : un vrai téléphone Android d’entrée de gamme, le Wi-Fi coupé, la 4G seule, cache vidé. Chronométrez l’affichage de votre page d’accueil, d’une page de service et d’une fiche produit. Ce test de cinq minutes convainc souvent mieux qu’un rapport.
Hébergement en Tunisie ou à l’étranger ?
Le bon hébergement est celui qui répond vite depuis l’endroit où se trouvent vos clients, avec une configuration à jour. Le pays du serveur n’est qu’un des facteurs : un serveur surchargé à Tunis peut être plus lent qu’un serveur bien réglé en Europe, et inversement.
| Option | Points forts | Points de vigilance | Adapté à |
|---|---|---|---|
| Serveur en Tunisie | Latence faible pour les visiteurs tunisiens ; facturation et support locaux | Qualité très variable selon l’offre ; vérifier la connectivité internationale si vous visez aussi l’étranger | Commerces, services et sites dont la clientèle est surtout en Tunisie |
| Serveur en Europe (France, Allemagne…) | Large choix d’offres performantes ; proche de la diaspora et des clients européens | Aller-retour réseau un peu plus long depuis la Tunisie ; bien choisir le centre de données | Sites d’export, clientèle mixte Tunisie–France |
| Serveur + CDN | Fichiers statiques servis depuis un point proche du visiteur | Réglages de cache à maîtriser (pages dynamiques, panier) | Sites à audience internationale, boutiques en ligne |
L’indicateur à surveiller est le TTFB (temps jusqu’au premier octet) : Google recommande de viser 0,8 seconde ou moins (web.dev, TTFB). Mesurez-le depuis la Tunisie, en 4G, avant et après activation d’un cache de page. Sur WordPress ou PrestaShop, une version de PHP récente et un cache de page activé changent souvent davantage que le déménagement du site.
Si vous traitez des données personnelles (formulaires, commandes), vérifiez aussi vos obligations au regard de la loi organique n° 2004-63 sur la protection des données personnelles et de l’INPDP : c’est un sujet juridique, distinct de la vitesse.
Corriger le LCP : l’affichage du contenu principal
Pour améliorer le LCP, il faut que l’élément principal de la page (souvent une image) soit découvert tôt, léger et prioritaire. Les actions, par ordre d’impact habituel :
- Identifier l’élément LCP dans PageSpeed Insights (section diagnostic) : c’est parfois une image de fond CSS que le navigateur découvre tard.
- Alléger cette image (voir la section suivante) et la déclarer dans le HTML avec
fetchpriority='high'. - Ne jamais appliquer le chargement différé (lazy loading) à l’image principale : c’est une erreur fréquente des thèmes et des extensions d’optimisation.
- Réduire le TTFB : cache de page, PHP 8.x, base de données nettoyée, hébergement adapté.
- Limiter les CSS et polices qui bloquent l’affichage : une ou deux familles de polices, avec
font-display: swapet des sous-ensembles de caractères (latin, arabe). - Supprimer le diaporama d’accueil au profit d’une image fixe : il retarde presque toujours l’affichage et dilue le message.
Les images, premier chantier des sites tunisiens
Sur les sites que nous auditons, les images représentent le plus souvent la plus grande part du poids des pages. Photos de produits prises au téléphone, visuels de publications Facebook réutilisés, logos en PNG de 2 000 pixels : la correction est simple et rentable.
| Usage | Largeur conseillée | Format | Poids indicatif visé |
|---|---|---|---|
| Image principale d’une page (bannière) | 1 600 px, avec variantes 800 et 1 200 px | AVIF ou WebP | 150 à 200 Ko au plus |
| Photo produit (fiche) | 1 000 à 1 200 px | WebP | Moins de 120 Ko |
| Vignette de catégorie ou d’article | 400 à 600 px | WebP | Moins de 50 Ko |
| Logo, pictogrammes | Taille d’affichage × 2 | SVG de préférence | Quelques Ko |
Ces valeurs sont des repères de travail, pas des normes. Trois réflexes suffisent : redimensionner avant d’envoyer (un outil gratuit comme Squoosh fait l’affaire), servir plusieurs tailles avec srcset pour que le téléphone ne télécharge pas l’image destinée à un écran de 27 pouces, et indiquer largeur et hauteur pour éviter les sauts de mise en page. WordPress génère automatiquement les tailles et gère le WebP ; PrestaShop le propose selon la version. Nos guides SEO WordPress et SEO PrestaShop détaillent les réglages propres à chaque CMS.
Corriger l’INP : la réactivité au toucher
Un mauvais INP vient presque toujours d’un excès de JavaScript qui occupe le processeur du téléphone au moment où le visiteur touche l’écran. Sur un Android modeste, l’effet est bien plus marqué que sur un iPhone récent.
- Faites l’inventaire des scripts tiers : chat, bulle WhatsApp, Messenger, pixels publicitaires, cartes intégrées, avis, outils d’analyse en double. Supprimez ce qui ne sert plus.
- Chargez au clic ce qui peut l’être : la carte Google Maps de la page contact peut être une image cliquable ; le chat peut s’initialiser au premier toucher.
- Désactivez les extensions inutiles page par page : un formulaire de contact n’a pas besoin d’être chargé sur toutes les pages.
- Surveillez les boutiques WooCommerce : les scripts de panier et de filtres sont souvent chargés partout, même sur les pages d’information.
- Découpez les tâches longues côté développement : le panneau Performance de Chrome les signale en rouge.
Corriger le CLS : la page qui saute
Le CLS mesure les mouvements inattendus : le visiteur veut toucher « Commander » et touche autre chose parce qu’un bloc s’est inséré au-dessus. Les causes typiques et leurs remèdes :
| Ce qui se déplace | Pourquoi | Correctif |
|---|---|---|
| Le texte, quand une image apparaît | Image sans dimensions | Attributs width et height, ou aspect-ratio en CSS |
| Toute la page, quand une bande promo apparaît (« Livraison gratuite », « Paiement à la livraison ») | Élément injecté en JavaScript après l’affichage | Réserver sa hauteur dès le HTML, ou l’afficher en superposition |
| Les titres, quand la police arabe ou latine se charge | Police de remplacement aux dimensions différentes | Précharger la police principale, ajuster la police de repli |
| Le bas de page, quand le bandeau cookies arrive | Bandeau inséré dans le flux | Bandeau superposé, en bas d’écran |
Thèmes, constructeurs de pages et extensions
Un thème polyvalent vendu avec des dizaines de démonstrations charge souvent du code pour des fonctions que votre site n’utilise pas. Ce n’est pas un problème en soi, à condition de désactiver ce qui ne sert pas. Avant de changer de thème, vérifiez :
- le poids d’une page vide du thème (sans contenu) dans l’outil de laboratoire ;
- la possibilité de désactiver modules, animations et polices intégrées ;
- la qualité de la prise en charge de l’arabe et de l’écriture de droite à gauche, si votre site est bilingue ;
- la fréquence des mises à jour, pour la sécurité comme pour les performances.
Les constructeurs de pages visuels facilitent la mise en page mais ajoutent du code à chaque bloc. Utilisés avec retenue, sur un hébergement correct et avec un cache, ils peuvent passer les seuils. Empilés sur un thème lourd avec trente extensions, rarement. Quand le site doit être refait, la vitesse se traite dès la conception, avec une migration SEO propre pour ne pas perdre les positions acquises.
Le plan d’action en 8 étapes
- Mesurer : PageSpeed Insights sur 5 pages types, rapport Search Console, test réel en 4G.
- Prioriser les modèles de pages qui reçoivent le plus de visites depuis Google (souvent les fiches produits ou les pages de service).
- Traiter les images : redimensionnement, WebP ou AVIF, tailles multiples, dimensions déclarées.
- Activer un cache de page et mettre PHP à jour ; mesurer le TTFB avant et après.
- Faire le ménage dans les extensions et les scripts tiers ; différer ce qui peut l’être.
- Stabiliser la mise en page : bandeaux, polices, blocs insérés.
- Tester à nouveau sur téléphone réel, puis laisser 28 jours aux données de terrain pour refléter les changements.
- Surveiller chaque mois : une nouvelle extension ou une campagne publicitaire peut tout défaire.
Si vous ne savez pas par où commencer, lancez l’audit express en ligne : il signale les pages les plus lentes. Pour un diagnostic complet avec un consultant, demandez l’audit SEO gratuit.
Ce que la vitesse change (et ne change pas) pour le SEO
Les Core Web Vitals sont un critère de classement parmi d’autres, jamais un raccourci vers la première page. Google l’écrit lui-même : un contenu plus pertinent peut passer devant une page plus rapide. En revanche, la vitesse agit fortement sur ce qui se passe après le clic : taux de rebond, pages vues, demandes de devis, commandes. Sur mobile en Tunisie, c’est souvent là que se perd la plus grande part du potentiel.
C’est pourquoi nous traitons la vitesse comme un chantier du SEO technique, avec le même suivi que les positions. Notre service Core Web Vitals & vitesse comprend le diagnostic, les corrections appliquées par nos développeurs sur WordPress, PrestaShop ou Shopify, et le contrôle des données de terrain. Les forfaits SEO commencent à 349 DT HT par mois (5 mots-clés) ; le détail et le simulateur sont sur la page tarifs, et nous proposons toujours un devis adapté à votre site.