$30 off During Our Annual Pro Sale. View Details »

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

    View Slide

  2. Philippe Pérusse

    View Slide

  3. Pourquoi?

    View Slide

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

    View Slide

  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

    View Slide

  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.

    View Slide

  7. Pour nous
    Infrastructure matériel

    View Slide

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

    View Slide

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

    View Slide

  10. Outils de monitoring
    Mesurer la performance

    View Slide

  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

    View Slide

  12. View Slide

  13. Quoi monitorer ?

    View Slide

  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

    View Slide

  15. Organiser son code
    Avant de débuter

    View Slide

  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

    View Slide

  17. Organise ton code.
    - Namespaces
    - Classes
    - Services (Singleton)
    - Modèles
    - Traits
    Le fichier functions.php ne doit pas être
    utilisé comme fourre-tout!

    View Slide

  18. Le coût de la performance
    Avant de débuter

    View Slide

  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

    View Slide

  20. Livrer le minimum
    Coût des ressources

    View Slide

  21. Livrer le minimum

    View Slide

  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

    View Slide

  23. Lazy load
    Livrer le minimum

    View Slide

  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

    View Slide

  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/

    View Slide

  26. Coûts des ressources - Exemples

    View Slide

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

    View Slide

  28. Images adaptatives
    Dimensions des images

    View Slide

  29. Images adaptatives

    View Slide

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

    View Slide

  31. Images adaptatives

    View Slide

  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

    View Slide

  33. Images adaptatives

    View Slide

  34. Images adaptatives

    View Slide

  35. Images de type optimisées
    Images

    View Slide

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

    View Slide

  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

    View Slide

  38. Ressources : utiliser des JPEGs et WepP
    Un service trouve les nouvelles images JPEG et les convertit en WebP

    View Slide

  39. Ressources : utiliser des JPEGs et WepP
    Si l’image existe sur
    le serveur, nous
    ajouter ce `srcset` à
    la balise

    View Slide

  40. Ressources statiques
    Politique de mise en cache des fichiers statiques

    View Slide

  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

    View Slide

  42. Mettre en cache les fichiers statiques

    View Slide

  43. Buster la cache en modifiant le nom du fichier

    View Slide

  44. Buster la cache en modifiant le nom du fichier

    View Slide

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

    View Slide

  46. 404 sur ressources statiques.

    View Slide

  47. 404 sur ressources statiques.

    View Slide

  48. 404 sur ressources statiques.

    View Slide

  49. Temps de réponse du serveur
    TTFB

    View Slide

  50. View Slide

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

    View Slide

  52. Query monitor

    View Slide

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

    View Slide

  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.

    View Slide

  55. Cache d’objets
    Temps de réponse du serveur TTFB

    View Slide

  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.

    View Slide

  57. Transients API
    Vitesse de réponse du serveur TTFB

    View Slide

  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.

    View Slide

  59. Transients API - Exemple

    View Slide

  60. Transients API - Exemple

    View Slide

  61. Transients API - Exemple

    View Slide

  62. Transients API - Exemple

    View Slide

  63. Transients API - Résultats

    View Slide

  64. ElasticPress
    Vitesse de réponse du serveur TTFB

    View Slide

  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/

    View Slide

  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.

    View Slide

  67. Cache
    Vitesse de réponse du serveur TTFB

    View Slide

  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

    View Slide

  69. Cache et contenu personnalisé
    Vitesse de réponse du serveur TTFB

    View Slide

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

    View Slide

  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)

    View Slide

  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.

    View Slide

  73. Contenu personnalisé
    Seul le premier élément est visible.

    View Slide

  74. Contenu personnalisé

    View Slide

  75. Contenu personnalisé
    Suivi des articles lus

    View Slide

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

    View Slide

  77. Erreurs
    Vitesse de réponse du serveur TTFB

    View Slide

  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

    View Slide

  79. Résultats

    View Slide

  80. Résultats : Lighthouse

    View Slide

  81. Résultats : WebPageTest.org

    View Slide

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

    View Slide