Optimiser les performances dans Wordpress

  • 13,223 views
Uploaded 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 …

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 ?

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
13,223
On Slideshare
0
From Embeds
0
Number of Embeds
11

Actions

Shares
Downloads
91
Comments
0
Likes
6

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. +Optimiserles performancesdans WordPress Nicolas Juen & Benjamin Niess 25 novembre 2011
  • 2. + Le saviez-vous ?  100 ms of extra load time caused a 1% drop in sales (source: Greg Linden, Amazon).
  • 3. + Le saviez-vous ?  500 ms of extra load time caused 20% fewer searches (source: Marrissa Mayer, Google).
  • 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. + Pourquoi optimiser ?  Pour le confort de vos visiteurs  Pour le SEO  Pour économiser les ressources de votre serveur  Pour sauver la planète…
  • 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. + Un site web, c’est: Site web Client Serveur HTML PHP Apache
  • 8. + Les images
  • 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. + Multiplication des supports Site Mobile Tablette Ordinateur Télévision
  • 11. Comment générer ces tailles et bien plus encore ?
  • 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. + 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. Que faire pour palier à ces manquements ?
  • 15. + Quelques petits plugins…  Simple image sizes  Dynamic Image Resizer  WP Smush it  Post Thumbnail Editor HTML PHP Apache
  • 16. + L’inclusion des fichier
  • 17. + Contexte  Je souhaite agrémenter mon site d’un formulaire de contact et d’un slider  Solution ?  Contrainte ? HTML PHP Apache
  • 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. Comment ne charger que ce qui nous intéresse ?
  • 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. + 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. + 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. + Solution pour mon slider HTML PHP Apache
  • 24. + Solution pour mon formulaire de contact HTML PHP Apache
  • 25. + Autre avantage : la possibilité de minifier ses fichiers  Kesako ?  Pourquoi minifier ?  Plugin: WP Minify, W3 Total Cache HTML PHP Apache
  • 26. + Minifier ses fichiers  Démonstration de WP Minify HTML PHP Apache
  • 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. + PHP Gestion du cache
  • 29. + Du cache… Cache objet Cache statique Transient
  • 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. + Cache objet persistant  Memcache - Indépendant  APC - PHP  Xcache - PHP  Ils utilisent les fonctionnalités du cache objet HTML PHP Apache
  • 32. + Transients  Dans les options  Entre le cache objet et l’option  Pas le même usage !  Exemple HTML PHP Apache
  • 33. + Les extensions de cache  Cache statique  WP Super Cache  BatCache  HyperCache  W3 Total Cache : usine gaz HTML PHP Apache
  • 34. + Outils de profiling  Xhprof  Debug queries HTML PHP Apache
  • 35. + HTML PHP Apache
  • 36. + HTML PHP Apache
  • 37. +
  • 38. + Objectif zero erreur 404
  • 39. Pourquoi éviter les erreurs 404 ?
  • 40. Démonstration
  • 41. + Comment traquer les erreurs 404 ?  Depuis linspecteur de votre navigateur  Avec lextensions Seo Ultimate (404 monitor)  Google webmaster tools HTML PHP Apache
  • 42. + Optimisation du nombre de requêtes
  • 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. + 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. Comment modifier le comportement de WordPress sans freiner les performances ?
  • 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. + Limiter les appels aux API externes
  • 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. + Gestion du cache
  • 50. + Fichier .htaccess  Expiration des fichiers  Tous les fichiers restent du côté client => moins de bande passante HTML PHP Apache
  • 51. + Fichier .htaccess  Etags ( sous conditions )  Un seul serveur  Plusieurs serveurs  Gestion des versions HTML PHP Apache
  • 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. + 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. + Fichier .htaccess petit point pour OVH  Activation pour OVH  Source : herewithme.fr HTML PHP Apache
  • 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. + Résultat
  • 57. + Outils Mesurer les performances
  • 58. + Mesurer les performances  Pagespeed
  • 59. + Mesurer les performances  Yslow
  • 60. + Mesurer les performances  Debug Bar
  • 61. + Mesurer les performances  Xhprof
  • 62. + Mesurer les performances  Webpagetest.org
  • 63. + Mesurer les performances  http://tools.pingdom.com/fpt/
  • 64. + Merci  Nicolas Juen  Benjamin Niess  @raherian  @benjaminniess  www.nicolas-juen.fr  www.benjamin-niess.fr