SlideShare une entreprise Scribd logo
+
Optimiser
les performances
dans 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 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




               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
+




    HTML   PHP   Apache
+
+
    Objectif zero erreur 404
Pourquoi éviter les erreurs 404 ?
Démonstration
+
    Comment traquer les erreurs 404 ?

       Depuis l'inspecteur de votre navigateur

       Avec l'extensions 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 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
+
    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 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 .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

Contenu connexe

Tendances

Combien coûte un site WordPress ? - Wordcamp Paris 2014
Combien coûte un site WordPress ? - Wordcamp Paris 2014Combien coûte un site WordPress ? - Wordcamp Paris 2014
Combien coûte un site WordPress ? - Wordcamp Paris 2014
Thierry Pigot
 
WordPress
WordPressWordPress
WordPress
Thomas Bodin
 
Supports de cours Fit4Digital future - CMS
Supports de cours Fit4Digital future - CMSSupports de cours Fit4Digital future - CMS
Supports de cours Fit4Digital future - CMS
Annabelle Buffart
 
Formation Wordpress 3
Formation Wordpress 3Formation Wordpress 3
Formation Wordpress 3robinparisi
 
WordPress et SEO - SEOCampus 2013
WordPress et SEO - SEOCampus 2013WordPress et SEO - SEOCampus 2013
WordPress et SEO - SEOCampus 2013
Daniel Roch - SeoMix
 
Kiwiparty 2011 - Optimisation des sites internet
Kiwiparty 2011 - Optimisation des sites internetKiwiparty 2011 - Optimisation des sites internet
Kiwiparty 2011 - Optimisation des sites internetDevclic
 
Sécuriser un site WordPress - Semaine du web
Sécuriser un site WordPress - Semaine du webSécuriser un site WordPress - Semaine du web
Sécuriser un site WordPress - Semaine du web
IZZA Samir
 
Initiation à WordPress
Initiation à WordPressInitiation à WordPress
Initiation à WordPress
StrategiaWeb Communication Numérique
 
WordPress + HTTPS
WordPress + HTTPSWordPress + HTTPS
WordPress + HTTPS
Brice Capobianco
 
Formation WordPress à Blida
Formation WordPress à BlidaFormation WordPress à Blida
Formation WordPress à Blida
Gd6d
 
Wordpress notes de cours
Wordpress notes de coursWordpress notes de cours
Wordpress notes de cours
michel.titeux
 
Magento et SEO : le combo parfait pour développer son e-commerce
Magento et SEO : le combo parfait pour développer son e-commerceMagento et SEO : le combo parfait pour développer son e-commerce
Magento et SEO : le combo parfait pour développer son e-commerce
Patrick Valibus
 
Optimiser réellement le référencement naturel de WordPress
Optimiser réellement le référencement naturel de WordPressOptimiser réellement le référencement naturel de WordPress
Optimiser réellement le référencement naturel de WordPress
Daniel Roch - SeoMix
 
Wordpress et la sécurité des plugins
Wordpress et la sécurité des pluginsWordpress et la sécurité des plugins
Wordpress et la sécurité des plugins
Boiteaweb
 
10 conseils pour booster les performances de votre site sous WordPress
10 conseils pour booster les performances de votre site sous WordPress10 conseils pour booster les performances de votre site sous WordPress
10 conseils pour booster les performances de votre site sous WordPress
Aurélien Denis
 
Wordpress et SEO - Campus Made in Blog 2014 Montréal
Wordpress et SEO - Campus Made in Blog 2014 MontréalWordpress et SEO - Campus Made in Blog 2014 Montréal
Wordpress et SEO - Campus Made in Blog 2014 Montréal
Made in
 
Wordpress : Attaque, Audit et Protection | Hackfest 2015
Wordpress : Attaque, Audit et Protection | Hackfest 2015Wordpress : Attaque, Audit et Protection | Hackfest 2015
Wordpress : Attaque, Audit et Protection | Hackfest 2015
Harvey Francois
 
Bien débuter dans la conception d'un thème WordPress
Bien débuter dans la conception d'un thème WordPressBien débuter dans la conception d'un thème WordPress
Bien débuter dans la conception d'un thème WordPress
Aurélien Denis
 

Tendances (19)

Combien coûte un site WordPress ? - Wordcamp Paris 2014
Combien coûte un site WordPress ? - Wordcamp Paris 2014Combien coûte un site WordPress ? - Wordcamp Paris 2014
Combien coûte un site WordPress ? - Wordcamp Paris 2014
 
WordPress
WordPressWordPress
WordPress
 
Supports de cours Fit4Digital future - CMS
Supports de cours Fit4Digital future - CMSSupports de cours Fit4Digital future - CMS
Supports de cours Fit4Digital future - CMS
 
Formation Wordpress 3
Formation Wordpress 3Formation Wordpress 3
Formation Wordpress 3
 
WordPress et SEO - SEOCampus 2013
WordPress et SEO - SEOCampus 2013WordPress et SEO - SEOCampus 2013
WordPress et SEO - SEOCampus 2013
 
Kiwiparty 2011 - Optimisation des sites internet
Kiwiparty 2011 - Optimisation des sites internetKiwiparty 2011 - Optimisation des sites internet
Kiwiparty 2011 - Optimisation des sites internet
 
Sécuriser un site WordPress - Semaine du web
Sécuriser un site WordPress - Semaine du webSécuriser un site WordPress - Semaine du web
Sécuriser un site WordPress - Semaine du web
 
Initiation à WordPress
Initiation à WordPressInitiation à WordPress
Initiation à WordPress
 
WordPress + HTTPS
WordPress + HTTPSWordPress + HTTPS
WordPress + HTTPS
 
Formation WordPress à Blida
Formation WordPress à BlidaFormation WordPress à Blida
Formation WordPress à Blida
 
Wordpress notes de cours
Wordpress notes de coursWordpress notes de cours
Wordpress notes de cours
 
Magento et SEO : le combo parfait pour développer son e-commerce
Magento et SEO : le combo parfait pour développer son e-commerceMagento et SEO : le combo parfait pour développer son e-commerce
Magento et SEO : le combo parfait pour développer son e-commerce
 
Tp1 wp etud
Tp1 wp etudTp1 wp etud
Tp1 wp etud
 
Optimiser réellement le référencement naturel de WordPress
Optimiser réellement le référencement naturel de WordPressOptimiser réellement le référencement naturel de WordPress
Optimiser réellement le référencement naturel de WordPress
 
Wordpress et la sécurité des plugins
Wordpress et la sécurité des pluginsWordpress et la sécurité des plugins
Wordpress et la sécurité des plugins
 
10 conseils pour booster les performances de votre site sous WordPress
10 conseils pour booster les performances de votre site sous WordPress10 conseils pour booster les performances de votre site sous WordPress
10 conseils pour booster les performances de votre site sous WordPress
 
Wordpress et SEO - Campus Made in Blog 2014 Montréal
Wordpress et SEO - Campus Made in Blog 2014 MontréalWordpress et SEO - Campus Made in Blog 2014 Montréal
Wordpress et SEO - Campus Made in Blog 2014 Montréal
 
Wordpress : Attaque, Audit et Protection | Hackfest 2015
Wordpress : Attaque, Audit et Protection | Hackfest 2015Wordpress : Attaque, Audit et Protection | Hackfest 2015
Wordpress : Attaque, Audit et Protection | Hackfest 2015
 
Bien débuter dans la conception d'un thème WordPress
Bien débuter dans la conception d'un thème WordPressBien débuter dans la conception d'un thème WordPress
Bien débuter dans la conception d'un thème WordPress
 

Similaire à Optimiser les performances dans Wordpress

Optimiser WordPress
Optimiser WordPressOptimiser WordPress
Optimiser WordPress
Chi Nacim
 
Optimiser wordpress
Optimiser wordpressOptimiser wordpress
Optimiser wordpress
Jean-François Vial
 
Flat File CMS - AgoraCMS 2014
Flat File CMS - AgoraCMS 2014Flat File CMS - AgoraCMS 2014
Flat File CMS - AgoraCMS 2014Laurent Séguin
 
PHP/ExtJs experience feedback - IAV case - 1
PHP/ExtJs experience feedback - IAV case - 1PHP/ExtJs experience feedback - IAV case - 1
PHP/ExtJs experience feedback - IAV case - 1
fayway
 
hassclic270.ppt
hassclic270.ppthassclic270.ppt
hassclic270.ppt
adiouf2
 
Création des sites web pour débutant
Création des sites web pour débutantCréation des sites web pour débutant
Création des sites web pour débutantKorteby Farouk
 
Pensez Web-Performances avec WordPress - Une conférence de Julien Oger et Pie...
Pensez Web-Performances avec WordPress - Une conférence de Julien Oger et Pie...Pensez Web-Performances avec WordPress - Une conférence de Julien Oger et Pie...
Pensez Web-Performances avec WordPress - Une conférence de Julien Oger et Pie...
pierredargham
 
cours-gratuit.com--coursMySql-id2218.pdf
cours-gratuit.com--coursMySql-id2218.pdfcours-gratuit.com--coursMySql-id2218.pdf
cours-gratuit.com--coursMySql-id2218.pdf
GroupeExcelMarrakech
 
Un site de collectivité sur WordPress ? Méthodes et retours d'XP
Un site de collectivité sur WordPress ? Méthodes et retours d'XPUn site de collectivité sur WordPress ? Méthodes et retours d'XP
Un site de collectivité sur WordPress ? Méthodes et retours d'XP
atelier111
 
cours-gratuit.com--CoursPhp-id1055.ppt
cours-gratuit.com--CoursPhp-id1055.pptcours-gratuit.com--CoursPhp-id1055.ppt
cours-gratuit.com--CoursPhp-id1055.ppt
GroupeExcelMarrakech
 
Partie 1_Matriser les bases PHP v0555555555555.pptx
Partie 1_Matriser les bases PHP v0555555555555.pptxPartie 1_Matriser les bases PHP v0555555555555.pptx
Partie 1_Matriser les bases PHP v0555555555555.pptx
HamzaElgari
 
Ecrire et déployer une appli PHP maintenable
Ecrire et déployer une appli PHP maintenableEcrire et déployer une appli PHP maintenable
Ecrire et déployer une appli PHP maintenable
Christophe Villeneuve
 
PhPotes: Drupal
PhPotes: DrupalPhPotes: Drupal
PhPotes: Drupal
AnDaolVras
 
Intellicore Tech Talk 10 - Apache Web Server Internals
Intellicore Tech Talk 10 - Apache Web Server InternalsIntellicore Tech Talk 10 - Apache Web Server Internals
Intellicore Tech Talk 10 - Apache Web Server Internals
Neil Armstrong
 
Mettez du libre dans vos projets web
Mettez du libre dans vos projets webMettez du libre dans vos projets web
Mettez du libre dans vos projets web
Pierre Rudloff
 
Talk performance web
Talk performance webTalk performance web
Talk performance web
Emmanuel Quentin
 
Enrichir vos contenus Wordpress avec les API - WPTech 2015
Enrichir vos contenus Wordpress avec les API - WPTech 2015Enrichir vos contenus Wordpress avec les API - WPTech 2015
Enrichir vos contenus Wordpress avec les API - WPTech 2015
PXNetwork
 
Chap01 introduction
Chap01 introductionChap01 introduction
Chap01 introductionPape Ndiaye
 
Développer et déployer WordPress en environnement microsoft
Développer et déployer WordPress en environnement microsoftDévelopper et déployer WordPress en environnement microsoft
Développer et déployer WordPress en environnement microsoft
LeTesteur
 

Similaire à Optimiser les performances dans Wordpress (20)

Optimiser WordPress
Optimiser WordPressOptimiser WordPress
Optimiser WordPress
 
Optimiser wordpress
Optimiser wordpressOptimiser wordpress
Optimiser wordpress
 
Flat File CMS - AgoraCMS 2014
Flat File CMS - AgoraCMS 2014Flat File CMS - AgoraCMS 2014
Flat File CMS - AgoraCMS 2014
 
PHP/ExtJs experience feedback - IAV case - 1
PHP/ExtJs experience feedback - IAV case - 1PHP/ExtJs experience feedback - IAV case - 1
PHP/ExtJs experience feedback - IAV case - 1
 
hassclic270.ppt
hassclic270.ppthassclic270.ppt
hassclic270.ppt
 
Création des sites web pour débutant
Création des sites web pour débutantCréation des sites web pour débutant
Création des sites web pour débutant
 
Pensez Web-Performances avec WordPress - Une conférence de Julien Oger et Pie...
Pensez Web-Performances avec WordPress - Une conférence de Julien Oger et Pie...Pensez Web-Performances avec WordPress - Une conférence de Julien Oger et Pie...
Pensez Web-Performances avec WordPress - Une conférence de Julien Oger et Pie...
 
Php
PhpPhp
Php
 
cours-gratuit.com--coursMySql-id2218.pdf
cours-gratuit.com--coursMySql-id2218.pdfcours-gratuit.com--coursMySql-id2218.pdf
cours-gratuit.com--coursMySql-id2218.pdf
 
Un site de collectivité sur WordPress ? Méthodes et retours d'XP
Un site de collectivité sur WordPress ? Méthodes et retours d'XPUn site de collectivité sur WordPress ? Méthodes et retours d'XP
Un site de collectivité sur WordPress ? Méthodes et retours d'XP
 
cours-gratuit.com--CoursPhp-id1055.ppt
cours-gratuit.com--CoursPhp-id1055.pptcours-gratuit.com--CoursPhp-id1055.ppt
cours-gratuit.com--CoursPhp-id1055.ppt
 
Partie 1_Matriser les bases PHP v0555555555555.pptx
Partie 1_Matriser les bases PHP v0555555555555.pptxPartie 1_Matriser les bases PHP v0555555555555.pptx
Partie 1_Matriser les bases PHP v0555555555555.pptx
 
Ecrire et déployer une appli PHP maintenable
Ecrire et déployer une appli PHP maintenableEcrire et déployer une appli PHP maintenable
Ecrire et déployer une appli PHP maintenable
 
PhPotes: Drupal
PhPotes: DrupalPhPotes: Drupal
PhPotes: Drupal
 
Intellicore Tech Talk 10 - Apache Web Server Internals
Intellicore Tech Talk 10 - Apache Web Server InternalsIntellicore Tech Talk 10 - Apache Web Server Internals
Intellicore Tech Talk 10 - Apache Web Server Internals
 
Mettez du libre dans vos projets web
Mettez du libre dans vos projets webMettez du libre dans vos projets web
Mettez du libre dans vos projets web
 
Talk performance web
Talk performance webTalk performance web
Talk performance web
 
Enrichir vos contenus Wordpress avec les API - WPTech 2015
Enrichir vos contenus Wordpress avec les API - WPTech 2015Enrichir vos contenus Wordpress avec les API - WPTech 2015
Enrichir vos contenus Wordpress avec les API - WPTech 2015
 
Chap01 introduction
Chap01 introductionChap01 introduction
Chap01 introduction
 
Développer et déployer WordPress en environnement microsoft
Développer et déployer WordPress en environnement microsoftDévelopper et déployer WordPress en environnement microsoft
Développer et déployer WordPress en environnement microsoft
 

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 ?
  • 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