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

5 694 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

×