Comment nous avons amélioré son PageSpeed Insights : de 45 à 87 grâce à une méthode efficace et sans sacrifier son design

Vous connaissez ces sites Internet magnifiques qui vous font patienter une éternité avant de s’afficher ? C’était exactement le cas ici. Un design soigné, mais un score PageSpeed Insights de 45 sur mobile qui faisait mal aux yeux. Le défi était clair : dépasser les 80 points sans toucher à l’esthétique ni aux conversions, tout en offrant une meilleure expérience utilisateur et une vitesse d’affichage optimale.

Voici l’histoire de cette transformation web, étape par étape, menée par TYTAE.

Les étapes concrètes pour améliorer son PageSpeed Insights efficacement

D’abord, accélérer l’affichage : maîtriser le CSS

Notre priorité était simple : faire apparaître quelque chose à l’écran le plus rapidement possible. Nous avons donc commencé par analyser les feuilles de style avec un outil adapté et extraire uniquement ce qui était nécessaire pour afficher la partie visible de la page.

Concrètement, nous avons créé un CSS critique ultra-léger contenant juste les styles pour le header et le hero. Le reste des styles se charge en arrière-plan, sans bloquer l’affichage. Résultat : l’utilisateur voit immédiatement l’interface prendre forme, puis les détails visuels se peaufinent discrètement.

Les images d’arrière-plan CSS posaient un problème particulier. Contrairement aux balises <img>, elles ne peuvent pas être chargées de manière paresseuse nativement. Nous avons donc développé deux stratégies : convertir certaines en vraies images quand c’était possible, ou utiliser un loading= »lazy » qui déclenche le chargement uniquement quand l’élément devient visible.

Nous avons également défini des dimensions fixes pour tous les éléments visuels. Fini les pages qui « sautent » pendant le chargement !

JavaScript : invité de la deuxième partie

Pour Google, le contenu doit toujours passer en premier. Nous avons donc revu entièrement la stratégie de chargement JavaScript : minification, suppression du code inutilisé, et surtout, report de tout ce qui n’est pas critique avec l’attribut defer.

Les fonctionnalités spécifiques comme les carrousels ou les galeries ne se chargent désormais que sur les pages qui en ont besoin. Quant aux scripts de tracking marketing, ils attendent sagement qu’un utilisateur interagisse avec la page avant de s’activer.

Optimisation d’images : léger mais pas light

Nous avons systématisé la conversion en WebP et AVIF pour les navigateurs compatibles, tout en gardant des fallbacks. Les attributs srcset et sizes ont été finement ajustés : pourquoi livrer une image de 2000px à un écran de smartphone ?

L’image LCP (la plus importante pour PageSpeed Insights) a reçu un traitement VIP : fetchpriority= »high » et dimensions verrouillées. Pour les icônes, nous avons opté pour du SVG inline ou en sprite : netteté parfaite et zéro requête réseau supplémentaire.

Typographie : local et swap

Les Google Fonts ont été rapatriées localement pour éviter les requêtes vers des serveurs tiers. Nous avons préchargé uniquement les variantes indispensables en WOFF2 et activé font-display: swap.

Concrètement, cela signifie que le texte apparaît immédiatement avec une police de secours, puis bascule proprement vers la police finale dès qu’elle est disponible. L’œil ne voit aucune coupure, les métriques restent stables.

Elementor optimisé

Le site utilisait Elementor, un constructeur puissant mais qui peut rapidement alourdir le HTML. Nous avons migré vers les Containers Flexbox d’Elementor, nettoyé le balisage sémantique et optimisé la structure.

Nous avons aussi activé le préchargement des liens au survol : quand un visiteur pointe sa souris sur un lien, la page suivante commence déjà à se charger. L’impression de navigation instantanée est saisissante.

L’infrastructure invisible : BDD et cache

Les performances frontend reposent aussi sur des fondations solides. Nous avons commencé par un grand ménage dans la base de données : révisions inutiles, transients expirés, et surtout un audit approfondi de la table wp_options pour réduire l’autoload.

L’ajout d’un cache Redis a été décisif. WordPress n’interroge plus constamment MySQL pour les mêmes données et puise directement en mémoire. Le temps de première réponse du serveur (TTFB) s’est immédiatement amélioré.

Faire le tri dans le thème

Nous avons désenregistré toutes les ressources inutilisées : librairies dormantes, polices d’icônes non utilisées, CSS hérités sans intérêt. L’objectif était simple : moins de fichiers à télécharger, moins de temps d’attente, même résultat visuel.

À chaque modification, notre équipe vérifiait scrupuleusement l’affichage sur desktop et mobile. Menus, carrousels, formulaires, animations : tout devait fonctionner parfaitement. Un site rapide mais cassé n’est pas une victoire.

Les résultats en chiffres

• Score global de 45 à 87 sur PageSpeed Insights
• TTFB réduit grâce à Redis et aux optimisations base de données
• LCP accéléré par le CSS critique et la priorisation des images
• CLS stabilisé avec des dimensions fixes et un DOM allégé
• Interactivité plus précoce car JavaScript ne bloque plus le rendu

Concrètement, l’utilisateur ressent la différence : la page se dessine instantanément, les transitions sont fluides, et tout répond au doigt et à l’œil. Chaque mesure confirme cette progression : un site plus rapide, plus fluide, et mieux noté par l’outil de Google. 

La méthode plutôt que la magie

Cette transformation ne résulte pas d’une solution miracle, mais d’une approche méthodique : auditer, prioriser, optimiser, vérifier. Chaque détail compte, de l’hébergement des polices au cache objet, en passant par la structure du DOM et la stratégie de chargement des scripts.

C’est la somme de ces optimisations – et leur exécution rigoureuse dans un contexte réel – qui fait toute la différence. 

Besoin de faire évoluer le PageSpeed Insights de votre site ? Contactez TYTAE !

Notre Audit + Sprint Performance vous propose : diagnostic complet, roadmap claire, exécution accompagnée et rapport avant/après détaillé. Gardez votre design, perdez la lenteur.

Profitez de nos recommandations techniques, de l’avis d’experts et d’une stratégie basée sur la recherche des meilleures pratiques web. Gardez votre design, perdez la lenteur.