Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Développer un thème performant

Développer un thème performant

Plusieurs façon d’améliorer les performances de votre thème. Orienté pour les développeurs et administrateurs, on parlera des bonnes pratiques, des mauvaises et de différents trucs ou plugins qui peuvent nous aider.

Philippe Pérusse

August 11, 2019
Tweet

Other Decks in Programming

Transcript

  1. Développer un thème WP performant Philippe Pérusse

  2. Philippe Pérusse

  3. Pourquoi?

  4. Pour eux Améliorer l’expérience utilisateur

  5. Pourquoi : Améliorer l’expérience utilisateur - Diminuer les bounces -

    Convertir et engager les utilisateurs - Avoir des utilisateurs qui reviennent - Faire plus de cash
  6. Pourquoi : Améliorer l’expérience utilisateur - 53% des visites d’un

    site sont abandonnées si la page prendre plus que 3 secondes à charger - Du moment où le temps de chargement passe d’une à trois secondes, la probabilité qu’un visiteur mobile quitte augmente de 32%, 5s : 90%, 6s : 106% - Walmart a vu ses revenus augmenter de 1% à chaque amélioration de 100ms sur le temps de chargement - Si un site prend plus de 1 secondes avant de devenir interactif, l’utilisateur perd l’attention et leur perception est que quelque chose est brisée - SEO : Google : Page Speed, la vitesse de chargement d’un site est pris en compte dans l’algorithme des résultats de recherche.
  7. Pour nous Infrastructure matériel

  8. Pourquoi : sauver du cash $ en infrastructure matériel On

    peut recevoir plus de 3 000 requêtes en même temps suite à un envoi de notification Push. Le téléversement des ressources peut saturer le pipe Changer de forfait serveur n’est pas une option - $
  9. Pourquoi : sauver du cash $ en infrastructure matériel

  10. Outils de monitoring Mesurer la performance

  11. Outils de monitoring de performance Lighthouse (F12) Outil qui permet

    de faire des audits de performance, built-in dans Chrome. WebPageTest https://www.webpagetest.org/ Teste la vitesse d’un site avec de vrai fureteur et de vrais vitesse de connexions Web.dev https://web.dev/measure Mesure la performance des sites
  12. None
  13. Quoi monitorer ?

  14. Quoi monitorer ? Payload du réseau (bytes totales transférées, poids

    des ressources) Dimensions des images Type des images Servir les ressources statiques avec politique de mise en cache Vitesse de réponse du serveur TTFB
  15. Organiser son code Avant de débuter

  16. Thème Sage de Roots.io https://roots.io/sage/ Thème de départ DRY templates

    avec Laravel Blade Approche orienté MVC qui respecte la hiérarchisation WordPress
  17. Organise ton code. - Namespaces - Classes - Services (Singleton)

    - Modèles - Traits Le fichier functions.php ne doit pas être utilisé comme fourre-tout!
  18. Le coût de la performance Avant de débuter

  19. Le coût de la performance Planifier dès le jour 1

    Le coût des requêtes DB Le coût des images Le coût du Javascript Le coût du CSS
  20. Livrer le minimum Coût des ressources

  21. Livrer le minimum

  22. PurgeCSS Analyse vos gabarits et retire le CSS non-utilisé Réduit

    drastiquement l’overhead généré par les librairies CSS tels que Bootstrap, Tailwind, etc. S’utilise en CLI ou avec les bundlers webpack, gulp
  23. Lazy load Livrer le minimum

  24. Lazy load - Attribut `loading` Les images qui ne sont

    pas dans le viewport ne sont pas chargées https://github.com/aFarkas/lazysizes Lazy sizes
  25. Coûts des ressources Les ressources peuvent être coûteuse en temps

    d’exécution Préconisez les meilleurs pratiques Utiliser polyfill.io https://polyfill.io/v3/
  26. Coûts des ressources - Exemples

  27. Coûts des ressources https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver

  28. Images adaptatives Dimensions des images

  29. Images adaptatives

  30. Ressources : utilisez des images optimisées en dimensions.

  31. Images adaptatives

  32. Images adaptatives L’approche pragmatique Spatie - Ajouter un placeholder unique

    (Medium, Facebook, etc,) - Spécifier un `sizes` de 1px pour qu’il soit chargé - Au chargement de la page, le JS spécifie la dimension de l’image, dans son layout Source : https://docs.spatie.be/laravel-medialibrary/demo/responsive-images
  33. Images adaptatives

  34. Images adaptatives

  35. Images de type optimisées Images

  36. Ressources : utiliser des JPEGs et WepP Ne vous fiez

    pas à ce que le client le fasse! Ce n’est pas sa job, il ne le fera pas de toute façon….
  37. Ressources : utiliser des JPEGs et WepP https://developers.google.com/speed/webp/docs/cwebp WebP Plusieurs

    plugins disponibles Certains gratuits, certains payants Peuvent utiliser les APIs externes pour traiter vos images. cwebp Utilitaire à utiliser en console, développé par Google
  38. Ressources : utiliser des JPEGs et WepP Un service trouve

    les nouvelles images JPEG et les convertit en WebP
  39. Ressources : utiliser des JPEGs et WepP Si l’image existe

    sur le serveur, nous ajouter ce `srcset` à la balise <picture>
  40. Ressources statiques Politique de mise en cache des fichiers statiques

  41. Mettre en cache les fichiers statiques https://github.com/h5bp/server-configs-nginx/blob/master/h5bp/web_performance/cache_expiration.conf https://github.com/h5bp/server-configs-apache/blob/master/src/web_performance/cache_expiration.conf

  42. Mettre en cache les fichiers statiques

  43. Buster la cache en modifiant le nom du fichier

  44. Buster la cache en modifiant le nom du fichier

  45. Ressources statiques Ne pas laisser WP traiter les 404 des

    fichiers statiques
  46. 404 sur ressources statiques.

  47. 404 sur ressources statiques.

  48. 404 sur ressources statiques.

  49. Temps de réponse du serveur TTFB

  50. None
  51. Query Monitor Outil https://fr.wordpress.org/plugins/query-monitor/

  52. Query monitor

  53. Appels au API-tiers Temps de réponse du serveur - TTFB

  54. Appels aux APIs tiers Appels sur services externes (GeoIP, Google,

    Facebook, Instagram, Twitter) - Ne devrait jamais être fait sur le dos de l’utilisateur - Préconisez un wp-cron qui fera la job.
  55. Cache d’objets Temps de réponse du serveur TTFB

  56. Object Cache : Redis La cache d’objet est utilisée de

    façon native par WP pour conserver en mémoire le résultat de processus qui pourraient être coûteux à régénérer. Non-persistent, uniquement pour la requête courante Redis - Le plugin Redis Object Cache (drop-in) fait la job pour nous.
  57. Transients API Vitesse de réponse du serveur TTFB

  58. Transients API API qui nous permet de mettre en cache

    des données sous forme `clé => valeur` - Utilise la DB out-of-the-box - Utilisera Redis si le plug-in est installé. - Excellent pour des données qui changent rarement - Menu - Pied de page - Barre latérale - etc.
  59. Transients API - Exemple

  60. Transients API - Exemple

  61. Transients API - Exemple

  62. Transients API - Exemple

  63. Transients API - Résultats

  64. ElasticPress Vitesse de réponse du serveur TTFB

  65. Elastic Search + WP = ElasticPress Elastic Search : Serveur

    d’indexation et de recherche de document ElasticPress fait le pont entre WP et le moteur ElasticSearch Utilisation transparente via WP_Query et le paramètre `s` https://github.com/10up/ElasticPress https://www.elasticpress.io/
  66. Elastic Search + WP = ElasticPress Pour le contenu relatif

    More Like This Query The More Like This Query finds documents that are "like" a given set of documents.
  67. Cache Vitesse de réponse du serveur TTFB

  68. Cache de fichier statique - Enregistre une copie statique HTML

    du résultat - Facile à mettre en place et très flexible - Aucune requête DB, Redis - Dans certains cas, aucune exécution PHP ou WP
  69. Cache et contenu personnalisé Vitesse de réponse du serveur TTFB

  70. Contenu personnalisé Comment proposer du contenu non-lu à l’utilisateur?

  71. Solution Prioriser le contenu en JS - Enregistrer les IDs

    des articls lus dans storage local côté-client - Récupérer une vingtaine d’articles relatifs - Cacher tous les articles relatifs en CSS outre le premier - Pour chacun des articles relatifs, s’il a été lu, le mettre en bas de la liste (il ne sera pas visible)
  72. Contenu personnalisé On affiche le même contenu pour tous, mais

    côté-client, on priorise le contenu qui n’a pas été vu par l’utilisateur courant.
  73. Contenu personnalisé Seul le premier élément est visible.

  74. Contenu personnalisé

  75. Contenu personnalisé Suivi des articles lus

  76. Contenu personnalisé Réorganisation des éléments

  77. Erreurs Vitesse de réponse du serveur TTFB

  78. Pas faire d’erreur / lever des notices PHP En tous

    les cas, une erreur, aussi sévère qu’elle soit, doit être adressée Une erreur est coûteuse sur la vitesse d'exécution du code
  79. Résultats

  80. Résultats : Lighthouse

  81. Résultats : WebPageTest.org

  82. Merci @philperusse https://speakerdeck.com/philippeperusse