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 ...
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...
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...
 
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 navigate...
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
...
3 . 5
OUTILS
Desktop En ligne
Chrome / Firefox inspectors
YSlow WebPageTest
Opquast Desktop GTmetrix
Google PageSpeed
Pens...
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...
4 . 3
DIMINUEZ LE NOMBRE DE REQUÊTES !
Concaténation, Sprites
Icon-fonts
Media-queries
Que chargent les plugins ?
minQueue...
4 . 4
ALLEGEZ VOS CONTENUS !
Compression gzip
Minification, optimisation des images
minQueue, wp-better-minify, Imagify
WP...
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-hierar...
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 d...
5 . 3
...À HTTP/2
Standard IETF sortie début 2015
Reprend les bases de HTTP/1.1
(GET, POST, etc.) / status code / links / ...
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...
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...
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 produi...
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 PH...
Tests WordPress + WooCommerce + StoreFront / 22 produits
Limite = Bande passante : 4Mb / dualcore 2,7go
http1 - php5
http1...
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...
Prochain SlideShare
Chargement dans…5
×

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

1 537 vues

Publié le

Conférence WP-Tech 4 et 5 décembre 2015 à Nantes.
Votre site WordPress est lent ? Ce n’est pas une fatalité ! À travers de nombreux exemples issus de projets en production, cette conférence fera un tour des bonnes pratiques de développement et de configuration pour mettre en place des sites rapides, y compris pour des applications métiers complexes ou e-commerce.

Déterminant pour l’expérience utilisateur, important pour le référencement, les performances de votre site font partie des optimisations inévitables pour booster votre audience sur le web et améliorer votre taux de conversion.

La conférence sera également l’occasion de penser la bonne architecture des applications WordPress, les mécanismes spécifiques de l’outil pour accélérer la génération des pages et l’utilisation optimale de sa base de données.

Au programme :

Optimisations Client (concaténation, expire headers, compression gzip …)
Optimisations Serveur (cache statique, cache opcode, cache objet, transients, serialization …)
Plugins et développements tiers : comment faire le bon choix ?
Exemples de hacks réutilisables
HTTP/2 et PHP 7.0 : ce qui va changer

Publié dans : Internet
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 537
Sur SlideShare
0
Issues des intégrations
0
Intégrations
538
Actions
Partages
0
Téléchargements
4
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

  1. 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. 2. 1 2 . 1 ENCORE UNE CONF SUR LA WEBPERF ?
  3. 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. 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. 5.  
  6. 6. 2 . 4 N'hésitez pas à venir nous voir ! On recrute !
  7. 7. 2 . 5 3 . 1 COMPRENDRE LA WEBPERF
  8. 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. 9. 3 . 3 VISION GLOBALE Maitrise Serveur Totale (ou presque) Navigateur Limitée / Réseau Quasi-nulle BrowserScope
  10. 10. 3 . 4 AMÉLIORER LA PERFORMANCE Temps Poids Communication : nombre de requettes Qualité : complexité / optimisation du DOM OBJECTIF CLE : L'EXPERIENCE UTILISATEUR
  11. 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
  12. 12. 3 . 6 WATERFALL
  13. 13. 4 . 1 OPTIMISER En général ? Avec WordPress ?
  14. 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. 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. 16. 4 . 4 ALLEGEZ VOS CONTENUS ! Compression gzip Minification, optimisation des images minQueue, wp-better-minify, Imagify WP 4.4 : <img srcset=".." sizes=".."
  17. 17. 4 . 5 SOYEZ ASYNCHRONE ! C'est quoi ? Ligne de flotaison Lazy-load ajax-load-more Theming spécifique
  18. 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. 19. 5 . 1 FUTUR DE LA WEBPERF HTTP/2 | PHP 7 | MySQL 5.7
  20. 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. 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. 22. 5 . 4 PROTOCOLE HTTP/1.1
  23. 23. 5 . 5 PROTOCOLE HTTP/2
  24. 24. 5 . 6 SUPPORT DE HTTP/2 Côté client : La plupart des navigateurs Imposent SSL (https) Côté serveur : Apache Nginx
  25. 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. 26. 5 . 8 IMPACT SUR LE WATERFALL HTTP/1.1 HTTP/2
  27. 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. 28. 5 . 10 PHP 7 Nouvelles features Amélioration de la gestion mémoire Amélioration des performances
  29. 29. 5 . 11 MYSQL 5.7 Nouvelles features 3 fois plus rapide que MySQL 5.6 WordPress = Consommation SQL +++
  30. 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. 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. 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. 33. 5 . 14 5 . 15 AUTRES TESTS WordPress + WooCommerce + StoreFront / Liste 223 produits tests classiques http1 http2
  34. 34. 6 POUR CONCLURE...
  35. 35. 7 QUESTION ?!
  36. 36. 8 PLUGINS WORDPRESS WP Super Cache W3 Total Cache WP Rocket MinQueue Ajax Load More Soil Query Monitor
  37. 37. 9 LIENS ET RÉFÉRENCES GTmetrix WebPageTest Google PageSpeed Query Monitor YSlow
  38. 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

×