Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

1,957 views

Published on

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

Published in: Internet
  • Be the first to comment

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

×