 On va essayer de parler de temps de chargement et surtout, comment on va pouvoir améliorer le temps de chargement de ces sites internet. Non, ça marche plus. Non, c'est bon. Alors très rapidement, le but c'est pas de faire un roman. Sur moi, je m'appelle Jean-Baptiste Marchand-Arvier, je suis le co-fondateur d'une start-up qui s'appelle WEP Media et on est connus pour avoir fait deux produits. Le premier, c'est WP Rocket. C'est un plugin de cash pour WordPress. Et le second, c'est Imagify. C'est un service d'optimisation d'image. Ce qui est important à comprendre sur la performance, c'est qu'il y a quelques temps, le temps de chargement, pardon, c'était pas un sujet très récurrent. On se demandait pourquoi on parlait de ça. Il se trouve que depuis quelques années, l'utilisation du web est de plus en plus présente. On a des sites de plus en plus lourds parce qu'on a plein de supers images. On a un site qui utilise beaucoup de JavaScript. Et surtout, il y a eu plein d'études qui ont été faites qui montrent que si on a un site lent, ça va avoir un impact énorme sur les conversions. Donc si vous avez un site où vous vendez quelque chose, si vous avez un site lent, vous allez avoir beaucoup moins de conversions. Vous allez avoir une expérience utilisateur qui va être beaucoup plus mauvaise. Et si derrière, vous faites des ventes, vous allez potentiellement perdre des ventes. Personne n'aime attendre. Je pense que vous êtes les premiers quand vous avez un site qui met trop de temps à charger, à vous énerver potentiellement et surtout à quitter le site et aller sur le site des concurrents. Donc aujourd'hui, et puis même hier, c'est extrêmement important et demain, ça sera encore plus d'avoir des sites qui chargent très très rapidement. On va voir ensemble quelle solution on peut mettre en place. L'idée, c'est un peu de couvrir tous les sujets de la performance. On ne va pas aller sur un sujet très spécifique. Donc on va avoir un petit peu les sujets un peu larges qui couvrent la performance et surtout qu'est-ce qu'on va pouvoir mettre en place sur son site internet de façon très concrète. Donc on va principalement parler de cache. Ça, ça va globalement très facilement vous aider sur votre site. On va faire un petit peu de technique. Alors comme c'est des WorldCamp et que c'est un public qui est normalement très disparat, sur les niveaux techniques, on ne va pas aller très profondément dans la technique. Et puis surtout, on ne va parler pas mal de bon sens parce que la performance, comme beaucoup de choses, c'est surtout une question de bon sens. C'est juste pour le spoil. Donc on va parler de cache et je pense qu'il y a plein de gens par ici qui ont déjà entendu parler de cache mais qui ne savent pas exactement ce que c'est. Et donc on va commencer par une petite définition de ce qu'est le cache et pour ça je vais vous faire travailler et je vais avoir besoin de quelqu'un qui me donne la réponse de combien font 1599 divisé par 123 ? Et le premier qui me donne la réponse, je lui paye un coup de boire ce soir. Paystation. Il a fallu environ 10 secondes à monsieur qui a une calculette sur son ordinateur pour trouver le résultat. Finder, qui l'utilise un bac, il est très intelligent. Est-ce que quelqu'un peut me dire combien fait 1599 divisé par 123 ? J'ai entendu 13. Ça a pris environ 500 millisecondes. Donc là, tout simplement, on vient de mettre en place un système de cache. Un système de cache est aussi simple que ça. C'est stocker de façon temporaire une information. Et souvent, c'est une information qui est compliquée à récupérer. Donc là, pour nous, ça va être du calcul mental. Mais dans l'informatique, ça va être des requêtes dans la base de données, ça va être des gros fichiers à télécharger. Et c'est exactement ça. C'est tout simplement stocker temporairement une information. Et si ce soir je vous demande combien fait cette division, vous aurez très certainement oublié. Et ce qui est pas mal avec le cache, c'est qu'il y a énormément de types de cache. Et donc on va un petit peu balayer tous les types de cache. Encore une fois, pas de façon hyper profonde. Ce n'est pas le but que vous soyez des experts du cache et des cache, mais que vous compreniez globalement à quoi ça sert et surtout comment on les met en place. Le premier qu'on va avoir, ça s'appelle le cache navigateur. C'est globalement le plus simple à mettre en œuvre et c'est le plus simple à comprendre. Le cache navigateur, il se contrôle au niveau de votre serveur. Et en fait, c'est assez simple. Globalement, on l'utilise sur les fichiers qu'on dit statiques. Donc c'est souvent des gros fichiers, ça correspond aux fichiers médias. Donc les fichiers médias, ça va être vos images, vos fichiers CSS, sous vos fichiers JavaScript. Et le cache navigateur, c'est simplement une instruction que va donner le serveur au navigateur de conserver ces données pour une durée déterminée. Et pour ça, il y a deux façons. Il y a la première façon qui est par la mise en place d'expires. Donc en gros, c'est le serveur qui va donner cette information et il va lui dire de conserver ces fichiers jusqu'à une certaine date. Donc là, je vous ai mis un exemple de la date 2042. Donc si vous avez cette configuration-là sur votre serveur pour vos fichiers statiques, vos navigateurs, les navigateurs de vos visiteurs vont conserver dans leur cache interne jusqu'en 2042 l'ensemble de vos fichiers. Statiques, donc CSS, JavaScript, images, sachant que c'est configurable pour tous types de fichiers. Et donc vous, en tant que navigateur, quand vous allez visiter un site, si à cette configuration-là, jusqu'en 2042, vous n'allez plus télécharger depuis le serveur ce fichier. Donc vous pouvez le comprendre, c'est hyper intéressant parce que pour le serveur, il va plus y avoir d'échange d'information, plus de bandes passantes, et pour votre navigateur, il aura accès directement aux fichiers. Et la seconde solution, c'est le cache-control. En fait, on va simplement lui dire ces fichiers-là, tu les conserves pour une durée déterminée qui est une durée en seconde. On va lui dire ces fichiers-là, tu vas les garder pendant 1 000 secondes, 3 600 secondes, la valeur qu'on veut. Et après, libre à nous, il n'y a pas de règles de choix si on utilise un Expire ou un cache-control. Et ce qu'il faut comprendre, et ça, c'est extrêmement important, c'est que la mise en cache, elle se fait par nom de fichier. C'est-à-dire que votre navigateur, il va regarder les noms des fichiers, il va les stocker dans son cache. Donc par exemple, sur un site en général, les fichiers de CSS s'appellent style.css. Et donc, le navigateur va stocker dans son cache, dans sa mémoire interne un fichier style.css d'un site en particulier, et il va plus jamais faire de requêtes jusqu'en 2042, si c'est 2042, la date d'expiration. Et il s'avère que, sur votre site internet, vous allez très certainement faire des modifications. Vous allez pouvoir changer votre fichier de style parce que vous allez vouloir faire un redesign de votre site, vous allez vouloir peut-être rajouter un logo, faire un changement sur des images. Et donc vous allez modifier ce fichier. Et si vous le modifiez et que vous ne changez pas le nom, le navigateur l'aura toujours dans son cache, et vos visiteurs qui l'auront dans leur cache ne verront pas les modifications puisque le fichier sera toujours dans le cache et jusqu'en 2042, ils ne pourront pas voir les changements de votre site. Et c'est pour ça qu'on met en place ce qui s'appelle du versionnement. Donc la solution la plus simple, ce serait de changer, la plus logique au départ, ce serait de changer le nom de fichier. Si je l'appelle style1.css, comme le navigateur, il a style.css, style1 il n'a pas dans son cache, donc il va réafficher, il va re-télécharger ce fichier. Sauf que ce n'est pas très élégant, à chaque fois que vous faites une modification sur votre style, je l'appelle style1, style2, style3, et puis à la fin de l'année, vous aurez style573, et ce n'est pas très facile de s'y retrouver. Donc on met ce qu'on appelle du versioning. Donc en gros, à la fin du nom du fichier, vous mettez un point d'interrogation, et puis un paramètre, alors là moi j'ai mis v, mais ça pourrait être a, n'importe quoi, version égale 1.2. Et puis quand vous allez changer, vous allez faire une mise à jour de votre fichier, vous allez mettre 1.3 ou 1.2.1. Ce qu'il faut c'est simplement que le nom soit différent et donc vous allez généralement incrementer un chiffre, puisque de façon très simple, puis un petit script, vous allez pouvoir l'incrémenter de façon automatique. Et comme le nom a changé, le bon fichier. Donc ça c'est vraiment très important, et c'est pour ça que ça vous est déjà arrivé, certainement vous étiez sur, peut-être en développement, sur vos sites locaux, ou sur un site de vos clients, et puis vous ne voyiez pas la modification, puis vous devez, ah mince, j'ai oublié de vider mon cache, en fait c'est le cache navigateur, et vous n'aviez pas simplement changé la version du fichier style. Donc ça c'est un petit point, et deuxième point qui est extrêmement important, parce que dans la configuration de votre serveur, vous allez pouvoir mettre en place du cache navigateur par type de fichier, donc les fichiers style, les images, et vous allez pouvoir sélectionner des fichiers HTML à mettre en cache. Et ça il faut jamais le faire, en tout cas pas sous cette forme, pourquoi ? Parce qu'un fichier HTML, par défaut, il n'a pas réellement de nom, c'est un document que le navigateur va télécharger. Donc vous n'allez jamais pouvoir changer son nom. Et donc si vous le mettez, vous donnez au navigateur l'instruction de le mettre en cache jusqu'en 2047, et vous faites des modifications sur votre site internet, vous rajoutez du nouveau contenu, sur la page d'accueil, elle sera toujours la même pour les visiteurs qui ont ce index point HTML dans leur cache jusqu'en 2042, ce qui n'est pas très pratique. Donc c'est vraiment une des règles. Il ne faut jamais utiliser le cache navigateur pour les fichiers HTML. Il y a d'autres moyens, mais il ne faut pas l'utiliser de cette façon-là, en tout cas. Les deuxième type de cache, et là c'est un peu plus spécifique à WordPress, que vous le savez, je l'espère. WordPress c'est fait en PHP et PHP c'est un langage qu'on appelle interprété. Ce qui veut dire que votre serveur web, quand vous allez appeler des fichiers PHP, lui il va lire le fichier à PHP, il va quelque part un peu le décoder et il va créer un fichier qu'on appelle précompilé, ce fichier il s'appelle OP-Code. En fait c'est des fichiers qui vont pouvoir être lus par le serveur. Il se trouve que cette opération elle est un petit peu longue. Pourquoi ? Parce que à chaque fois que vous allez appeler votre fichier le serveur web va lire le fichier PHP, le précompiler, ça ça prend du temps. Et donc la solution c'est toujours pareil, c'est du cache. C'est stocké de façon temporaire le résultat de ces fichiers. Et ça s'appelle du cache OP-Code et la solution s'appelle OP-Cache. Et la bonne chose c'est que normalement vous n'avez rien à faire. Alors normalement c'est si vous utilisez une version de PHP qui est supérieure à 5.5. Aujourd'hui on est à PHP 7.2 si ma mémoire est bonne. Donc PHP 5.5 c'est normalement une très vieille version mais il se trouve que très certainement ici il y en a qui l'utilisent ou qui utilisent des versions inférieures. Mais si vous avez une version supérieure à PHP 5.5 par défaut le cache d'OP-Code est activé vous avez strictement un affaire. Si c'est pas le cas regardez comment mettre à jour PHP via votre hébergeur donc vérifiez que vous avez bien une version supérieure à 5.5 idéalement la dernière en termes de performance c'est mieux. Et si c'est pas le cas et que vous ne pouvez pas la mettre à jour vous avez toujours les solutions d'installer un cache OP-Cache pour réaliser cela. Troisième type de cache c'est ce qui s'appelle du cache objet enfin il y a deux éléments qui sont vraiment intégrés à WordPress c'est du cache objet et des transcientes. Globalement ça fonctionne à peu près pareil mais ça sert pas à la même chose. Le cache objet en fait il va stocker une donnée pour une donnée pour une durée temporaire ou fixe mais le temps d'une requête c'est à dire que quand un fichier PHP appelé la donnée va être stockée mais si on réappelle ce fichier la donnée est stockée elle est vidé donc c'est une utilisation très très spécifique à titre personnel et je pense qu'il y a plein de développeurs qui n'ont jamais utilisé parce que c'est pas très utile ou en tout cas pour une utilisation générale c'est pas extrêmement utile mais si vous aviez à l'utiliser si vous êtes développeur ça fonctionne assez facilement il y a deux fonctions c'est WP cache AD avec un premier paramètre qui est la clé donc c'est le nom tout simplement de ce que vous voulez mettre en cache second paramètre c'est la valeur que vous voulez mettre en cache troisième paramètre qui est facultatif c'est une expiration où vous pouvez dire bon bah cette valeur elle va je veux qu'elle soit gardée en cache pendant une seconde par exemple et simplement pour le récupérer vous faites WP cache get et avec le nom de la clé et vous récupérez la valeur deuxième point ça s'est beaucoup plus utilisé c'est les transients ça permet dans WordPress directement de stocker une valeur une donnée de façon temporaire et c'est super intéressant parce qu'il se trouve que souvent dans des sites internet on va devoir récupérer via des API externes par exemple des données qui sont temporaires par exemple vous voulez récupérer liste de tweets vos derniers tweets et vous voulez utiliser PHP pour ça et vous voulez requetter la paix de Twitter pour ça plutôt que de faire des requêtes à chaque page de la paix de Twitter pour récupérer vos derniers tweets qu'est-ce que vous allez faire vous allez le faire une fois stocker le retour l'ensemble de vos tweets dans un transient et vous allez dire ce transient il expire dans une heure deux heures au lieu de faire des requêtes à Twitter à chaque chargement de page vous allez le faire toutes les deux heures par exemple ça c'est extrêmement intéressant mais c'est pas que pour des API externes pour vous donner un petit exemple sur notre site internet on affiche le nombre de sites qui utilisent notre plugin et ça on le fait via une requête SQL qui peut être un peu lourde et bien pour optimiser ça le retour de la requête SQL on la stocker dans un transient parce que c'est pas une donnée qu'on a besoin d'actualiser et on n'a pas besoin qu'elle soit toujours à jour et donc on la stock dans un transient et puis on la met à jour toutes les 24 heures toutes les 3 heures en fonction des besoins qu'on a et tout ça c'est c'est automatique et ça permet d'optimiser ce qu'il faut bien comprendre avec l'optimisation c'est que c'est un ensemble de petites opérations il n'y a pas une grosse opération magique qui va transformer votre site internet c'est plein de petites choses qui va vous permettre d'améliorer le temps de chargement de vos sites web après celui-là c'est donc le cache applicatif ça c'est dans l'environnement de façon générique pour WordPress on appelle plutôt ça un cache statique alors si vous utilisez un plugin de cache je peux importe le plugin de cache ils font ce qu'on appelle du cache statique alors comment ça marche un cache statique c'est finalement assez basique vous êtes censé savoir que WordPress c'est généré dynamiquement c'est à dire que l'affichage de vos pages se fait via des requêtes PHP du code PHP qui va interroger une base de données et puis réafficher de la donnée et tout ça ça prend du temps et c'est pas forcément nécessaire parce qu'on n'a pas besoin de temps réel et bah le plugin de cache il va récupérer le fichier HTML le contenu de votre site internet et il va le stocker de façon statique dans un fichier HTML et on va afficher tout simplement le fichier HTML direct qui est un fichier statique et qui s'affiche de façon quasi immédiate puisque on n'a plus de PHP on n'a plus de requêtes SQL on n'a plus besoin d'aller charger la base de données ni plus besoin de charger WordPress donc c'est globalement ce qui se passe avec tous les plugins de cache et j'ai ajouté aussi c'est ce qui se passe avec les... vous avez peut-être entendu parler d'un truc qui s'appelle les cache server et bah c'est pareil en fait le cache server il va récupérer les fichiers HTML enfin en tout cas le contenu HTML qui est généré par PHP ou par tout type de de code pour les stocker dans son cache à lui alors ça ne sera pas via des fichiers HTML comme un cache statique pour WordPress mais ce sera des fichiers très spécifiques et qui seront stockés par le serveur alors NGNX qui est un serveur web très connu fait ça notamment ce qui est important à comprendre aussi sur le cache c'est que on stock des données donc comme je vous l'ai dit je vais vous le répéter ce sont stock temporairement une donnée mais pour que ce soit intéressant c'est que cette donnée il faut pouvoir la récupérer de façon très rapide parce que si je stock une donnée mais qu'il me faut 15 secondes pour récupérer cette donnée bah c'est ça à rien de la mettre en cache et donc c'est pour ça qu'il y a alors on va pas rentrer on va pas rentrer en détail mais c'est quelque chose vous avez certainement dû en temps de parler il y a des serveurs qu'on va globalement appeler des serveurs de cache et qui sont des outils dédiés pour stocker du contenu qui est en général lié au cache il y en a deux qui sont très connues le premier il s'appelle Meme Cached c'est vraiment le enfin c'est originalement celui qui est le plus connu il est plus ou moins en train de mourir et le second il s'appelle Redis l'avantage de Redis c'est que c'est pas que pour le cache c'est quelque chose qui est extrêmement rapide puisqu'il va stocker toutes les données dans une mémoire vive donc c'est extrêmement rapide à la fois en lecture et en écriture et vous allez pouvoir stocker tout type de données donc par exemple votre page HTML de votre site vous allez pouvoir la stocker dans même cache ou dans Redis et puis il y a un dernier cas particulier et on aura à peu près fait le tour de différents types de cache c'est ce qui s'appelle les Rivers Proxy le plus connu il s'appelle Varnish en fait le fonctionnement il est assez simple donc le Rivers Proxy c'est la boîte bleue que vous voyez sur le schéma en fait une requête entre un navigateur et un serveur donc elle va passer par le navigateur là il y a un ce qui s'appelle un Firewall mais on va l'oublier normalement elle passe directement vers le serveur donc il va y avoir une requête qui va être faite il va y avoir des calculs qui vont être fait des interrogations et puis elle est renvoyée au navigateur le Rivers Proxy c'est une espèce de boîte qu'on met entre le serveur et le navigateur qui va stocker de façon temporaire des informations et donc elle peut stocker des fichiers CSS elle peut stocker des fichiers HTML et elle va tout simplement les insérer dans son cache en fonction de règles particulières donc on peut dire si il varniche les fichiers HTML tu les stockes pendant une heure c'est-à-dire que le navigateur quand il va demander une page si il varniche à cette page dans son cache qui va directement la délivrer l'information n'ira pas jusqu'au serveur donc elle sera traitée de façon statique et en général c'est beaucoup plus rapide alors je pense si vous êtes là vous demandez comment c'est bien beau tous ces systèmes de cache ça m'a l'air quand même un peu compliqué moi je vais pouvoir les mettre en place dans WordPress moi le premier truc que je vous recommande vivement c'est d'utiliser un plugin de cache l'avantage du plugin de cache c'est qu'il va pas que faire la mise en place du cache statique parce que c'est bien beau d'avoir un cache statique mais il y a pas mal de problématiques qui découlent d'avoir en place un cache statique la première c'est la purge ce que j'appelle la purge c'est tout simplement la suppression d'afficher de cache parce que quand vous avez un site WordPress en général vous allez créer du contenu et vous allez surtout mettre à jour du contenu et donc quand vous allez créer un nouvel article je pense que vous avez envie que vos visiteurs puissent voir ce nouvel article et donc c'est pour ça qu'il est extrêmement important qu'il y ait une gestion très fine de la purge pour vous donner un exemple quand vous allez créer un article dans WordPress si votre page d'accueil est configuré pour afficher les derniers articles de votre de les derniers articles cet article sera présent sur la page d'accueil elle sera présent également s'il y a des tags sur la page de tag elle sera présent également sur la page de catégorie s'il y a une catégorie sera présent sur la page hauteur donc comme vous voyez il y a finalement plein de pages qui vont plus être à jour et donc ces pages il va falloir supprimer les éléments qui sont qui sont cachés et bah c'est ce que fait un plugin de cache et c'est pour ça qu'il est quand même assez recommandé d'utiliser un plugin de cache à moins que vous ayez des connaissances très fines au niveau serveur puisque lui il va tout faire pour vous il va à la fois mettre la page dans son cache mais surtout il va gérer tous les cas où il va falloir supprimer les éléments du cache comme ça vous allez être certain quand vous allez publier un nouvel article et bah cet article et bah vos visiteurs vont pouvoir voir ce contenu et il sera pas conservé dans un cache donc ça c'est le premier point et puis le second point c'est que ces plugins de cache pas tous mais la plupart ils vont configurer tout un tas de bonnes pratiques et notamment le cache navigateur parce que le cache navigateur ça se fait assez facilement dans la configuration du serveur mais vous n'avez pas forcément accès vous pouvez avoir un peu peur de toucher ces choses là parce que sur apache c'est dans un fichier acheter access c'est pas toujours évident et on peut cassé le site si on met pas les bonnes règles et bah le plugin de cache il va s'occuper de ça pour vous tout seul il y en a plusieurs de solutions on peut citer W3 Total Cache VP Super Cache VP Rocket moi je vais pas vous en recommander un ce serait pas très honnête ce que je vous conseille bah c'est d'essayer ce qui est important c'est d'être à l'aise avec son plugin de cache c'est d'être sûr que ça fonctionne et puis que vous ayez des résultats mais il n'y a pas que le cache il y a quand même pas mal d'autres choses à faire comme je vous l'ai dit je vous le redis la performance c'est pas un outil magique qui va permettre d'accélérer vos sites internet c'est plein de petits trucs qui vont vous permettre d'améliorer je vous parlais de bon sens et bah la première règle du bon sens ça va être de mettre à jour tous les outils qu'on utilise et ça c'est absolument enfin c'est une règle qui paraît bête mais qui peut avoir un impact extrêmement important je pense spécifiquement à PHP PHP récemment ça fait quelques années maintenant ils ont travaillé énormément sur la performance pour qu'ils soient plus rapides à s'exécuter ça a été un des très gros points de la version 7 de PHP et il y a des sites qui ont amélioré leur performance de plus de 50% simplement en passant d'une version 5x6 à une version 7.0 par exemple donc ça c'est vraiment un des points extrêmement essentiels soyez sûr que vous ayez la dernière version de PHP sachant qu'aujourd'hui la plupart des hébergers modernes ont par défaut la dernière version et ils vous permettent également de changer de version de PHP donc ça c'est vérifier bien que vous pouvez le faire et que vous avez la dernière version et puis bon ça c'est vrai pour PHP mais c'est vrai aussi pour le server web c'est vrai aussi pour MySQL c'est vrai aussi pour WordPress WordPress continue de mettre à jour son outil pour qu'ils soient plus performants mais c'est vrai aussi pour l'ensemble de vos plugins parce que si vous avez des plugins qui datent d'il y a 5 ans et que vous n'avez toujours pas mis à jour il serait peut-être temps de regarder pour les mettre à jour parce qu'il y a certainement des améliorations qui ont été faites pour qu'ils soient plus performants le deuxième point c'est l'hébergeur on le voit régulièrement il y a des clients chez nous qui mettent tout en place tout ce qu'il faut pour que leurs sites soient rapides mais ils ont un hébergeur qui est très médiocre qui a des serveurs qui ne sont pas forcément bien configurés ils ont peut-être trop de monde sur chacun des serveurs et donc ils se trouvent que leur site s'est lent et il n'y a strictement rien à faire la seule solution c'est d'avoir un bon hébergeur il y a des hébergeurs qui sont sponsors on est notamment au-delà de Switch qui est très recommandé en France et qui fonctionne très bien il y en a plein d'autres c'est pareil moi je vous invite à regarder un petit peu ce qu'il se fait en France et ailleurs voir celui qui vous plaît plus et d'être particulièrement attentif à la performance de ces serveurs il y a d'autres choses qui fonctionnent bien c'est la minification et la concaténation des fichiers alors c'est les fichiers CSS et JavaScript c'est deux choses différentes quelques fois c'est un petit peu mélangé donc on va faire un petit rappel la minification c'est un processus qui permet d'enlever toutes les commentaires les sauts de lignes qui sont présents dans un fichier parce que dans un fichier CSS sous-jeu à la script le développeur va mettre des commentaires pour expliquer ce qu'il fait ou il va faire des retours à la ligne et tout ça c'est pas grand chose mais sur un fichier de 1000 lignes il peut rapidement y avoir 100 lignes et donc le fait d'enlever ces 100 lignes ça va produire un fichier plus petit qui dit fichier plus petit dit fichier plus léger donc ce sera plus rapide à charger donc ça c'est ce qui s'appelle la minification le second c'est la concaténation c'est quelque chose qui était très populaire il y a quelques années l'idée c'est tout simplement de réduire le nombre de requêtes HTTP donc c'est le nombre de requêtes que va faire votre navigateur un serveur pour avoir des informations par exemple si vous avez dit fichier CSS à charger ça va faire 10 requêtes HTTP ce qui est 1 assez long à faire et surtout il y a aujourd'hui une limitation alors qu'il est en train de sauter mais il y a une limitation du protocole HTTP et des navigateurs qui limitent à environ 6 requêtes en parallèle c'est à dire que si vous avez 10 fichiers à télécharger il y en aura 6 qui se feront en parallèle et tant que il n'y en a pas un qui est libéré les fichiers suivants ne seront pas téléchargés et donc la concaténation va permettre de transformer ces 6 fichiers ou ces 4 fichiers en un seul ce qui permettra de faire moins de requêtes HTTP et ça pour ça il y a des plugins de cache qui les intègrent directement ou il y a d'autres plugins qui sont dédiés à ça pour vous donner un exemple il y a Auto Optimize qui est un plugin qui permet de gérer cela très bien une dernière petite astuce c'est le chargement différé des images ça c'est pas mal du tout c'est qu'en fait quand vous affichez un site internet votre navigateur n'affiche pas tout le contenu du site internet puisque après vous devrez scroller pour avoir du contenu en fait l'idée c'est que comme tout n'est pas affiché ça sert à rien de charger toutes les images qui ne sont pas affichées donc le chargement différé va simplement c'est un script JavaScript qui va simplement couper le chargement des images qui ne sont pas affichées par le navigateur et au fur et à mesure que vous allez scroller dans la page le script JavaScript va tout simplement faire charger les images qui arrivent donc ça permet d'alléger de façon très conséquente le poids des images il y a des plugins qui le font nativement WP Rocket il y a un plugin qui fait uniquement ça qui s'appelle BejiLazyLoad il y a un autre plugin gratuit qu'on a sorti gratuitement qui s'appelle BejiLoad by WP Rocket qui se trouve dans le repository WordPress et qu'est-ce qu'on peut faire en plus il y a l'optimisation des images c'est aussi un point qui est assez important c'est que l'image c'est un format qui est très intéressant parce qu'il peut être compressé tout en conservant la qualité aujourd'hui les images représentent entre 60% à 70% du poids total d'un site ce qui est très conséquent donc si vous êtes capable de réduire le poids de ces images vous allez potentiellement réduire 60% de votre siteware pour ça je peux vous recommander deux outils il y a Imagify ou YesMushIt qui fonctionnent bien aussi qui permet tout simplement d'optimiser le poids des images de votre site WordPress on l'entend souvent parler quand on parle de performance de l'utilisation des plugins et du fait que si on a trop de plugins sur son site WordPress ça va le ralentir la réponse à ça c'est ça dépend il y a des exemples de sites internet qui ont des centaines de plugins et qui sont absolument pas ralentis et inversement vous allez pouvoir ajouter un plugin et il va ralentir de façon très important de votre site internet ce qu'il faut faire extrêmement attention c'est les plugins qui vont ajouter des fichiers JavaScript des fichiers de style sur votre site ça va souvent être les plugins de galerie les plugins de slideshow et donc c'est cela qu'il faut faire extrêmement attention surtout encore une fois c'est du bon sens on voit quelques fois sur des sites clients ils ont essayé quatre plugins de slider au lieu d'en garder qu'un ils ont laissé les quatre activés résultat on a quatre fois tous les fichiers qui sont chargés sur tout le site et donc ça a lourdit de façon complètement inutile le site internet et puis dernier point c'est l'utilisation d'un cdn en fait un cdn c'est un service qui va héberger partout dans le monde l'ensemble de vos fichiers les plus lourds donc c'est les fichiers CSS JavaScript et images toujours un petit peu les mêmes si vous suivez l'idée c'est que internet c'est mondial vous avez peut-être un site un site qui est hébergé à Paris mais vous avez certainement en tout cas je l'espère pour vous des visiteurs qui viennent un peu partout dans le monde qui viennent par exemple New York et New York c'est pas extrêmement proche de Paris et donc le temps nécessaire même si c'est fibré pour faire le transit entre New York et Paris ça prend un peu de temps surtout sur des fichiers un peu lourds comme des fichiers images l'idée d'un cdn c'est de multiplier d'avoir des serveurs un petit peu partout dans le monde qui va stocker l'ensemble de vos fichiers répartis dans le monde c'est à dire que si vous utilisez un cdn et que vous avez un visiteur qui vient de New York il va charger c'est complètement transparent et automatique les images de votre site les fichiers statiques de votre site depuis un serveur localisé à New York et là on arrive sur la partie la plus importante mais il ne reste pas énormément de temps donc je vais devoir aller un petit peu assez rapidement c'est comment mesurer et comprendre son temps de chargement et ça c'est vraiment extrêmement important il y a 3 outils que je peux vous recommander le premier c'est Pinkdom Tools qui est très intéressant pour mesurer son temps de chargement et c'est et c'est vraiment le point important c'est le mot temps de chargement on entend beaucoup de personnes qui se trompent et pensent que les notes page speed les notes GT Matrix donnent une indication sur le temps de chargement de son site internet et ça c'est absolument faux en fait ces outils-là vous indique la mise en place de bonne pratique elle va regarder si vous avez de la minification si vous avez un CDN mais c'est pas parce que vous avez en place toutes les bonnes pratiques sur votre site internet qui va être rapide à charger et vos visiteurs ils en ont un peu rien à faire des bonnes pratiques eux ce qu'ils veulent c'est que votre site soit rapide à charger et donc si vous avez mis en place toutes les bonnes pratiques mais que vous avez un hébergeur qui n'est pas terrible et que le site va être très long à charger vous aurez peut-être sur page speed mais vos visiteurs ils seront pas contents et ils vont aller voir les concurrents donc il est vraiment très important de bien dissocier le temps de chargement et les notes qui sont données par ces outils-là et c'est pour ça qu'on recommande et surtout ça permet de voir l'évolution d'utiliser Pingdom et GT Matrix et Darboost qui permettent effectivement d'avoir des notes et d'avoir un suivi sur les bonnes pratiques qui sont mis en place j'ai fait un petit exemple sur Pingdom pour voir un petit peu le résultat et surtout pour vous faire un petit peu une analyse assez rapide donc le site c'est l'Elysée quelque chose d'extrêmement important si vous utilisez Pingdom c'est de faire très attention aux serveurs que vous utilisez si vous regardez un petit peu en haut il y a écrit test from et c'est sélectionner Europe-Germany et ça c'est très très important quand vous testez déjà testez plusieurs fois pour être sûr d'avoir une bonne donnée parce que quelques fois les données peuvent être polluées et surtout de tester toujours du même endroit et surtout de l'endroit le plus proche de votre serveur parce que si vous avez un serveur en Europe et que vous testez avec un serveur de test en Asie les résultats ils vont pas être cohérents donc faites très attention à ça ça c'est le premier point deuxième point c'est essayer d'avoir du bon sens sur les résultats est-ce que là sur les quatre éléments que remonte Pingdom il y a est-ce que quelqu'un peut me dire ce qu'il trouve de pas terrible ou voire choquant sur ses résultats exactement parfait ouais c'est assez incroyable c'est que la page elle fait 13,7 Mb c'est absolument énorme pour un site internet on recommande de pas dépasser les 3 Mb, 4 Mb, 5 Mb grand maximum donc là c'est beaucoup et ce qui va être intéressant c'est de comprendre ce qui pourquoi on a autant de tailles de pages donc là c'est j'ai pris des captures d'écran de Pingdom un petit peu plus en dessous qui a une petite fonctionnalité qui est assez sympa c'est qu'il va regrouper en fait la taille des éléments par le type d'éléments et là ce que vous pouvez voir très certainement c'est que 95% du pot de la page il est représenté par des images donc on a 13 Mb d'images et donc quand je vous donnais 60% du pot de la page là c'est plutôt 90% donc ils ont un gros boulot à faire sur les images un autre truc super intéressant sur Pingdom c'est que vous allez avoir en fait une liste de tous les éléments qui sont chargés et vous allez pouvoir trier par ce que vous voulez et là moi ce que j'ai fait c'est que j'ai trié tout en haut à gauche vous devez voir l'autre time donc moi j'ai trié par le temps de chargement qui met le plus de temps à charger comme vous voyez il prend 560 ms à lui seul et ce qu'on voit c'est qu'on a Facebook et on a environ 1, 2, 3, 4, 5 on a 5 requêtes à Facebook ce qui est quand même assez énorme et je pense que c'est simplement pour afficher un bouton like ou une page Facebook et ce qui est assez surprenant et c'est très certainement un code qui a été mal fait ou dupliqué et donc on se retrouve à devoir charger beaucoup d'éléments à faire plein de requêtes sur des serveurs extérieurs et qui prennent beaucoup de temps et qui ralentissent de façon très importante le site de temps que si on voit qu'il y a également 2 requêtes à Instagram donc ce qui fait quasiment 8 requêtes externes simplement pour certainement afficher un flux Facebook ou Instagram donc là il y a quand même pas mal de boulot juste pour réduire cela après je passe à GT Matrix quand je vous parlais des notes donc là j'ai lancé l'outil pour le citerliser et ce qu'on voit donc là il y a plein de notes il y a plein d'éléments qui sont pas bons du tout notamment optimiser les images donc ça c'est ce qu'on a vu surtout il y en a beaucoup trop et notamment le cache navigateur et ce qui est vraiment essentiel c'est d'analyser un minimum et de regarder en détail si vous avez vu dire ok il y a le cache navigateur il est pas bon je comprends pas moi j'ai un plugin de cache il est à zéro son plugin de cache il fonctionne pas il faut aller un petit peu plus loin que ça donc là c'est le détail j'ai simplement cliqué sur cache navigateur donc on voit qu'il y a toutes les requêtes donc tous les fichiers statiques qui sont listés du site de l'Elysée avec des expirations à 5 minutes donc c'est-à-dire que votre navigateur toutes les 5 minutes le fichier va disparaître de son cache et il va devoir le recharger ce qui est assez idiot pour des images puisque des images c'est pas censé changer donc il faut au minimum mettre un mois et c'est vraiment le strict minimum mais le plus important et c'est globalement un peu en dessous c'est vous voyez donc il y a tous les fichiers qui sont sur le serveur Elysée mais on a aussi toute une liste de fichiers qui sont pas sur le serveur de l'Elysée donc on a xvox.fr et on a Google Analytics et on a Twitter et on a Instagram et ça il faut bien comprendre que ça vous avez aucun contrôle là-dessus vous allez pouvoir mettre les bonnes règles d'expiration sur votre serveur sur les fichiers qui sont présents sur votre serveur donc en l'espèce Elysée.fr mais tous les fichiers qui sont sur xvox.fr Instagram, Facebook, Twitter etc vous avez aucun contrôle et donc même si vous mettez en place toutes les bonnes pratiques de votre côté vous aurez toujours une note qui n'est pas parfaite qui sera peut-être B parce que vous aurez une liste de fichiers vous aurez quelques fichiers qui sont tout simplement pas sur votre serveur et vous n'avez pas le contrôle dessus vous avez toujours des solutions là si vous voulez avoir quelque chose de parfait la solution serait de récupérer localement ces fichiers-là de les héberger et puis de mettre les bonnes expirations mais voilà le message en fait que je vais vous faire passer c'est aller un petit peu plus loin si vous regardez les résultats de votre site internet c'est aller plus loin que simplement le résultat c'est regarder les détails regarder qu'est-ce qui concerne votre site donc là c'est Elysée mais regardez aussi si vous n'avez pas de contrôle tant pis vous ne pourrez jamais le changer ou la seule solution c'est de ne pas avoir ces fichiers et la performance c'est aussi une question de compromis peut-être que la super page facebook de mon site internet ça n'a peut-être pas d'intérêt de l'afficher sur mon site internet parce que les gens ils n'aiment pas de plus le site peut-être que je pourrais l'enlever et puis grâce à ça mon site il chargerait plus vite et puis j'aurais peut-être plus de ventes j'aurais peut-être plus d'interactions sur mon site et puis in fine les gens ils auront plus de la page facebook d'une façon différente donc c'est aussi ça qui est important à comprendre sur la performance c'est que c'est aussi une question de compromis on ne peut pas tout avoir on ne peut pas avoir un site avec des milliards d'images avec plein d'interactions et puis qui charge de façon instantanée sur son mobile donc il faut bien aussi avoir cette idée-là et de faire attention un petit peu à ce qu'on veut et bien penser à ces utilisateurs c'est bien d'avoir plein d'interactions sur son site d'avoir des énormes images mais peut-être que l'utilisateur qui l'a envie en premier c'est que votre site s'affiche rapidement et puis qu'après il y a des solutions pour afficher de façon différente ces images c'est tout pour moi je crois qu'on doit avoir je suis bon sur le temps en plus j'avais pas répété et on doit avoir peut-être une ou deux minutes pour des questions à 10 minutes magnifique donc on a 10 minutes sur des questions si vous en avez sur la performance ou sur autre chose ce serait grand plaisir j'ai eu un souci hier sur un site qui a été très lent au chargement en plus de trois secondes et en cherchant fouillant un peu j'ai trouvé keep live ça te parle c'est un module qu'on peut rajouter normalement qui est présente sur le serveur mais qu'on peut rajouter qu'on peut rajouter dans le HT Access jamais que tu m'expliques si tu connais le fonctionnement j'ai pas compris ça date un peu j'ai pas étudié en fait en fait c'est des règles qu'on met dans le serveur si ma mémoire est bonne si il y a des experts là dessus grand plaisir si ils veulent répondre de mémoire c'est qu'on garde la connexion HTTP ouverte avec le serveur mais normalement ça doit pas ça doit pas générer de lenteur justement il faut les activer pour qu'on ait pas à refaire une connexion HTTP complète vers le serveur donc je suis un peu étonné que ce soit ah oui tout à fait donc ça c'est une configuration qui se met dans le HT Access après encore une fois non j'étais métriques ça il en parle tout à fait non j'étais métriques il y a une ligne qui concerne savoir si c'est bon si c'est opérationnel si c'est activé exactement donc ça oui il le conseille de le mettre après ça n'a pas des sur le coup c'est pas des changements énormes en termes de performance si ça fait gagner 20 millisecondes c'est déjà énorme alors oui je voulais vous laisser la question sur HTTP2 tu n'en as pas parlé et ça fait des années qu'on entend ça va venir est-ce que ça vient demain oui en fait je voulais en parler mais j'ai oublié c'était le lien par rapport à la concatenation des fichiers donc petit rappel donc en gros c'est quand vous avez plein de fichiers identiques d'une même même catégorie des fichiers CSS vous les groupez en un seul pour limiter le nombre de requêtes en fait HTTP2 et un nouveau protocole HTTP qui permet d'augmenter le nombre de requêtes en parallèle notamment il y a plein d'autres spécifications qu'un navigateur HTTP2 il est déjà disponible il est déjà en place sur plein de sites en fait le seul blocage il se fait à deux niveaux il se fait au niveau des serveurs web donc pour ça on en revient au base en fait il suffit simplement de mettre à jour son serveur web notamment je pense à njanix les dernières versions et puis je pense au moins 2 ans intègre le HTTP2 nativement et puis après ça va être les navigateurs je pense que s'il y a de l'internet explorer ils ne doivent pas trop comprendre pour les vieilles versions en tout cas mais le protocole est prêt il est disponible c'est simplement maintenant chacun de nous développeur utilisateur de mettre à jour ses outils en fait Bonjour j'avais une question sur est-ce que ces modules sont un peu comme des middleware autour du noyau du corps de framework de WordPress est-ce que vous avez déjà fait du profiling de code sur l'ensemble pour voir un peu comme Blackfyre ou ce genre de choses pour aller un peu plus sur ce point là non enfin en tout cas pour ce code là non mais effectivement ça c'est des trucs qui sont hyper intéressants à faire donc il y a un outil qui est très connu par les créateurs du framework symphony ils ont fait ça ça s'appelle Blackfyre en fait ça va profiler l'ensemble de votre code PHP et il va pouvoir vous permettre de trouver des bottlenecks dans le code de voir attention ce code là il prend 5 secondes à être exécuté et donc vous allez nous on l'a pas fait après effectivement si vous êtes un développeur plus avancé vous avez des problématiques comme tu peux avoir c'est un truc hyper recommandé pour comprendre aussi dans son code pourquoi il y a des problèmes bah c'est peut-être parce que notre connexion la base de données ou ce code spécifique cette boucle là elle est extrêmement lente et qu'on va pouvoir l'optimiser donc on va complètement l'utiliser après c'est quand même quelque chose d'assez avancé Bonjour dans l'exemple tu nous as montré sur le site de l'Elysée le poids de la page et tu nous montrais aussi la vitesse de chargement et finalement la vitesse de chargement elle était quand même assez rapide une seconde et quelques donc ça veut dire qu'il n'y a pas forcément un lien entre les deux ouais parce qu'en fait Pingdom ils utilisent des connexions fibrées et donc elles faisaient je ne sais plus quoi 13 méga et donc ils ont au moins du 100 méga habitent seconde donc techniquement elle va charger en une seconde pour eux après on n'a malheureusement pas tous des connexions comme ça notamment si donc là oui eux ils ont très peu d'impact sur le poids des pages mais après quand tu seras sur ton mobile que tu n'as pas la 4G ou que tu as de la DSL de la DSL à un méga ça prendra techniquement 13 secondes à charger à peu près donc c'est ça aussi il faut faire encore une fois c'est une question de bon sens on peut se dire être 13 méga c'est rien moi j'ai de la fibre chez moi mais tout le monde n'a pas la fibre je suis en mobilité dans le métro où j'ai connexion pas terrible donc c'est un ensemble est-ce que tu penses que ça serait intéressant de mettre en place un plugin qui permette de définir sur quelle page du site se charge les plugins en fait est-ce que l'impact serait assez élevé pour que le le développement de ce genre de solution soit intéressant en fait j'ai cru entendre parler que double éperroquette le ferait peut-être dans très longtemps il y a Gonzales qui fait ça je l'ai plus utilisé depuis longtemps mais c'est des solutions qui existent en fait je sais plus si il liste mais dans tous les cas tu vas pouvoir sélectionner sur quelle page les plugins charge ou non ce qui en soit est plutôt intéressant après ça va demander énormément de boulot pour te dire mon formulaire de contact il est sur cette page contact uniquement et puis un jour tu vas le mettre sur une autre page tu vas avoir oublié le plugin mais c'est un super truc notamment malheureusement il y a des plugins qui vont charger tous leurs fichiers sur toutes les pages idéalement il faudrait qu'il le fasse correctement mais à des fois c'est une bonne solution mais qui va demander du temps à mettre en place mais double éperroquette va le faire je sais pas il paraît ok merci je me permets d'intervenir sur ta question qui de base est des activés des plugins sur certaines pages c'est ça actuellement à ce niveau-là il y a une gratuite qui s'appelle plugin organizer qui va te permettre de faire ça par contre je te considérerais de choisir une autre solution et je vais donner un exemple pourquoi imaginons t'es sur une boutique et tu listes pas tes produits tu utilises ou commerce mais pour x raison t'as pas besoin de ou commerce sur ta page d'accueil donc tu décides de désactiver ou commerce le plugin complètement sur ta page d'accueil suffis que t'es un plugin un autre plugin qui utilise une fonction de ou commerce et ça va péter et l'alternative je vais te proposer c'est plutôt de trouver des solutions à l'aise qui permet de désactiver les fichiers CSS et ou JS en fonction de là où t'es en désactivant le fichier JS ou CSS t'es sûr que tu peux pas péter ton site parce qu'il va pas avoir un conflit d'un plugin que t'as désactivé et un autre plugin qui l'appelle utilise une fonction OK en fait il existe aussi des solutions pour désactiver les plugins en fonction des pages après tu peux le faire aussi quand tu développes ton plugin en fonction des pages tu peux conditionner l'ajout des JS et du CSS par contre ça dépend évidemment d'accord une dernière question merci pour ça j'avais trouvé WP conditionnel loading qui du coup définit enfin on peut choisir le chargement des scripts en fonction des pages mais ça demande de connaître bien en effet ce qui se charge ou pas mais j'avais voilà ça marchait bien bon bah on va s'arrêter là alors merci beaucoup merci Jean-Baptiste merci