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 ?

1. +
Optimiser
les performances
dans 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 d'où 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é d'encadrer 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
d'utilisation.
 Différencier l'admin 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 l'inspecteur de votre navigateur
 Avec l'extensions 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 l'extérieur c'est s'exposer à
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 l'envoi 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