Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
10 CONSEILS POUR BOOSTER LES
PERFORMANCES DE VOTRE SITE SOUS
WORDPRESS
AURÉLIEN DENIS - #GEN4 - 22 SEPTEMBRE 2016
AURÉLIEN
DENIS
Président de l’association
WordPress Francophone (WPFR)
@wpchannel

wpchannel.com / wpfr.net
AURÉLIEN DENIS...
NOTIONS DE BASE
AURÉLIEN DENIS - #GEN4 - 22 SEPTEMBRE 2016
POURQUOI OPTIMISER LA VITESSE DE CHARGEMENT
DE VOTRE SITE WEB ?
Site lent
Expérience
utilisateur
détériorée
Référencement
...
POURQUOI OPTIMISER LA VITESSE DE CHARGEMENT
DE VOTRE SITE WEB ?
Site rapide
Expérience
utilisateur
améliorée
Référencement...
LES 3 PILIERS DE L’OPTIMISATION
Temps de
chargement
Poids de pageRequêtes HTTP
QUELS SONT LES LEVIERS
D’ACTIONS ?
AURÉLIEN DENIS - #GEN4 - 22 SEPTEMBRE 2016
#1 - L’HÉBERGEMENT / LE SERVEUR
• Vérifier la configuration avec phpinfo();
• Augmenter les valeurs de post_max_size,
upload...
#2 - L’INSTALLATION DE WORDPRESS
Améliorer le fichier wp-config.php en augmentant la limite
mémoire à 128 Mo et en limitant...
#3 - LA BASE DE DONNÉES
• Passer à MySQL 5.6+ ou MariaDB
• Lancer des optimisations régulières
• Nettoyer la base des révi...
#4 - LE CHOIX DU THÈME
• Analyser les requêtes sur les sites de démonstration des thèmes
premium
• Ne tenez pas compte du ...
#5 - LE CHOIX DES EXTENSIONS
• Un nombre élevé d’extensions n’est pas un problème en soi
• Extensions payantes ne rime pas...
#6 - LE RECOURS AU CACHE
• Minification
• Concaténation
• Chargement différé des images, vidéos, iframes via la technique d...
#7 - LES WEB-FONTS
• Limitez-vous à deux polices !
• Chargez uniquement les langues et les niveaux de graisse
nécessaires
...
#8 - LES JAVASCRIPTS
• Corrigez toutes les erreurs remontées par la console (pas seulement la page
d’accueil)
• Vérifiez qu...
#9 - LES CSS
• Évitez l’inline CSS autant que possible : tous les thèmes premium ont
recours à cette technique pour des ra...
#10 - LES IMAGES
• Utilisez des tailles prédéfinies pour ne jamais charger l’image complète
• Régénérez les tailles avec Si...
ET AUSSI
• Un bon design se doit d’être au service de la performance
• Pensez à l’architecture du contenu
• HTTP / 2 (requ...
LES RESSOURCES
• Outils de développement de votre navigateur (Firefox mon préféré)
• Outils d’analyse en ligne (DareBoost,...
« Rapidité d’affichage et richesse
fonctionnelle d’un site Web ne doivent
pas se faire au détriment l’un de l’autre.
Tout es...
MERCI !
AURÉLIEN DENIS - #GEN4 - 22 SEPTEMBRE 2016
@wpchannel
Prochain SlideShare
Chargement dans…5
×

10 conseils pour booster les performances de votre site sous WordPress

3 061 vues

Publié le

Passage en revue de l'ensemble des leviers d'actions pour améliorer le temps de chargement de vos pages. Astuces, conseils et ressources appliqués à WordPress.

Publié dans : Internet
  • Soyez le premier à commenter

10 conseils pour booster les performances de votre site sous WordPress

  1. 1. 10 CONSEILS POUR BOOSTER LES PERFORMANCES DE VOTRE SITE SOUS WORDPRESS AURÉLIEN DENIS - #GEN4 - 22 SEPTEMBRE 2016
  2. 2. AURÉLIEN DENIS Président de l’association WordPress Francophone (WPFR) @wpchannel
 wpchannel.com / wpfr.net AURÉLIEN DENIS - #GEN4 - 22 SEPTEMBRE 2016
  3. 3. NOTIONS DE BASE AURÉLIEN DENIS - #GEN4 - 22 SEPTEMBRE 2016
  4. 4. POURQUOI OPTIMISER LA VITESSE DE CHARGEMENT DE VOTRE SITE WEB ? Site lent Expérience utilisateur détériorée Référencement mal optimisé Stagnation du trafic Mauvais taux de conversion
  5. 5. POURQUOI OPTIMISER LA VITESSE DE CHARGEMENT DE VOTRE SITE WEB ? Site rapide Expérience utilisateur améliorée Référencement optimisé Augmentation du trafic Meilleur taux de conversion
  6. 6. LES 3 PILIERS DE L’OPTIMISATION Temps de chargement Poids de pageRequêtes HTTP
  7. 7. QUELS SONT LES LEVIERS D’ACTIONS ? AURÉLIEN DENIS - #GEN4 - 22 SEPTEMBRE 2016
  8. 8. #1 - L’HÉBERGEMENT / LE SERVEUR • Vérifier la configuration avec phpinfo(); • Augmenter les valeurs de post_max_size, upload_max_filesize, memory_limit • Passer à PHP 5.6 ou PHP 7 • Activer la compression GZIP • Passer sur Litespeed ou nginx mais attention à la compatibilité
  9. 9. #2 - L’INSTALLATION DE WORDPRESS Améliorer le fichier wp-config.php en augmentant la limite mémoire à 128 Mo et en limitant le nombre de révisions
 define('WP_MEMORY_LIMIT', ‘128M’); define(‘WP_POST_REVISIONS’, 3);
  10. 10. #3 - LA BASE DE DONNÉES • Passer à MySQL 5.6+ ou MariaDB • Lancer des optimisations régulières • Nettoyer la base des révisions inutiles • Analysez les requêtes avec Query Monitor
  11. 11. #4 - LE CHOIX DU THÈME • Analyser les requêtes sur les sites de démonstration des thèmes premium • Ne tenez pas compte du poids de la page (votre contenu sera différent), ni du temps de chargement (vous n’aurez pas forcément un serveur dédié) • Privilégiez les thèmes sur-mesure !
  12. 12. #5 - LE CHOIX DES EXTENSIONS • Un nombre élevé d’extensions n’est pas un problème en soi • Extensions payantes ne rime pas forcément avec qualité • Fuyez les builders • Désactivez le chargement des CSS / JS et codez-le à votre sauce !
  13. 13. #6 - LE RECOURS AU CACHE • Minification • Concaténation • Chargement différé des images, vidéos, iframes via la technique de lazy-loading • Extensions gratuites (W3 Total Cache) ou payantes (WP Rocket)
  14. 14. #7 - LES WEB-FONTS • Limitez-vous à deux polices ! • Chargez uniquement les langues et les niveaux de graisse nécessaires • Projet Web Font Loader sur GitHub pour de multiples fournisseurs • Pour les polices d’icônes, embarquez seulement les caractères utiles en générant votre propre police (Ico Moon App) • Respectez l’ordre de chargement : EOT, WOFF2, WOFF, TTF, puis SVG
  15. 15. #8 - LES JAVASCRIPTS • Corrigez toutes les erreurs remontées par la console (pas seulement la page d’accueil) • Vérifiez qu’un script n’est pas chargé deux fois (boutons de réseaux sociaux, scripts Google, etc.) • Attention aux requêtes Ajax qui bouclent • Préférez un chargement local plutôt que sur un CDN y compris Google (cf. la fin de Open Sans sur les WordPress) • Pensez code asynchrone • wp_dequeue_script / wp_dequeue_style
  16. 16. #9 - LES CSS • Évitez l’inline CSS autant que possible : tous les thèmes premium ont recours à cette technique pour des raisons de facilité • Allégez vos frameworks (compilateur de Twitter Bootstrap par exemple), inutile de tout embarquer • Pas de @import mais une fonction officielle qui gère les dépendances pour les thèmes enfants • Les media queries en fin de fichiers • Segmentez vos CSS et pour un chargement conditionné au contenu
  17. 17. #10 - LES IMAGES • Utilisez des tailles prédéfinies pour ne jamais charger l’image complète • Régénérez les tailles avec Simple Image Sizes • Compressez vos images avant envoi ou laissez faire WordPress (82% de compression sur les JPEG depuis 4.5) avec le filtre jpeg_quality • Pas de redimensionnement des images par le navigateur • SVG pour les logos ou les pictogrammes • Optimisez vos favicons avec Real Favicon Generator
  18. 18. ET AUSSI • Un bon design se doit d’être au service de la performance • Pensez à l’architecture du contenu • HTTP / 2 (requiert un certificat SSL) • Testez sur différents navigateurs / systèmes d’exploitations / périphériques
  19. 19. LES RESSOURCES • Outils de développement de votre navigateur (Firefox mon préféré) • Outils d’analyse en ligne (DareBoost, WebPageTest, GTmetrix, Pingdom Tools, SSL Checker, intoDNS) • Activer les outils de débogage de WordPress dans le 
 wp-config.php • Pour les développeurs : conférence du WP Tech 2015 AURÉLIEN DENIS - #GEN4 - 22 SEPTEMBRE 2016
  20. 20. « Rapidité d’affichage et richesse fonctionnelle d’un site Web ne doivent pas se faire au détriment l’un de l’autre. Tout est affaire de compromis et de bonnes pratiques de développement. »
  21. 21. MERCI ! AURÉLIEN DENIS - #GEN4 - 22 SEPTEMBRE 2016 @wpchannel

×