Optimiser les performances dans Wordpress
Télécharger en tant que PPTX, PDF7 j'aime7,175 vues
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.
Optimiser les performances dans Wordpress
- 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