Optimiser les performances dans Wordpress

14 595 vues

Publié le

WordPress est souvent considéré à tort comme un outil gourmand et source de ralentissement sur un projet conséquent à fort trafic. Lors de cette conférence, Benjamin et Nicolas verront que ces présumées lacunes sont généralement dues à une mauvaise utilisation du CMS. Ils aborderont un ensemble de bonnes pratiques. Comment limiter le nombre de requêtes SQL ? Quel type de cache utiliser et dans quelles situations ? Pourquoi la fonction query_posts doit être à tout prix écartée ? Quelles extensions utiliser pour analyser et améliorer la performance ?

Publié dans : Technologie
0 commentaire
7 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
14 595
Sur SlideShare
0
Issues des intégrations
0
Intégrations
7 294
Actions
Partages
0
Téléchargements
103
Commentaires
0
J’aime
7
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Optimiser les performances dans Wordpress

  1. 1. +Optimiserles performancesdans WordPress Nicolas Juen & Benjamin Niess 25 novembre 2011
  2. 2. + Le saviez-vous ?  100 ms of extra load time caused a 1% drop in sales (source: Greg Linden, Amazon).
  3. 3. + Le saviez-vous ?  500 ms of extra load time caused 20% fewer searches (source: Marrissa Mayer, Google).
  4. 4. + Le saviez-vous ?  400 ms of extra load time caused a 5–9% increase in the number of people who clicked “back” before the page even loaded (source: Nicole Sullivan, Yahoo!).
  5. 5. + Pourquoi optimiser ?  Pour le confort de vos visiteurs  Pour le SEO  Pour économiser les ressources de votre serveur  Pour sauver la planète…
  6. 6. + Ce dont nous ne parlerons pas  Architecture serveur  Serveur web alternatif : Nginx, Cherokee, Lighttpd, IIS  Machine, CPU, RAM  Virtualisation VPS  Reverse Proxy : Squid, Varnish  Loadbalancing  Cloud  Amazon EC2, Microsoft Azure  CDN  Amazon S3, Cloudflare, Akamai
  7. 7. + Un site web, c’est: Site web Client Serveur HTML PHP Apache
  8. 8. + Les images
  9. 9. + Le responsive  1 site  Le design s’adapte à la taille de l’écran  Pourquoi charger une image énorme si on a un tout petit écran ? 640x360 480x270 320x180 47ko 29ko 15ko HTML PHP Apache
  10. 10. + Multiplication des supports Site Mobile Tablette Ordinateur Télévision
  11. 11. Comment générer ces tailles et bien plus encore ?
  12. 12. + Les tailles d’images dans WordPress  Par défaut  Thumbnail, Large, Medium, Full  Script PHP  Timthumb  Multisite  Temps de réponse  Peu maintenable, mises à jour fastidieuses  Redimensionnement pré-upload  Long…  Thèmes contraignants HTML PHP Apache
  13. 13. + Gestion native des tailles d’images  La solution parfaite ?  Nombre illimité  S’applique à tous les médias  Très peu de développement  Gain de performance notable  Les inconvénients  Espace de stockage limité  Des images générées inutilement  Images non régénérées si nouvelle taille ou taille modifiée HTML PHP Apache
  14. 14. Que faire pour palier à ces manquements ?
  15. 15. + Quelques petits plugins…  Simple image sizes  Dynamic Image Resizer  WP Smush it  Post Thumbnail Editor HTML PHP Apache
  16. 16. + L’inclusion des fichier
  17. 17. + Contexte  Je souhaite agrémenter mon site d’un formulaire de contact et d’un slider  Solution ?  Contrainte ? HTML PHP Apache
  18. 18. + Problèmes  Le plugin Contact Form 7 embarque ses fichiers CSS et JS sur toutes les pages  Mon script de slider est également chargé sur toutes les pages HTML PHP Apache
  19. 19. Comment ne charger que ce qui nous intéresse ?
  20. 20. + Des fonctions pour charger les fichiers CSS et JS  Les fonctions pour charger un script ou une feuille de style  wp_enqueue_style( $handle, $src, $deps, $ver, $media );  wp_enqueue_script($handle,$src,$deps,$ver,$in_footer); HTML PHP Apache
  21. 21. + Pourquoi utiliser ces fonctions ?  Ces fonctions peuvent être appelées doù vous le souhaitez et non obligatoirement depuis le fichier header.php  Depuis un plugin  Depuis le fichier functions.php  Depuis un template  Grâce au système de dépendances, pas de conflit  Il est possible et vivement conseillé dencadrer les appels à ces fonctions de conditions HTML PHP Apache
  22. 22. + Un chargement de fichiers sous conditions  Découper ses fichiers selon leur fonctionnalités et leur contexte dutilisation.  Différencier ladmin du front  Utiliser les conditionnal tags (is_home, is_single, is_post_type_archive...)  Cas particulier : Ecrire au sein des templates HTML PHP Apache
  23. 23. + Solution pour mon slider HTML PHP Apache
  24. 24. + Solution pour mon formulaire de contact HTML PHP Apache
  25. 25. + Autre avantage : la possibilité de minifier ses fichiers  Kesako ?  Pourquoi minifier ?  Plugin: WP Minify, W3 Total Cache HTML PHP Apache
  26. 26. + Minifier ses fichiers  Démonstration de WP Minify HTML PHP Apache
  27. 27. + Les sprites  Comme pour les scripts et les feuilles de style, il est possible et conseillé de regrouper plusieurs images en une seule  Exemple dans l’administration de WordPress  Exemple d’utilitaire  http://spritecow.com HTML PHP Apache
  28. 28. + PHP Gestion du cache
  29. 29. + Du cache… Cache objet Cache statique Transient
  30. 30. + Cache objet  Natif !  Temporaire nativement (mémoire PHP)  Avec cache : 15 requêtes  Sans cache : 354 requêtes  Usage :  Bien, mais peut mieux faire ! HTML PHP Apache
  31. 31. + Cache objet persistant  Memcache - Indépendant  APC - PHP  Xcache - PHP  Ils utilisent les fonctionnalités du cache objet HTML PHP Apache
  32. 32. + Transients  Dans les options  Entre le cache objet et l’option  Pas le même usage !  Exemple HTML PHP Apache
  33. 33. + Les extensions de cache  Cache statique  WP Super Cache  BatCache  HyperCache  W3 Total Cache : usine gaz HTML PHP Apache
  34. 34. + Outils de profiling  Xhprof  Debug queries HTML PHP Apache
  35. 35. + HTML PHP Apache
  36. 36. + HTML PHP Apache
  37. 37. +
  38. 38. + Objectif zero erreur 404
  39. 39. Pourquoi éviter les erreurs 404 ?
  40. 40. Démonstration
  41. 41. + Comment traquer les erreurs 404 ?  Depuis linspecteur de votre navigateur  Avec lextensions Seo Ultimate (404 monitor)  Google webmaster tools HTML PHP Apache
  42. 42. + Optimisation du nombre de requêtes
  43. 43. + Fonctionnement général de WordPress  Détection de l’URL  Interrogation de la base de données (WP_Query)  Affichage du template correspondant  home.php si page d’accueil  category.php si vue catégorie  single.php si article etc. HTML PHP Apache
  44. 44. + L’utilisation de la fonction query_posts() dans les templates  query_posts() ?  Très courant dans les thèmes (gratuits ou non)  Les requêtes sont exécutées deux fois HTML PHP Apache
  45. 45. Comment modifier le comportement de WordPress sans freiner les performances ?
  46. 46. + query_posts VS pre_get_posts  En venant se greffer à la requête native de WordPress  Possibilité de modifier tous les paramètres que l’on souhaite HTML PHP Apache
  47. 47. + Limiter les appels aux API externes
  48. 48. + Limiter les appels aux API externes  Appeler un contenu qui vient de lextérieur cest sexposer à deux principaux risques  Le serveur externe peut être lent voir inopérant  Vous pouvez être limité à un certain nombre de requêtes par jour  Solution :  Appeler les webservices non pas depuis votre code applicatif (PHP) mais depuis le navigateur de vos visiteurs (AJAX)  Si le serveur ne répond pas notre page se chargera rapidement HTML PHP Apache
  49. 49. + Gestion du cache
  50. 50. + Fichier .htaccess  Expiration des fichiers  Tous les fichiers restent du côté client => moins de bande passante HTML PHP Apache
  51. 51. + Fichier .htaccess  Etags ( sous conditions )  Un seul serveur  Plusieurs serveurs  Gestion des versions HTML PHP Apache
  52. 52. + Fichier .htaccess  Gzip  Effectué lors de lenvoi vers le client  Un gain notable  JS  152,6 Ko -> 49,5 Ko  ~32% de gain  Applicable aux éléments de type texte HTML PHP Apache
  53. 53. + Fichier .htaccess  Formats de fichiers reconnus  Nouveaux formats pas forcément reconnus  Mpg4  Woff  otf...  Temps perdu à se demander quel est ce fichier HTML PHP Apache
  54. 54. + Fichier .htaccess petit point pour OVH  Activation pour OVH  Source : herewithme.fr HTML PHP Apache
  55. 55. + Fichier .htaccess Pour finir  Toutes ces astuces sont rassemblées dans le fichier .htaccess du projet html5 boilerplate : html5boilerplate.com  Bien penser à n’utiliser que les parties qui nous intéressent HTML PHP Apache
  56. 56. + Résultat
  57. 57. + Outils Mesurer les performances
  58. 58. + Mesurer les performances  Pagespeed
  59. 59. + Mesurer les performances  Yslow
  60. 60. + Mesurer les performances  Debug Bar
  61. 61. + Mesurer les performances  Xhprof
  62. 62. + Mesurer les performances  Webpagetest.org
  63. 63. + Mesurer les performances  http://tools.pingdom.com/fpt/
  64. 64. + Merci  Nicolas Juen  Benjamin Niess  @raherian  @benjaminniess  www.nicolas-juen.fr  www.benjamin-niess.fr

×