Le document présente des stratégies d'optimisation des performances pour les sites WordPress, mettant en évidence l'impact du temps de chargement sur les ventes et les recherches. Il aborde des solutions telles que la gestion des tailles d'images, le chargement conditionnel des scripts et l'utilisation de cache pour améliorer la réactivité et la performance. Enfin, il recommande des outils et plugins pour mesurer et optimiser les performances du site tout en évitant les erreurs 404.

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