Présentation welcom la webperf by object23
-
Upload
brigitte-marandon -
Category
Internet
-
view
93 -
download
3
Transcript of Présentation welcom la webperf by object23
![Page 1: Présentation welcom la webperf by object23](https://reader036.fdocuments.net/reader036/viewer/2022062503/58ea1c1d1a28abf9018b4681/html5/thumbnails/1.jpg)
La Web Performance par Adista
![Page 2: Présentation welcom la webperf by object23](https://reader036.fdocuments.net/reader036/viewer/2022062503/58ea1c1d1a28abf9018b4681/html5/thumbnails/2.jpg)
vos Intervenants
// www.adista.fr
// blog.object23.fr
// @object_23
Jérémy BESSonLeadDev
04 77 92 30 [email protected]
Olivier JanResponsable Offre Hébergement Web & OpenSource
04 28 07 06 [email protected]
JosselinFournierConsultant Digital
04 28 07 06 [email protected]
![Page 3: Présentation welcom la webperf by object23](https://reader036.fdocuments.net/reader036/viewer/2022062503/58ea1c1d1a28abf9018b4681/html5/thumbnails/3.jpg)
Adista…
![Page 4: Présentation welcom la webperf by object23](https://reader036.fdocuments.net/reader036/viewer/2022062503/58ea1c1d1a28abf9018b4681/html5/thumbnails/4.jpg)
NotRe oFFRE
Object23 accélèrevotre transformation digitale en vous accompagnant de bout en bout dans vos projets digitaux.
![Page 5: Présentation welcom la webperf by object23](https://reader036.fdocuments.net/reader036/viewer/2022062503/58ea1c1d1a28abf9018b4681/html5/thumbnails/5.jpg)
uNE éQuIPE d’EXPERTSL’équipe Object23 est composée de profils variés et complémentaires
pouvant répondre à toutes vos demandes
![Page 6: Présentation welcom la webperf by object23](https://reader036.fdocuments.net/reader036/viewer/2022062503/58ea1c1d1a28abf9018b4681/html5/thumbnails/6.jpg)
Nos technologies
![Page 7: Présentation welcom la webperf by object23](https://reader036.fdocuments.net/reader036/viewer/2022062503/58ea1c1d1a28abf9018b4681/html5/thumbnails/7.jpg)
PLAN1. COMPRENDRE LA WEB PERFORMANCE
1. Du code source au rendu utilisateur2. Qu’est ce que la Web Perf3. L’importance de la Web Perf
2. COMMENT POUR L’E-COMMERCE1. Le contexte du e-Commerce2. Les technologies3. Les bonnes pratiques4. Les étapes d’une stratégie de Web Perf
3. ETUDE DE CAS1. Résultat audit2. Préconisations3. Potentiel d’évolutions
![Page 8: Présentation welcom la webperf by object23](https://reader036.fdocuments.net/reader036/viewer/2022062503/58ea1c1d1a28abf9018b4681/html5/thumbnails/8.jpg)
Comprendre la Web Performance
![Page 9: Présentation welcom la webperf by object23](https://reader036.fdocuments.net/reader036/viewer/2022062503/58ea1c1d1a28abf9018b4681/html5/thumbnails/9.jpg)
COMPRENDREDU CODE SOURCE AU RENDU UTILISATEUR
![Page 10: Présentation welcom la webperf by object23](https://reader036.fdocuments.net/reader036/viewer/2022062503/58ea1c1d1a28abf9018b4681/html5/thumbnails/10.jpg)
COMPRENDRE
Ensemble de : - Méthodes- Bonnes pratiques- Technologies- Outils Permettant de maximiser l'expérience utilisateur d'un site web et de diminuer les ressources permettant de le produire.
C’est une culture, une attitude, une obsession …
QU’EST-CE QUE LA WEBPERF ?
![Page 11: Présentation welcom la webperf by object23](https://reader036.fdocuments.net/reader036/viewer/2022062503/58ea1c1d1a28abf9018b4681/html5/thumbnails/11.jpg)
COMPRENDREIMPORTANCE DE LA WEBPERF
Maximiser l’expérience utilisateur
Réduireles coûts
Faire la différence par rapport à la concurrence
Améliorer son Google ranking
![Page 12: Présentation welcom la webperf by object23](https://reader036.fdocuments.net/reader036/viewer/2022062503/58ea1c1d1a28abf9018b4681/html5/thumbnails/12.jpg)
Web performance & e-Commerce
![Page 13: Présentation welcom la webperf by object23](https://reader036.fdocuments.net/reader036/viewer/2022062503/58ea1c1d1a28abf9018b4681/html5/thumbnails/13.jpg)
WEBPERF & E-COMMERCE
Le temps, c’est de l’argent !
80 % de la web perf se joue au niveau Frontend
Site indisponible, peu performant ou non fonctionnel = perte de CA
CONTEXTE DU E-COMMERCE
![Page 14: Présentation welcom la webperf by object23](https://reader036.fdocuments.net/reader036/viewer/2022062503/58ea1c1d1a28abf9018b4681/html5/thumbnails/14.jpg)
WEBPERF & E-COMMERCE
Au-delà de 4 secondes de temps de chargement, c’est 25% d’utilisateurs qui sont déjà parti voir ailleurs.
CONTEXTE DU E-COMMERCE
![Page 15: Présentation welcom la webperf by object23](https://reader036.fdocuments.net/reader036/viewer/2022062503/58ea1c1d1a28abf9018b4681/html5/thumbnails/15.jpg)
WEBPERF & E-COMMERCE
Plus d’histoires et de stats sur https://wpostats.com/
CONTEXTE DU E-COMMERCE
![Page 16: Présentation welcom la webperf by object23](https://reader036.fdocuments.net/reader036/viewer/2022062503/58ea1c1d1a28abf9018b4681/html5/thumbnails/16.jpg)
WEBPERF & E-COMMERCELES TECHNOLOGIES : HTTP2
![Page 17: Présentation welcom la webperf by object23](https://reader036.fdocuments.net/reader036/viewer/2022062503/58ea1c1d1a28abf9018b4681/html5/thumbnails/17.jpg)
WEBPERF & E-COMMERCE
Source : http://www.httpvshttps.com/
HTTPS/2 : 1.012 sEn moyenne 86% plus rapideEt en bonus, un meilleur ranking dans Google
LES TECHNOLOGIES : HTTPS
Source : http://www.httpvshttps.com/
HTTP = 11.786 s
Conditions du test : 360 images, pas de cache côté serveur
![Page 18: Présentation welcom la webperf by object23](https://reader036.fdocuments.net/reader036/viewer/2022062503/58ea1c1d1a28abf9018b4681/html5/thumbnails/18.jpg)
WEBPERF & E-COMMERCELES TECHNOLOGIES : CACHE CACHE
Utiliser du cache pour ne solliciter les parties dynamiques uniquement quand nécessaire
- Cache navigateur- Cache serveur- Cache interpréteur- Cache bases de données
![Page 19: Présentation welcom la webperf by object23](https://reader036.fdocuments.net/reader036/viewer/2022062503/58ea1c1d1a28abf9018b4681/html5/thumbnails/19.jpg)
WEBPERF & E-COMMERCELES TECHNOLOGIES : CACHE CACHE
1er rempart 2ème rempart
3ème rempart
4ème rempart
![Page 20: Présentation welcom la webperf by object23](https://reader036.fdocuments.net/reader036/viewer/2022062503/58ea1c1d1a28abf9018b4681/html5/thumbnails/20.jpg)
WEBPERF & E-COMMERCE
Embarquer la « problématique » de la web performance le plus tôt possible et à tous les étages
- Utiliser les bons formats d’images (jpg, png, webp, gif)- Ne pas redimensionner une image dans le navigateur- Compresser tout ce qui est possible (HTML, CSS, JS) côté serveur- Favoriser et utiliser au mieux le cache du navigateur- Minimiser le nombre de requêtes (combiner JS CSS en un seul fichier)- Minimifier les JS, CSS, HTML- Pré-chargement de pages (en se basant sur le chemin habituel des internautes sur le site)- Optimiser le start render en chargeant le strict nécessaire- Optimiser le visually complete- Minimiser le reflow en maitrisant les modifications de DOM et CSSOM- Utiliser le GPU sur les éléments stratégiques
LES BONNES PRATIQUES
![Page 21: Présentation welcom la webperf by object23](https://reader036.fdocuments.net/reader036/viewer/2022062503/58ea1c1d1a28abf9018b4681/html5/thumbnails/21.jpg)
WEBPERF & E-COMMERCE
- Mesurer- Identifier point de contention- Améliorer- Répéter
MISE EN ŒUVRE DE LA WEBPERF
![Page 22: Présentation welcom la webperf by object23](https://reader036.fdocuments.net/reader036/viewer/2022062503/58ea1c1d1a28abf9018b4681/html5/thumbnails/22.jpg)
WEBPERF & E-COMMERCEMESURER
Page Speed Yslow W3C Navigation timing Speed Index
![Page 23: Présentation welcom la webperf by object23](https://reader036.fdocuments.net/reader036/viewer/2022062503/58ea1c1d1a28abf9018b4681/html5/thumbnails/23.jpg)
Web performance étude de cas
![Page 24: Présentation welcom la webperf by object23](https://reader036.fdocuments.net/reader036/viewer/2022062503/58ea1c1d1a28abf9018b4681/html5/thumbnails/24.jpg)
ETUDE DE CASRÉSULTAT AUDIT
![Page 25: Présentation welcom la webperf by object23](https://reader036.fdocuments.net/reader036/viewer/2022062503/58ea1c1d1a28abf9018b4681/html5/thumbnails/25.jpg)
ETUDE DE CAS
- Nombreuses redirections (47 au max sur sites testés)- Pas de concaténation CSS et JS- Pas de date d’expiration pour les fichiers médias- Fichiers JS chargés en synchrone dans la balise <head>- Des images redimensionnées dans le navigateur
RÉSULTAT AUDIT
![Page 26: Présentation welcom la webperf by object23](https://reader036.fdocuments.net/reader036/viewer/2022062503/58ea1c1d1a28abf9018b4681/html5/thumbnails/26.jpg)
ETUDE DE CASPRÉCONISATIONSLa ferme des animaux- Supprimer le doublon du slider en home (DOM)- Charger les scripts JS en bas de page (inline et chargement)- Spécifier les tailles d’image du slider- Remplacer addthis par un script local
Gain potentiel de 800ms sur le first paint
![Page 27: Présentation welcom la webperf by object23](https://reader036.fdocuments.net/reader036/viewer/2022062503/58ea1c1d1a28abf9018b4681/html5/thumbnails/27.jpg)
ETUDE DE CASPRÉCONISATIONSCadeau Maestro- Charger les scripts JS en bas de page et en différé- Retirer le CSS inutilisé dans la page (environ 70%)- Eliminer les préfixes CSS inutiles
Gain potentiel de 200ms-400ms
![Page 28: Présentation welcom la webperf by object23](https://reader036.fdocuments.net/reader036/viewer/2022062503/58ea1c1d1a28abf9018b4681/html5/thumbnails/28.jpg)
ETUDE DE CASPRÉCONISATIONSShopix- Charger les scripts JS en bas de page et en différé- Retirer le CSS inutilisé dans la page (environ 88%)- Eliminer les préfixes CSS inutiles- Remplacer addthis par un script local
Gain potentiel de 400ms-600ms
![Page 29: Présentation welcom la webperf by object23](https://reader036.fdocuments.net/reader036/viewer/2022062503/58ea1c1d1a28abf9018b4681/html5/thumbnails/29.jpg)
Questions ?