Développer un thème performant

by Philippe Pérusse

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Philippe Pérusse

Slide 3

Slide 3 text

Pourquoi?

Slide 4

Slide 4 text

Pour eux Améliorer l’expérience utilisateur

Slide 5

Slide 5 text

Pourquoi : Améliorer l’expérience utilisateur - Diminuer les bounces - Convertir et engager les utilisateurs - Avoir des utilisateurs qui reviennent - Faire plus de cash

Slide 6

Slide 6 text

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.

Slide 7

Slide 7 text

Pour nous Infrastructure matériel

Slide 8

Slide 8 text

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 notiﬁcation Push. Le téléversement des ressources peut saturer le pipe Changer de forfait serveur n’est pas une option - $

Slide 9

Slide 9 text

Pourquoi : sauver du cash $ en infrastructure matériel

Slide 10

Slide 10 text

Outils de monitoring Mesurer la performance

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

Quoi monitorer ?

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Organiser son code Avant de débuter

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Le coût de la performance Planiﬁer 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

Slide 20

Slide 20 text

Livrer le minimum Coût des ressources

Slide 21

Slide 21 text

Livrer le minimum

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Lazy load Livrer le minimum

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Coûts des ressources Les ressources peuvent être coûteuse en temps d’exécution Préconisez les meilleurs pratiques Utiliser polyﬁll.io https://polyfill.io/v3/

Slide 26

Slide 26 text

Coûts des ressources - Exemples

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Images adaptatives Dimensions des images

Slide 29

Slide 29 text

Images adaptatives

Slide 30

Slide 30 text

Ressources : utilisez des images optimisées en dimensions.

Slide 31

Slide 31 text

Images adaptatives

Slide 32

Slide 32 text

Images adaptatives L’approche pragmatique Spatie - Ajouter un placeholder unique (Medium, Facebook, etc,) - Spéciﬁer un `sizes` de 1px pour qu’il soit chargé - Au chargement de la page, le JS spéciﬁe la dimension de l’image, dans son layout Source : https://docs.spatie.be/laravel-medialibrary/demo/responsive-images

Slide 33

Slide 33 text

Images adaptatives

Slide 34

Slide 34 text

Images adaptatives

Slide 35

Slide 35 text

Images de type optimisées Images

Slide 36

Slide 36 text

Ressources : utiliser des JPEGs et WepP Ne vous ﬁez pas à ce que le client le fasse! Ce n’est pas sa job, il ne le fera pas de toute façon….

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Ressources statiques Politique de mise en cache des ﬁchiers statiques

Slide 41

Slide 41 text

Mettre en cache les ﬁchiers 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

Slide 42

Slide 42 text

Mettre en cache les ﬁchiers statiques

Slide 43

Slide 43 text

Buster la cache en modiﬁant le nom du ﬁchier

Slide 44

Slide 44 text

Buster la cache en modiﬁant le nom du ﬁchier

Slide 45

Slide 45 text

Ressources statiques Ne pas laisser WP traiter les 404 des ﬁchiers statiques

Slide 46

Slide 46 text

404 sur ressources statiques.

Slide 47

Slide 47 text

404 sur ressources statiques.

Slide 48

Slide 48 text

404 sur ressources statiques.

Slide 49

Slide 49 text

Temps de réponse du serveur TTFB

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

Query monitor

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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.

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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.

Slide 57

Slide 57 text

Transients API Vitesse de réponse du serveur TTFB

Slide 58

Slide 58 text

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.

Slide 59

Slide 59 text

Transients API - Exemple

Slide 60

Slide 60 text

Transients API - Exemple

Slide 61

Slide 61 text

Transients API - Exemple

Slide 62

Slide 62 text

Transients API - Exemple

Slide 63

Slide 63 text

Transients API - Résultats

Slide 64

Slide 64 text

ElasticPress Vitesse de réponse du serveur TTFB

Slide 65

Slide 65 text

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/

Slide 66

Slide 66 text

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.

Slide 67

Slide 67 text

Cache Vitesse de réponse du serveur TTFB

Slide 68

Slide 68 text

Cache de ﬁchier statique - Enregistre une copie statique HTML du résultat - Facile à mettre en place et très ﬂexible - Aucune requête DB, Redis - Dans certains cas, aucune exécution PHP ou WP

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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)

Slide 72

Slide 72 text

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.

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

Contenu personnalisé

Slide 75

Slide 75 text

Contenu personnalisé Suivi des articles lus

Slide 76

Slide 76 text

Contenu personnalisé Réorganisation des éléments

Slide 77

Slide 77 text

Erreurs Vitesse de réponse du serveur TTFB

Slide 78

Slide 78 text

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