Optimiser les performances dans Wordpress

+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 “back” before the page even loaded (source: Nicole Sullivan, Yahoo!).

+ Pourquoi optimiser ?  Pour le confort de vos visiteurs  Pour le SEO  Pour économiser les ressources de votre serveur  Pour sauver la planète…

+ 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

+ 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 si on a un tout petit écran ? 640x360 480x270 320x180 47ko 29ko 15ko HTML PHP Apache

+ 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  Timthumb  Multisite  Temps de réponse  Peu maintenable, mises à jour fastidieuses  Redimensionnement pré-upload  Long…  Thèmes contraignants HTML PHP Apache

+ 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

Que faire pour palier à ces manquements ?

+ Quelques petits plugins…  Simple image sizes  Dynamic Image Resizer  WP Smush it  Post Thumbnail Editor HTML PHP Apache

+ L’inclusion des fichier

+ Contexte  Je souhaite agrémenter mon site d’un formulaire de contact et d’un slider  Solution ?  Contrainte ? HTML PHP Apache

+ 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

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 style  wp_enqueue_style( $handle, $src, $deps, $ver, $media );  wp_enqueue_script($handle,$src,$deps,$ver,$in_footer); HTML PHP Apache

+ 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

+ 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

+ 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: WP Minify, W3 Total Cache HTML PHP Apache

+ 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 plusieurs images en une seule  Exemple dans l’administration de WordPress  Exemple d’utilitaire  http://spritecow.com HTML PHP Apache

+ 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 cache : 354 requêtes  Usage :  Bien, mais peut mieux faire ! HTML PHP Apache

+ Cache objet persistant  Memcache - Indépendant  APC - PHP  Xcache - PHP  Ils utilisent les fonctionnalités du cache objet HTML PHP Apache

+ Transients  Dans les options  Entre le cache objet et l’option  Pas le même usage !  Exemple HTML PHP Apache

+ Les extensions de cache  Cache statique  WP Super Cache  BatCache  HyperCache  W3 Total Cache : usine gaz HTML PHP Apache

+ Outils de profiling  Xhprof  Debug queries 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 (404 monitor)  Google webmaster tools HTML PHP Apache

+ 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)  Affichage du template correspondant  home.php si page d’accueil  category.php si vue catégorie  single.php si article etc. HTML PHP Apache

+ 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

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 modifier tous les paramètres que l’on souhaite HTML PHP Apache

+ Limiter les appels aux API externes

+ 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

+ Gestion du cache

+ Fichier .htaccess  Expiration des fichiers  Tous les fichiers restent du côté client => moins de bande passante HTML PHP Apache

+ Fichier .htaccess  Etags ( sous conditions )  Un seul serveur  Plusieurs serveurs  Gestion des versions HTML PHP Apache

+ 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

+ 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

+ Fichier .htaccess petit point pour OVH  Activation pour OVH  Source : herewithme.fr HTML PHP Apache

+ 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

+ 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  www.nicolas-juen.fr  www.benjamin-niess.fr

http://www.boiteaweb.fr	1541
http://wpchannel.com	1339
http://www.scoop.it	1248
http://www.wordpress-fr.net	1038
http://www.insidedaweb.com	359
http://www.undernews.fr	156
http://www.florentparcevaux.com	148
http://www.synergeek.fr	113
http://zebiz.net	84
http://paper.li	52
http://boiteaweb.fr	30
http://feeds.feedburner.com	22
http://a0.twimg.com	10
http://synergeek.fr	9
http://denkkomplexmacheinfach.wordpress.com	7
http://baw-temp.com	5
http://www.ig.gmodules.com	5
http://us-w1.rockmelt.com	4
http://picardie-muses.fr	3
http://feeds2.feedburner.com	3
http://lanyrd.com	3
http://parentsressources.mm.libergia.com	2
http://www.viteunsiteweb.com	2
http://127.0.0.1	2
http://webcache.googleusercontent.com	2
http://www.twylah.com	1
http://cp1.host-ed.net	1
http://www.parishippique.com	1
http://preprod.vauban.logecreative.fr	1
http://paul-antropius-computer.local	1
http://sebastien-veraguas.fr	1

Optimiser les performances dans Wordpress

by Nicolas Juen

Accessibility

Categories

Upload Details

Usage Rights

31 Embeds 6,193

Statistics

Optimiser les performances dans Wordpress Presentation Transcript