Vitesse & temps de chargement
Tous les tutoriels
Du plus simple au plus avancé.
Choisir le bon niveau de compression des images
Trouvez le bon équilibre entre qualité et poids de vos images grâce à la compression avec et sans perte pour…
Automatiser la compression et l'encodage des images
Intégrez la compression et l'encodage de vos images à votre workflow pour générer automatiquement des sources légères et performantes.
Précharger les images responsives (imagesrcset, imagesizes)
Apprenez à précharger vos images responsives avec imagesrcset et imagesizes pour accélérer l'affichage et améliorer votre LCP.
Précharger l'audio et la vidéo pour une lecture rapide
Accélérez le démarrage de vos médias : attribut preload, link rel=preload et mise en mémoire tampon manuelle pour une lecture…
Optimiser l'IA côté client dans le navigateur
Faites tourner des modèles d'IA dans le navigateur sans ralentir vos pages : taille des modèles, mise en cache, web…
Charger les annonces sans ralentir votre site
Monétisez sans sacrifier la vitesse : chargement asynchrone, lazy loading et stabilité visuelle pour des annonces qui ne plombent pas…
Mesurer le chargement avec les API Navigation et Resource Timing
Collectez des données réelles de performance avec les API Navigation Timing et Resource Timing, et diagnostiquez la vitesse vécue par…
Comprendre et tester les connexions lentes
Émulez les réseaux faibles, testez depuis différents lieux et gérez le lie-fi pour offrir une expérience fiable, même en mauvaise…
Définir des budgets de performance
Fixez des limites claires de poids, de temps et de score pour garder un site rapide tout au long du…
Optimiser les polices web : WOFF2, sous-ensembles, hébergement
WOFF2, sous-ensembles, auto-hébergement et @font-face intégré : réduisez le poids de vos polices web pour des pages plus rapides.
Définir son premier budget de performance
Analysez vos pages clés, comparez vos concurrents et fixez des seuils réalistes pour rendre votre site nettement plus rapide.
Optimiser le chargement des polices web
Préchargez vos polices, pilotez font-display et évitez le texte invisible pour accélérer l'affichage et stabiliser votre mise en page.
Comprendre les règles PageSpeed Insights
Décryptez les règles PageSpeed Insights : JavaScript et CSS bloquants, chemin critique et bonnes pratiques pour des pages plus rapides.
Compresser les ressources texte (gzip, Brotli)
Activez gzip et Brotli pour réduire fortement le poids de vos fichiers texte, accélérer le chargement et soutenir vos Core…
Minifier les ressources texte (HTML, CSS, JavaScript)
Réduisez le poids de vos fichiers HTML, CSS et JavaScript grâce à la minification automatisée, pour des pages plus rapides…
Optimiser la réponse HTML du serveur (TTFB)
Réduisez le temps de réponse serveur de votre site : redirections, cache, compression et CDN pour un TTFB plus rapide…
Apprendre les fondamentaux de la performance web
Découvrez les concepts clés de la performance web pour offrir une expérience plus rapide et soutenir durablement votre SEO.
Utiliser l'API Cache pour le hors-ligne
Stockez requêtes et réponses dans le navigateur avec l'API Cache pour rendre votre site disponible hors connexion et plus résilient.
Optimiser le cache précédent/suivant (bfcache)
Rendez vos pages éligibles au bfcache pour des navigations Précédent et Suivant quasi instantanées et de meilleurs Core Web Vitals.
La mise en cache de longue durée des ressources
Conservez durablement vos ressources dans le navigateur et ne retéléchargez que ce qui change vraiment grâce au versionnage et au…
Éviter les requêtes réseau inutiles avec le cache HTTP
Réduisez les requêtes réseau inutiles et accélérez les visites répétées grâce à Cache-Control, ETag et la revalidation par le serveur.
Optimiser le cache pour les visites répétées
Servez la bonne version de vos fichiers tout en limitant les requêtes réseau lors des visites répétées grâce à une…
Précharger les polices facultatives sans décalage ni FOIT
Associez rel=preload et font-display: optional pour afficher vos polices personnalisées sans décalage de mise en page ni flash de texte…
Prefetch, prerender et précache : anticiper le chargement
Précharger, prérendre et mettre en pré-cache : trois techniques pour charger les pages futures à l'avance et rendre la navigation…
Le prefetch prédictif : précharger ce qui sera utile
Le prefetch prédictif précharge intelligemment ce que l'utilisateur consultera ensuite. Découvrez son principe et son implémentation avec Guess.js.
Précharger les navigations futures avec rel=prefetch
Apprenez à utiliser rel=prefetch pour télécharger à l'avance les pages et ressources que vos visiteurs consulteront, et accélérer leur navigation.
Le modèle PRPL pour un chargement quasi instantané
Découvrez le modèle PRPL : précharger, afficher, précharger les segments et différer le reste pour des pages quasi instantanées et…
Comprendre le scanner de préchargement du navigateur
Comprenez le scanner de préchargement du navigateur, comment il accélère le rendu et quels pièges évitent de le contourner.
Optimiser la priorité de chargement des ressources (fetchpriority)
Utilisez l'attribut fetchpriority pour augmenter ou réduire la priorité de vos ressources et accélérer l'affichage de l'image LCP.
Anticiper les connexions réseau (preconnect, dns-prefetch)
Établissez vos connexions réseau plus tôt avec preconnect et dns-prefetch pour réduire la latence et accélérer la vitesse perçue des…
Précharger les ressources critiques avec rel=preload
Apprenez à utiliser rel=preload pour récupérer plus tôt vos ressources critiques (polices, CSS, JS, image LCP) et accélérer le rendu.
Utiliser les indices de ressources pour accélérer le chargement
Découvrez les indices de ressources (preconnect, dns-prefetch, preload, fetchpriority) pour aider le navigateur à charger vos pages plus tôt.
Optimiser le chargement des ressources (CSS et JavaScript)
CSS et JavaScript peuvent bloquer l'affichage de vos pages. Découvrez comment optimiser leur chargement pour un rendu initial plus rapide.
Servir du code moderne aux navigateurs récents
Évitez de transpiler du JavaScript inutilement : servez du code moderne aux navigateurs récents et un repli aux anciens pour…
Optimiser le JavaScript tiers (scripts externes)
Analyses, widgets, publicités : maîtrisez les scripts tiers qui ralentissent vos pages et préservez vitesse, sécurité et expérience utilisateur.
Réduire le coût de démarrage du JavaScript
Limitez le transfert, l'analyse et l'exécution du JavaScript pour rendre vos pages interactives plus vite, même sur mobile d'entrée de…
Fractionner le code JavaScript (code splitting)
Découpez votre JavaScript en blocs et ne chargez que le nécessaire au démarrage pour accélérer l'affichage et fluidifier les interactions.
Éviter le CSS bloquant l'affichage
Le CSS bloque le rendu par défaut. Utilisez types et requêtes média pour débloquer l'affichage et accélérer le premier rendu…
Fluidifier le rendu des pages : le pixel pipeline
Comprenez le pixel pipeline du navigateur et ses 5 étapes pour des pages fluides à 60 images par seconde et…
Comprendre le chemin critique de rendu
Découvrez ce qu'est le chemin critique de rendu et quelles ressources bloquent l'affichage de vos pages, pour accélérer le premier…
Optimiser le chemin critique de rendu
Réduisez ressources critiques, longueur du chemin et octets critiques pour afficher vos pages plus vite et améliorer FCP et LCP.
Analyser le chemin critique de rendu (DevTools)
Apprenez à analyser le chemin critique avec les DevTools : ressources critiques, allers-retours réseau et octets pour accélérer le rendu.
Parcours d'apprentissage recommandé
Suivez ce chemin pour progresser efficacement dans cette thématique.
Choisir le bon niveau de compression des images
Trouvez le bon équilibre entre qualité et poids de vos images grâce à la compression avec et sans perte pour…
Automatiser la compression et l'encodage des images
Intégrez la compression et l'encodage de vos images à votre workflow pour générer automatiquement des sources légères et performantes.
Précharger les images responsives (imagesrcset, imagesizes)
Apprenez à précharger vos images responsives avec imagesrcset et imagesizes pour accélérer l'affichage et améliorer votre LCP.
Et 39 autres tutoriels pour aller plus loin
Voir tous les tutorielsAccompagnement personnalisé
Les tutoriels ne suffisent pas ? Nos experts SEO vous accompagnent pour développer une stratégie sur-mesure.
- Audit SEO complet de votre site
- Formation personnalisée
- Accompagnement sur mesure