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.

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