optimiser les performances dans wordpress

64
+ Nicolas Juen & Benjamin Niess 25 novembre 2011 Optimiser les performances dans WordPress

Upload: nicolas-juen

Post on 04-Dec-2014

13.993 views

Category:

Technology


1 download

DESCRIPTION

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 ?

TRANSCRIPT

Page 1: Optimiser les performances dans Wordpress

+

Nicolas Juen & Benjamin Niess25 novembre 2011

Optimiser les performances dans WordPress

Page 2: Optimiser les performances dans Wordpress

+Le saviez-vous ?

100 ms of extra load time caused a 1% drop in sales(source: Greg Linden, Amazon).

Page 3: Optimiser les performances dans Wordpress

+Le saviez-vous ?

500 ms of extra load time caused 20% fewer searches(source: Marrissa Mayer, Google).

Page 4: Optimiser les performances dans Wordpress

+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!).

Page 5: Optimiser les performances dans Wordpress

+Pourquoi optimiser ?

Pour le confort de vos visiteurs

Pour le SEO

Pour économiser les ressources de votre serveur

Pour sauver la planète…

Page 6: Optimiser les performances dans Wordpress

+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

Page 7: Optimiser les performances dans Wordpress

+Un site web, c’est:

Site webClien

tHTML

Serveur

PHP Apache

Page 8: Optimiser les performances dans Wordpress

+

Les images

Page 9: Optimiser les performances dans Wordpress

+

HTML PHP Apache

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 ?

640x36047ko

480x27029ko

320x18015ko

Page 10: Optimiser les performances dans Wordpress

+Multiplication des supports

Site

Mobile Tablette Ordinateur Télévision

Page 11: Optimiser les performances dans Wordpress

Comment générer ces tailles et bien plus encore ?

Page 12: Optimiser les performances dans Wordpress

+

HTML PHP Apache

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

Page 13: Optimiser les performances dans Wordpress

+

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

Page 14: Optimiser les performances dans Wordpress

Que faire pour palier à ces manquements ?

Page 15: Optimiser les performances dans Wordpress

+

HTML PHP Apache

Quelques petits plugins…

Simple image sizes

Dynamic Image Resizer

WP Smush it

Post Thumbnail Editor

Page 16: Optimiser les performances dans Wordpress

+

L’inclusion des fichier

Page 17: Optimiser les performances dans Wordpress

+

HTML PHP Apache

Contexte

Je souhaite agrémenter mon site d’un formulaire de contact et d’un slider

Solution ?

Contrainte ?

Page 18: Optimiser les performances dans Wordpress

+

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

Page 19: Optimiser les performances dans Wordpress

Comment ne charger que ce qui nous intéresse ?

Page 20: Optimiser les performances dans Wordpress

+

HTML PHP Apache

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);

Page 21: Optimiser les performances dans Wordpress

+

HTML PHP Apache

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

Page 22: Optimiser les performances dans Wordpress

+

HTML PHP Apache

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

Page 23: Optimiser les performances dans Wordpress

+

HTML PHP Apache

Solution pour mon slider

Page 24: Optimiser les performances dans Wordpress

+

HTML PHP Apache

Solution pour mon formulaire de contact

Page 25: Optimiser les performances dans Wordpress

+

HTML PHP Apache

Autre avantage : la possibilité de minifier ses fichiers

Kesako ?

Pourquoi minifier ?

Plugin: WP Minify, W3 Total Cache

Page 26: Optimiser les performances dans Wordpress

+

HTML PHP Apache

Minifier ses fichiers Démonstration de WP Minify

Page 27: Optimiser les performances dans Wordpress

+

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

Page 28: Optimiser les performances dans Wordpress

+

PHPGestion du cache

Page 29: Optimiser les performances dans Wordpress

+Du cache…

Cache objet

Cache statique

Transient

Page 30: Optimiser les performances dans Wordpress

+

HTML PHP Apache

Cache objet

Natif !

Temporaire nativement (mémoire PHP)

Avec cache : 15 requêtes

Sans cache : 354 requêtes

Usage :

Bien, mais peut mieux faire !

Page 31: Optimiser les performances dans Wordpress

+

HTML PHP Apache

Cache objet persistant

Memcache - Indépendant

APC - PHP

Xcache - PHP

Ils utilisent les fonctionnalités du cache objet

Page 32: Optimiser les performances dans Wordpress

+

HTML PHP Apache

Transients

Dans les options

Entre le cache objet et l’option

Pas le même usage !

Exemple

Page 33: Optimiser les performances dans Wordpress

+

HTML PHP Apache

Les extensions de cache

Cache statique WP Super Cache BatCache HyperCache

W3 Total Cache : usine gaz

Page 34: Optimiser les performances dans Wordpress

+

HTML PHP Apache

Outils de profiling

Xhprof

Debug queries

Page 35: Optimiser les performances dans Wordpress

+

HTML PHP Apache

Page 36: Optimiser les performances dans Wordpress

+

HTML PHP Apache

Page 37: Optimiser les performances dans Wordpress

+

Page 38: Optimiser les performances dans Wordpress

+Objectif zero erreur 404

Page 39: Optimiser les performances dans Wordpress

Pourquoi éviter les erreurs 404 ?

Page 40: Optimiser les performances dans Wordpress

Démonstration

Page 41: Optimiser les performances dans Wordpress

+

HTML PHP Apache

Comment traquer les erreurs 404 ?

Depuis l'inspecteur de votre navigateur

Avec l'extensions Seo Ultimate (404 monitor)

Google webmaster tools

Page 42: Optimiser les performances dans Wordpress

+Optimisation du nombre de requêtes

Page 43: Optimiser les performances dans Wordpress

+

HTML PHP Apache

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.

Page 44: Optimiser les performances dans Wordpress

+

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

Page 45: Optimiser les performances dans Wordpress

Comment modifier le comportement de WordPress sans freiner les performances ?

Page 46: Optimiser les performances dans Wordpress

+

HTML PHP Apache

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

Page 47: Optimiser les performances dans Wordpress

+ Limiter les appels aux API externes

Page 48: Optimiser les performances dans Wordpress

+

HTML PHP Apache

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

Page 49: Optimiser les performances dans Wordpress

+

Gestion du cache

Page 50: Optimiser les performances dans Wordpress

+

HTML PHP Apache

Fichier .htaccess

Expiration des fichiers

Tous les fichiers restent du côté client => moins de bande passante

Page 51: Optimiser les performances dans Wordpress

+

HTML PHP Apache

Fichier .htaccess

Etags ( sous conditions ) Un seul serveur Plusieurs serveurs Gestion des versions

Page 52: Optimiser les performances dans Wordpress

+

HTML PHP Apache

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

Page 53: Optimiser les performances dans Wordpress

+

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

Page 54: Optimiser les performances dans Wordpress

+

HTML PHP Apache

Fichier .htaccess petit point pour OVH

Activation pour OVH

Source : herewithme.fr

Page 55: Optimiser les performances dans Wordpress

+

HTML PHP Apache

Fichier .htaccessPour 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

Page 56: Optimiser les performances dans Wordpress

+Résultat

Page 57: Optimiser les performances dans Wordpress

+

OutilsMesurer les performances

Page 58: Optimiser les performances dans Wordpress

+Mesurer les performances

Pagespeed

Page 59: Optimiser les performances dans Wordpress

+Mesurer les performances

Yslow

Page 60: Optimiser les performances dans Wordpress

+Mesurer les performances

Debug Bar

Page 61: Optimiser les performances dans Wordpress

+Mesurer les performances

Xhprof

Page 62: Optimiser les performances dans Wordpress

+Mesurer les performances

Webpagetest.org

Page 63: Optimiser les performances dans Wordpress

+Mesurer les performances

http://tools.pingdom.com/fpt/

Page 64: Optimiser les performances dans Wordpress

+Merci

Nicolas Juen

@raherian

www.nicolas-juen.fr

Benjamin Niess

@benjaminniess

www.benjamin-niess.fr