Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
+Optimiserles performancesdans WordPress      Nicolas Juen & Benjamin Niess                25 novembre 2011
+    Le saviez-vous ?       100 ms of extra load time caused a 1% drop in sales        (source: Greg Linden, Amazon).
+    Le saviez-vous ?       500 ms of extra load time caused 20% fewer searches        (source: Marrissa Mayer, Google).
+    Le saviez-vous ?       400 ms of extra load time caused a 5–9% increase in the number of        people who clicked “...
+    Pourquoi optimiser ?       Pour le confort de vos visiteurs       Pour le SEO       Pour économiser les ressources...
+    Ce dont nous ne parlerons pas       Architecture serveur           Serveur web alternatif : Nginx, Cherokee, Lightt...
+    Un site web, c’est:               Site web     Client               Serveur     HTML           PHP       Apache
+    Les images
+    Le responsive       1 site       Le design s’adapte à la taille de l’écran       Pourquoi charger une image énorme...
+    Multiplication des supports                       Site          Mobile   Tablette   Ordinateur   Télévision
Comment générer ces tailles et bien plus encore ?
+    Les tailles d’images dans    WordPress       Par défaut           Thumbnail, Large, Medium, Full       Script PHP ...
+    Gestion native des tailles d’images       La solution parfaite ?           Nombre illimité           S’applique à ...
Que faire pour palier à ces manquements ?
+    Quelques petits plugins…       Simple image sizes       Dynamic Image Resizer       WP Smush it       Post Thumbn...
+    L’inclusion des fichier
+    Contexte       Je souhaite agrémenter mon site d’un formulaire de contact et        d’un slider       Solution ?   ...
+    Problèmes       Le plugin Contact Form 7 embarque ses fichiers CSS et JS sur        toutes les pages       Mon scri...
Comment ne charger que ce qui nous intéresse ?
+    Des fonctions pour charger les    fichiers CSS et JS       Les fonctions pour charger un script ou une feuille de st...
+    Pourquoi utiliser ces fonctions ?       Ces fonctions peuvent être appelées doù vous le souhaitez et        non obli...
+    Un chargement de fichiers sous    conditions       Découper ses fichiers selon leur fonctionnalités et leur contexte...
+    Solution pour mon slider       HTML          PHP       Apache
+    Solution pour mon formulaire de    contact       HTML         PHP         Apache
+    Autre avantage : la possibilité de    minifier ses fichiers       Kesako ?       Pourquoi minifier ?       Plugin:...
+    Minifier ses fichiers       Démonstration de WP Minify            HTML                     PHP   Apache
+    Les sprites       Comme pour les scripts et les feuilles de style, il est possible et        conseillé de regrouper ...
+    PHP    Gestion du cache
+    Du cache…    Cache objet    Cache statique    Transient
+    Cache objet       Natif !       Temporaire nativement (mémoire PHP)       Avec cache : 15 requêtes       Sans cac...
+    Cache objet persistant       Memcache - Indépendant       APC - PHP       Xcache - PHP       Ils utilisent les fo...
+    Transients       Dans les options       Entre le cache objet et l’option       Pas le même usage !       Exemple ...
+    Les extensions de cache       Cache statique           WP Super Cache           BatCache           HyperCache    ...
+    Outils de profiling       Xhprof       Debug queries            HTML        PHP   Apache
+    HTML   PHP   Apache
+    HTML   PHP   Apache
+
+    Objectif zero erreur 404
Pourquoi éviter les erreurs 404 ?
Démonstration
+    Comment traquer les erreurs 404 ?       Depuis linspecteur de votre navigateur       Avec lextensions Seo Ultimate ...
+ Optimisation du nombre  de requêtes
+    Fonctionnement général de    WordPress       Détection de l’URL       Interrogation de la base de données (WP_Query...
+    L’utilisation de la fonction    query_posts() dans les templates       query_posts() ?       Très courant dans les ...
Comment modifier le comportement de WordPress        sans freiner les performances ?
+    query_posts VS pre_get_posts       En venant se greffer à la requête native de WordPress       Possibilité de modif...
+ Limiter les appels aux  API externes
+    Limiter les appels aux API externes       Appeler un contenu qui vient de lextérieur cest sexposer à        deux pri...
+    Gestion du cache
+    Fichier .htaccess       Expiration des fichiers       Tous les fichiers restent du côté client => moins de bande   ...
+    Fichier .htaccess       Etags ( sous conditions )           Un seul serveur           Plusieurs serveurs         ...
+    Fichier .htaccess       Gzip           Effectué lors de lenvoi vers le client           Un gain notable          ...
+    Fichier .htaccess       Formats de fichiers reconnus           Nouveaux formats pas forcément reconnus            ...
+    Fichier .htaccess    petit point pour OVH       Activation pour OVH           Source : herewithme.fr               ...
+    Fichier .htaccess    Pour finir       Toutes ces astuces sont rassemblées dans le fichier .htaccess        du projet...
+    Résultat
+    Outils    Mesurer les performances
+    Mesurer les performances       Pagespeed
+    Mesurer les performances       Yslow
+    Mesurer les performances       Debug Bar
+    Mesurer les performances       Xhprof
+    Mesurer les performances       Webpagetest.org
+    Mesurer les performances       http://tools.pingdom.com/fpt/
+    Merci       Nicolas Juen                     Benjamin Niess       @raherian                       @benjaminniess ...
Upcoming SlideShare
Loading in …5
×

Optimiser les performances dans Wordpress

16,799 views

Published on

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 ?

Published in: Technology
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×