10 conseils pour booster les performances de votre site sous WordPress

1,681 views

Published on

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.

Published in: Internet
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,681
On SlideShare
0
From Embeds
0
Number of Embeds
1,442
Actions
Shares
0
Downloads
15
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

×