SlideShare une entreprise Scribd logo
P e n s e z   W e b   P e r f o r m a n c e   a v e c   W o r d P r e s s   ­   @ p i e r r e d a r g h a m   /   @ J u l i e n O G
PENSEZ WEB PERFORMANCE
AVEC WORDPRESS
BONNES PRATIQUES ET FUTUR DE LA WEB-PERF ADAPTÉ
AU CMS
Propulsé par Pierre DARGHAM - / Julien OGER@pierredargham @JulienOG
1
2 . 1
ENCORE UNE CONF SUR LA WEBPERF ?
2 . 2
LA WEBPERF : UN FONDAMENTAL !
Qualité de service
Couts
SEO
Business
Délais Impact
AMAZON + 100ms -1% CA
BING + 1s -2,8% CA
Yahoo + 400ms -10% Traffic
2 . 3
VOYONS ÇA DE PLUS PRÈS...
1. Comprendre la Webperf
2. Axes d'optimisations génériques VS
3. Futur de la Webperf avec
HTTP/2
PHP7
MYSQL 5.7
 
2 . 4
N'hésitez pas à venir nous voir ! On recrute !
2 . 5
3 . 1
COMPRENDRE LA WEBPERF
3 . 2
PERFORMANCE WEB
Optimisation de l'affichage des pages de mon site
1. COMPRENDRE : spécificités protocole et navigateur
2. OPTIMISER : contraintes actuelles
3. APREHENDER : contraintes futures
4. EQUILIBRER : coût de l'effort VS Besoin
3 . 3
VISION GLOBALE
Maitrise
Serveur Totale (ou presque)
Navigateur Limitée /
Réseau Quasi-nulle
BrowserScope
3 . 4
AMÉLIORER LA PERFORMANCE
Temps
Poids
Communication : nombre de requettes
Qualité : complexité / optimisation du DOM
OBJECTIF CLE : L'EXPERIENCE
UTILISATEUR
3 . 5
OUTILS
Desktop En ligne
Chrome / Firefox inspectors
YSlow WebPageTest
Opquast Desktop GTmetrix
Google PageSpeed
Pensez à utiliser votre navigateur
Outils développeurs
Informations utiles
Simulation réseau/terminaux
3 . 6
WATERFALL
4 . 1
OPTIMISER
En général ?
Avec WordPress ?
4 . 2
UTILISEZ LE CACHE !
Cache serveur / PHP / SQL
Cache clients / Browser
Reverse proxy
object-cache.php, advanded-cache.php
Transients API
WP Super Cache, Batcache, W3 Total Cache, WP-Rocket ...
4 . 3
DIMINUEZ LE NOMBRE DE REQUÊTES !
Concaténation, Sprites
Icon-fonts
Media-queries
Que chargent les plugins ?
minQueue, wp-better-minify
Pre-processing du thème (css, js)
4 . 4
ALLEGEZ VOS CONTENUS !
Compression gzip
Minification, optimisation des images
minQueue, wp-better-minify, Imagify
WP 4.4 : <img srcset=".." sizes=".."
4 . 5
SOYEZ ASYNCHRONE !
C'est quoi ?
Ligne de flotaison
Lazy-load
ajax-load-more
Theming spécifique
4 . 6
LES BONNES PRATIQUES
WordPress !
Script-loader différentiel
Choisissez les bons hooks !
Respectez le template-hierarchy
Étudiez les plugins tiers
Méthode et theme-starters
5 . 1
FUTUR DE LA WEBPERF
HTTP/2 | PHP 7 | MySQL 5.7
5 . 2
DE HTTP/1.1...
Pas d'évolution depuis 1999
6 à 13 connexions simultanées par domaine
Requêtes séquentielles
Envoie des entêtes plain text
5 . 3
...À HTTP/2
Standard IETF sortie début 2015
Reprend les bases de HTTP/1.1
(GET, POST, etc.) / status code / links / header
Les nouveautés
Connexion TCP unique persistante par domaine
Multiplexing
HPACK compression standard
Server push / Server Hints
5 . 4
PROTOCOLE HTTP/1.1
5 . 5
PROTOCOLE HTTP/2
5 . 6
SUPPORT DE HTTP/2
Côté client :
La plupart des navigateurs
Imposent SSL (https)
Côté serveur :
Apache
Nginx
5 . 7
IMPACTS SUR LES
DÉVELOPPEMENTS
Devient inutile
Domain Sharding
Inutile ?
Concaténation
Sprite
PAS SI EVIDENT
Article PerfPlanet sur le sujet
5 . 8
IMPACT SUR LE WATERFALL
HTTP/1.1
HTTP/2
5 . 9
HTTP2 - SOLUTION MIRACLE ?
La question se pose autrement
Amélioration du protocole != optimisation de vos pages
Vers un web plus fluide, mais encore du travail
5 . 10
PHP 7
Nouvelles features
Amélioration de la gestion mémoire
Amélioration des performances
5 . 11
MYSQL 5.7
Nouvelles features
3 fois plus rapide que MySQL 5.6
WordPress = Consommation SQL +++
5 . 12
QUELQUES RÉSULTATS (CÔTÉ CLIENT)
WordPress + WooCommerce + StoreFront + PHP 5.6
HTTP/1.1
Page de liste de 22 produits
Tests côté client
Load time First Byte
-> HTTP/2 -5% à -10% 0% à -3%
-> PHP 7 -5% à -14% -22% à -28%
5 . 13
QUELQUES RÉSULTATS (CÔTÉ
SERVEUR)
Page de liste de 223 produits (504 requêtes SQL)
Tests côté serveur PHP 5.6 VS PHP 7
Memory Usage Page generation time
-28% -58%
Tests WordPress + WooCommerce + StoreFront / 22 produits
Limite = Bande passante : 4Mb / dualcore 2,7go
http1 - php5
http1 - php7
http2 - php5
http2 - php7
Limite = Server : 150mb / monocore 1,6go
http1 - php5
http1 - php7
http2 - php5
http2 - php7
5 . 14
5 . 15
AUTRES TESTS
WordPress + WooCommerce + StoreFront / Liste 223
produits
tests classiques
http1
http2
6
POUR CONCLURE...
7
QUESTION ?!
8
PLUGINS WORDPRESS
WP Super Cache
W3 Total Cache
WP Rocket
MinQueue
Ajax Load More
Soil
Query Monitor
9
LIENS ET RÉFÉRENCES
GTmetrix
WebPageTest
Google PageSpeed
Query Monitor
YSlow
10
DOCUMENTS DE RÉFÉRENCE
Checklist Opquast
FAQ GTmetrix
Recommandations GTmetrix (Yslow + PageSpeed)
Yahoo!'s Exceptional Performance best practices
YSlow Ruleset Matrix
Google PageSpeed rules
Google Developers > fundamentals > performance

Contenu connexe

Tendances

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
 
Les 10 Erreurs des Debutants avec WordPress
Les 10 Erreurs des Debutants avec WordPressLes 10 Erreurs des Debutants avec WordPress
Les 10 Erreurs des Debutants avec WordPress
Nicolas Richer
 
Création de themes WordPress
Création de themes WordPressCréation de themes WordPress
Création de themes WordPressChi Nacim
 
WordPress + ACF – Vers l’infini et au-delà…
WordPress + ACF – Vers l’infini et au-delà…WordPress + ACF – Vers l’infini et au-delà…
WordPress + ACF – Vers l’infini et au-delà…
Brice Capobianco
 
Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013
Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013
Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013
Ghilas BELHADJ
 
Conversion de template HTML en thème WordPress
Conversion de template HTML en thème WordPressConversion de template HTML en thème WordPress
Conversion de template HTML en thème WordPress
Chi Nacim
 
WordPress en tant que CMS
WordPress en tant que CMSWordPress en tant que CMS
WordPress en tant que CMS
Aurélien Denis
 
Optimiser les performances dans Wordpress
Optimiser les performances dans WordpressOptimiser les performances dans Wordpress
Optimiser les performances dans Wordpress
Nicolas Juen
 
Développement d’extensions WordPress
Développement d’extensions WordPressDéveloppement d’extensions WordPress
Développement d’extensions WordPressChi Nacim
 
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
 
Migration de données… Destination WordPress !
Migration de données… Destination WordPress !Migration de données… Destination WordPress !
Migration de données… Destination WordPress !
Willy Bahuaud
 
Kiwiparty 2011 - Optimisation des sites internet
Kiwiparty 2011 - Optimisation des sites internetKiwiparty 2011 - Optimisation des sites internet
Kiwiparty 2011 - Optimisation des sites internetDevclic
 
WordPress et Ninja forms
WordPress et Ninja formsWordPress et Ninja forms
WordPress et Ninja forms
Brice Capobianco
 
Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...
Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...
Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...
Microsoft
 
Formation wp contenu - livret
Formation wp   contenu - livretFormation wp   contenu - livret
Formation wp contenu - livret
CaroleTherrien1
 
Creation de-themes-wp
Creation de-themes-wpCreation de-themes-wp
Creation de-themes-wp
Chi Nacim
 
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
 
Cas client atypique
Cas client atypiqueCas client atypique
Cas client atypique
Brice Capobianco
 
L’envers du décor d’un site WooCommerce | WP Tech Nantes
L’envers du décord’un site WooCommerce | WP Tech NantesL’envers du décord’un site WooCommerce | WP Tech Nantes
L’envers du décor d’un site WooCommerce | WP Tech Nantes
Fabrice Ducarme
 
Le meilleur pour votre site WordPress
Le meilleur pour votre site WordPressLe meilleur pour votre site WordPress
Le meilleur pour votre site WordPress
Aurélien Denis
 

Tendances (20)

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
 
Les 10 Erreurs des Debutants avec WordPress
Les 10 Erreurs des Debutants avec WordPressLes 10 Erreurs des Debutants avec WordPress
Les 10 Erreurs des Debutants avec WordPress
 
Création de themes WordPress
Création de themes WordPressCréation de themes WordPress
Création de themes WordPress
 
WordPress + ACF – Vers l’infini et au-delà…
WordPress + ACF – Vers l’infini et au-delà…WordPress + ACF – Vers l’infini et au-delà…
WordPress + ACF – Vers l’infini et au-delà…
 
Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013
Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013
Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013
 
Conversion de template HTML en thème WordPress
Conversion de template HTML en thème WordPressConversion de template HTML en thème WordPress
Conversion de template HTML en thème WordPress
 
WordPress en tant que CMS
WordPress en tant que CMSWordPress en tant que CMS
WordPress en tant que CMS
 
Optimiser les performances dans Wordpress
Optimiser les performances dans WordpressOptimiser les performances dans Wordpress
Optimiser les performances dans Wordpress
 
Développement d’extensions WordPress
Développement d’extensions WordPressDéveloppement d’extensions WordPress
Développement d’extensions WordPress
 
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
 
Migration de données… Destination WordPress !
Migration de données… Destination WordPress !Migration de données… Destination WordPress !
Migration de données… Destination WordPress !
 
Kiwiparty 2011 - Optimisation des sites internet
Kiwiparty 2011 - Optimisation des sites internetKiwiparty 2011 - Optimisation des sites internet
Kiwiparty 2011 - Optimisation des sites internet
 
WordPress et Ninja forms
WordPress et Ninja formsWordPress et Ninja forms
WordPress et Ninja forms
 
Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...
Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...
Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...
 
Formation wp contenu - livret
Formation wp   contenu - livretFormation wp   contenu - livret
Formation wp contenu - livret
 
Creation de-themes-wp
Creation de-themes-wpCreation de-themes-wp
Creation de-themes-wp
 
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
 
Cas client atypique
Cas client atypiqueCas client atypique
Cas client atypique
 
L’envers du décor d’un site WooCommerce | WP Tech Nantes
L’envers du décord’un site WooCommerce | WP Tech NantesL’envers du décord’un site WooCommerce | WP Tech Nantes
L’envers du décor d’un site WooCommerce | WP Tech Nantes
 
Le meilleur pour votre site WordPress
Le meilleur pour votre site WordPressLe meilleur pour votre site WordPress
Le meilleur pour votre site WordPress
 

Similaire à Pensez Web-Performances avec WordPress - Une conférence de Julien Oger et Pierre Dargham

Présentation welcom la webperf by object23
Présentation welcom la webperf by object23Présentation welcom la webperf by object23
Présentation welcom la webperf by object23
Brigitte Marandon
 
RennesJS Talk webperf by Dareboost
RennesJS Talk webperf by DareboostRennesJS Talk webperf by Dareboost
RennesJS Talk webperf by Dareboost
Damien Jubeau
 
Optimiser WordPress
Optimiser WordPressOptimiser WordPress
Optimiser WordPress
Chi Nacim
 
Optimiser wordpress
Optimiser wordpressOptimiser wordpress
Optimiser wordpress
Jean-François Vial
 
Le livre blanc pour tout savoir de la webperf
Le livre blanc pour tout savoir de la webperfLe livre blanc pour tout savoir de la webperf
Le livre blanc pour tout savoir de la webperf
Object Vingt Trois
 
Initiation Webperf : Comprendre, analyser et optimiser les performances web F...
Initiation Webperf : Comprendre, analyser et optimiser les performances web F...Initiation Webperf : Comprendre, analyser et optimiser les performances web F...
Initiation Webperf : Comprendre, analyser et optimiser les performances web F...
Kenny Dits
 
We❤️SEO 2019 : WebPerf et SEO
We❤️SEO 2019 : WebPerf et SEOWe❤️SEO 2019 : WebPerf et SEO
We❤️SEO 2019 : WebPerf et SEO
Erlé Alberton
 
LoadTime & SEO - Erlé Alberton
LoadTime & SEO - Erlé AlbertonLoadTime & SEO - Erlé Alberton
LoadTime & SEO - Erlé Alberton
WeLoveSEO
 
Performance Web côté client - Daspet / Sullivan - Paris Web 2008
Performance Web côté client - Daspet / Sullivan - Paris Web 2008Performance Web côté client - Daspet / Sullivan - Paris Web 2008
Performance Web côté client - Daspet / Sullivan - Paris Web 2008
Association Paris-Web
 
Morning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slidesMorning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slides
Oxalide
 
Oxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performanceOxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performance
Ludovic Piot
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
CARA_Lyon
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
CARA_Lyon
 
Pourquoi la performance?
Pourquoi la performance?Pourquoi la performance?
Pourquoi la performance?
Nicole Sullivan
 
Bâtir son site a l'aide de wordpress
Bâtir son site a l'aide de wordpressBâtir son site a l'aide de wordpress
Bâtir son site a l'aide de wordpress
Frédéric Caron
 
Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...
Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...
Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...
Peak Ace
 
Meetup angular rshop
Meetup angular rshopMeetup angular rshop
Meetup angular rshop
Cyril Balit
 
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
 
Améliorez la vitesse de chargement de votre site - Webisland 2018
Améliorez la vitesse de chargement de votre site - Webisland 2018Améliorez la vitesse de chargement de votre site - Webisland 2018
Améliorez la vitesse de chargement de votre site - Webisland 2018
Aymen Loukil
 
Optimisation de son site web
Optimisation de son site webOptimisation de son site web
Optimisation de son site web
Christophe Avonture
 

Similaire à Pensez Web-Performances avec WordPress - Une conférence de Julien Oger et Pierre Dargham (20)

Présentation welcom la webperf by object23
Présentation welcom la webperf by object23Présentation welcom la webperf by object23
Présentation welcom la webperf by object23
 
RennesJS Talk webperf by Dareboost
RennesJS Talk webperf by DareboostRennesJS Talk webperf by Dareboost
RennesJS Talk webperf by Dareboost
 
Optimiser WordPress
Optimiser WordPressOptimiser WordPress
Optimiser WordPress
 
Optimiser wordpress
Optimiser wordpressOptimiser wordpress
Optimiser wordpress
 
Le livre blanc pour tout savoir de la webperf
Le livre blanc pour tout savoir de la webperfLe livre blanc pour tout savoir de la webperf
Le livre blanc pour tout savoir de la webperf
 
Initiation Webperf : Comprendre, analyser et optimiser les performances web F...
Initiation Webperf : Comprendre, analyser et optimiser les performances web F...Initiation Webperf : Comprendre, analyser et optimiser les performances web F...
Initiation Webperf : Comprendre, analyser et optimiser les performances web F...
 
We❤️SEO 2019 : WebPerf et SEO
We❤️SEO 2019 : WebPerf et SEOWe❤️SEO 2019 : WebPerf et SEO
We❤️SEO 2019 : WebPerf et SEO
 
LoadTime & SEO - Erlé Alberton
LoadTime & SEO - Erlé AlbertonLoadTime & SEO - Erlé Alberton
LoadTime & SEO - Erlé Alberton
 
Performance Web côté client - Daspet / Sullivan - Paris Web 2008
Performance Web côté client - Daspet / Sullivan - Paris Web 2008Performance Web côté client - Daspet / Sullivan - Paris Web 2008
Performance Web côté client - Daspet / Sullivan - Paris Web 2008
 
Morning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slidesMorning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slides
 
Oxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performanceOxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performance
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
Pourquoi la performance?
Pourquoi la performance?Pourquoi la performance?
Pourquoi la performance?
 
Bâtir son site a l'aide de wordpress
Bâtir son site a l'aide de wordpressBâtir son site a l'aide de wordpress
Bâtir son site a l'aide de wordpress
 
Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...
Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...
Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...
 
Meetup angular rshop
Meetup angular rshopMeetup angular rshop
Meetup angular rshop
 
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
 
Améliorez la vitesse de chargement de votre site - Webisland 2018
Améliorez la vitesse de chargement de votre site - Webisland 2018Améliorez la vitesse de chargement de votre site - Webisland 2018
Améliorez la vitesse de chargement de votre site - Webisland 2018
 
Optimisation de son site web
Optimisation de son site webOptimisation de son site web
Optimisation de son site web
 

Dernier

Riding motorbikes in country side 15
Riding motorbikes in country side 15Riding motorbikes in country side 15
Riding motorbikes in country side 15
RDM-ROW history
 
Stratégies pour accroître la visibilité et l'engagement de votre blog
Stratégies pour accroître la visibilité et l'engagement de votre blogStratégies pour accroître la visibilité et l'engagement de votre blog
Stratégies pour accroître la visibilité et l'engagement de votre blog
Asher256
 
Netflix, OCS et Disney avec ou sans engagement
Netflix, OCS et Disney avec ou sans engagementNetflix, OCS et Disney avec ou sans engagement
Netflix, OCS et Disney avec ou sans engagement
ABO IPTV PREMIUM
 
Les logiciels libres : une opportunite pour votre entreprise?
Les logiciels libres : une opportunite pour votre entreprise?Les logiciels libres : une opportunite pour votre entreprise?
Les logiciels libres : une opportunite pour votre entreprise?
Asher256
 
Riding motorbikes in country side 20
Riding motorbikes in country side 20Riding motorbikes in country side 20
Riding motorbikes in country side 20
RDM-ROW history
 
Conseils pour mieux Sécuriser votre système Linux
Conseils pour mieux Sécuriser votre système LinuxConseils pour mieux Sécuriser votre système Linux
Conseils pour mieux Sécuriser votre système Linux
Asher256
 

Dernier (6)

Riding motorbikes in country side 15
Riding motorbikes in country side 15Riding motorbikes in country side 15
Riding motorbikes in country side 15
 
Stratégies pour accroître la visibilité et l'engagement de votre blog
Stratégies pour accroître la visibilité et l'engagement de votre blogStratégies pour accroître la visibilité et l'engagement de votre blog
Stratégies pour accroître la visibilité et l'engagement de votre blog
 
Netflix, OCS et Disney avec ou sans engagement
Netflix, OCS et Disney avec ou sans engagementNetflix, OCS et Disney avec ou sans engagement
Netflix, OCS et Disney avec ou sans engagement
 
Les logiciels libres : une opportunite pour votre entreprise?
Les logiciels libres : une opportunite pour votre entreprise?Les logiciels libres : une opportunite pour votre entreprise?
Les logiciels libres : une opportunite pour votre entreprise?
 
Riding motorbikes in country side 20
Riding motorbikes in country side 20Riding motorbikes in country side 20
Riding motorbikes in country side 20
 
Conseils pour mieux Sécuriser votre système Linux
Conseils pour mieux Sécuriser votre système LinuxConseils pour mieux Sécuriser votre système Linux
Conseils pour mieux Sécuriser votre système Linux
 

Pensez Web-Performances avec WordPress - Une conférence de Julien Oger et Pierre Dargham

  • 1. P e n s e z   W e b   P e r f o r m a n c e   a v e c   W o r d P r e s s   ­   @ p i e r r e d a r g h a m   /   @ J u l i e n O G PENSEZ WEB PERFORMANCE AVEC WORDPRESS BONNES PRATIQUES ET FUTUR DE LA WEB-PERF ADAPTÉ AU CMS Propulsé par Pierre DARGHAM - / Julien OGER@pierredargham @JulienOG
  • 2. 1 2 . 1 ENCORE UNE CONF SUR LA WEBPERF ?
  • 3. 2 . 2 LA WEBPERF : UN FONDAMENTAL ! Qualité de service Couts SEO Business Délais Impact AMAZON + 100ms -1% CA BING + 1s -2,8% CA Yahoo + 400ms -10% Traffic
  • 4. 2 . 3 VOYONS ÇA DE PLUS PRÈS... 1. Comprendre la Webperf 2. Axes d'optimisations génériques VS 3. Futur de la Webperf avec HTTP/2 PHP7 MYSQL 5.7
  • 5.  
  • 6. 2 . 4 N'hésitez pas à venir nous voir ! On recrute !
  • 7. 2 . 5 3 . 1 COMPRENDRE LA WEBPERF
  • 8. 3 . 2 PERFORMANCE WEB Optimisation de l'affichage des pages de mon site 1. COMPRENDRE : spécificités protocole et navigateur 2. OPTIMISER : contraintes actuelles 3. APREHENDER : contraintes futures 4. EQUILIBRER : coût de l'effort VS Besoin
  • 9. 3 . 3 VISION GLOBALE Maitrise Serveur Totale (ou presque) Navigateur Limitée / Réseau Quasi-nulle BrowserScope
  • 10. 3 . 4 AMÉLIORER LA PERFORMANCE Temps Poids Communication : nombre de requettes Qualité : complexité / optimisation du DOM OBJECTIF CLE : L'EXPERIENCE UTILISATEUR
  • 11. 3 . 5 OUTILS Desktop En ligne Chrome / Firefox inspectors YSlow WebPageTest Opquast Desktop GTmetrix Google PageSpeed Pensez à utiliser votre navigateur Outils développeurs Informations utiles Simulation réseau/terminaux
  • 13. 4 . 1 OPTIMISER En général ? Avec WordPress ?
  • 14. 4 . 2 UTILISEZ LE CACHE ! Cache serveur / PHP / SQL Cache clients / Browser Reverse proxy object-cache.php, advanded-cache.php Transients API WP Super Cache, Batcache, W3 Total Cache, WP-Rocket ...
  • 15. 4 . 3 DIMINUEZ LE NOMBRE DE REQUÊTES ! Concaténation, Sprites Icon-fonts Media-queries Que chargent les plugins ? minQueue, wp-better-minify Pre-processing du thème (css, js)
  • 16. 4 . 4 ALLEGEZ VOS CONTENUS ! Compression gzip Minification, optimisation des images minQueue, wp-better-minify, Imagify WP 4.4 : <img srcset=".." sizes=".."
  • 17. 4 . 5 SOYEZ ASYNCHRONE ! C'est quoi ? Ligne de flotaison Lazy-load ajax-load-more Theming spécifique
  • 18. 4 . 6 LES BONNES PRATIQUES WordPress ! Script-loader différentiel Choisissez les bons hooks ! Respectez le template-hierarchy Étudiez les plugins tiers Méthode et theme-starters
  • 19. 5 . 1 FUTUR DE LA WEBPERF HTTP/2 | PHP 7 | MySQL 5.7
  • 20. 5 . 2 DE HTTP/1.1... Pas d'évolution depuis 1999 6 à 13 connexions simultanées par domaine Requêtes séquentielles Envoie des entêtes plain text
  • 21. 5 . 3 ...À HTTP/2 Standard IETF sortie début 2015 Reprend les bases de HTTP/1.1 (GET, POST, etc.) / status code / links / header Les nouveautés Connexion TCP unique persistante par domaine Multiplexing HPACK compression standard Server push / Server Hints
  • 22. 5 . 4 PROTOCOLE HTTP/1.1
  • 23. 5 . 5 PROTOCOLE HTTP/2
  • 24. 5 . 6 SUPPORT DE HTTP/2 Côté client : La plupart des navigateurs Imposent SSL (https) Côté serveur : Apache Nginx
  • 25. 5 . 7 IMPACTS SUR LES DÉVELOPPEMENTS Devient inutile Domain Sharding Inutile ? Concaténation Sprite PAS SI EVIDENT Article PerfPlanet sur le sujet
  • 26. 5 . 8 IMPACT SUR LE WATERFALL HTTP/1.1 HTTP/2
  • 27. 5 . 9 HTTP2 - SOLUTION MIRACLE ? La question se pose autrement Amélioration du protocole != optimisation de vos pages Vers un web plus fluide, mais encore du travail
  • 28. 5 . 10 PHP 7 Nouvelles features Amélioration de la gestion mémoire Amélioration des performances
  • 29. 5 . 11 MYSQL 5.7 Nouvelles features 3 fois plus rapide que MySQL 5.6 WordPress = Consommation SQL +++
  • 30. 5 . 12 QUELQUES RÉSULTATS (CÔTÉ CLIENT) WordPress + WooCommerce + StoreFront + PHP 5.6 HTTP/1.1 Page de liste de 22 produits Tests côté client Load time First Byte -> HTTP/2 -5% à -10% 0% à -3% -> PHP 7 -5% à -14% -22% à -28%
  • 31. 5 . 13 QUELQUES RÉSULTATS (CÔTÉ SERVEUR) Page de liste de 223 produits (504 requêtes SQL) Tests côté serveur PHP 5.6 VS PHP 7 Memory Usage Page generation time -28% -58%
  • 32. Tests WordPress + WooCommerce + StoreFront / 22 produits Limite = Bande passante : 4Mb / dualcore 2,7go http1 - php5 http1 - php7 http2 - php5 http2 - php7 Limite = Server : 150mb / monocore 1,6go http1 - php5 http1 - php7 http2 - php5 http2 - php7
  • 33. 5 . 14 5 . 15 AUTRES TESTS WordPress + WooCommerce + StoreFront / Liste 223 produits tests classiques http1 http2
  • 36. 8 PLUGINS WORDPRESS WP Super Cache W3 Total Cache WP Rocket MinQueue Ajax Load More Soil Query Monitor
  • 38. 10 DOCUMENTS DE RÉFÉRENCE Checklist Opquast FAQ GTmetrix Recommandations GTmetrix (Yslow + PageSpeed) Yahoo!'s Exceptional Performance best practices YSlow Ruleset Matrix Google PageSpeed rules Google Developers > fundamentals > performance