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

2 173 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
0 commentaire
3 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
2 173
Sur SlideShare
0
Issues des intégrations
0
Intégrations
1 775
Actions
Partages
0
Téléchargements
17
Commentaires
0
J’aime
3
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

×