View
13.992
Download
1
Category
Tags:
Preview:
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 ?
Citation preview
+
Nicolas Juen & Benjamin Niess25 novembre 2011
Optimiser les performances dans WordPress
+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 webClien
tHTML
Serveur
PHP Apache
+
Les images
+
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
+Multiplication des supports
Site
Mobile Tablette Ordinateur Télévision
Comment générer ces tailles et bien plus encore ?
+
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
+
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
Que faire pour palier à ces manquements ?
+
HTML PHP Apache
Quelques petits plugins…
Simple image sizes
Dynamic Image Resizer
WP Smush it
Post Thumbnail Editor
+
L’inclusion des fichier
+
HTML PHP Apache
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
Comment ne charger que ce qui nous intéresse ?
+
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);
+
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
+
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
+
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
+
PHPGestion du cache
+Du cache…
Cache objet
Cache statique
Transient
+
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 !
+
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
+
HTML PHP Apache
Comment traquer les erreurs 404 ?
Depuis l'inspecteur de votre navigateur
Avec l'extensions Seo Ultimate (404 monitor)
Google webmaster tools
+Optimisation du nombre de requêtes
+
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.
+
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
Comment modifier le comportement de WordPress sans freiner les performances ?
+
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
+ Limiter les appels aux API externes
+
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
+
Gestion du cache
+
HTML PHP Apache
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 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
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 .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
+Résultat
+
OutilsMesurer les performances
+Mesurer les performances
Pagespeed
+Mesurer les performances
Yslow
+Mesurer les performances
Debug Bar
+Mesurer les performances
Xhprof
+Merci
Nicolas Juen
@raherian
www.nicolas-juen.fr
Benjamin Niess
@benjaminniess
www.benjamin-niess.fr
Recommended