Télécharger pour lire hors ligne
Téléchargé parBrigitte Marandon
Présentation welcom la webperf by object23
Le document traite de la web performance et de son importance cruciale pour l'e-commerce, en soulignant que 80 % des problèmes de performance se situent au niveau frontend. Il fournit des recommandations pratiques pour optimiser la performance des sites web, telles que l'utilisation appropriée des formats d'images, le caching, et la minimisation des requêtes. Enfin, il présente des études de cas démontrant les gains potentiels en performance à travers des audits et des préconisations spécifiques.
Contenu connexe
Similaire à Présentation welcom la webperf by object23
Présentation welcom la webperf by object23
- 1. La Web Performancepar Adista
- 2. vos Intervenants // www.adista.fr //blog.object23.fr // Facebook // @object_23 Jérémy BESSon LeadDev 04 77 92 30 51 jbesson@adista.fr Olivier Jan Responsable Offre Hébergement Web & OpenSource 04 28 07 06 25 ojan@adista.fr Josselin Fournier Consultant Digital 04 28 07 06 21 jfournier@adista.fr
- 3.
- 4. NotRe oFFRE Object23 accélère votretransformation digitale en vous accompagnant de bout en bout dans vos projets digitaux.
- 5. uNE éQuIPE d’EXPERTS L’équipeObject23 est composée de profils variés et complémentaires pouvant répondre à toutes vos demandes
- 6.
- 7. PLAN 1. COMPRENDRE LAWEB PERFORMANCE 1. Du code source au rendu utilisateur 2. Qu’est ce que la Web Perf 3. L’importance de la Web Perf 2. COMMENT POUR L’E-COMMERCE 1. Le contexte du e-Commerce 2. Les technologies 3. Les bonnes pratiques 4. Les étapes d’une stratégie de Web Perf 3. ETUDE DE CAS 1. Résultat audit 2. Préconisations 3. Potentiel d’évolutions
- 8.
- 9. COMPRENDRE DU CODE SOURCEAU RENDU UTILISATEUR
- 10. 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 ?
- 11. COMPRENDRE IMPORTANCE DE LAWEBPERF Maximiser l’expérience utilisateur Réduire les coûts Faire la différence par rapport à la concurrence Améliorer son Google ranking
- 12.
- 13. WEBPERF & E-COMMERCE Letemps, 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
- 14. 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
- 15. WEBPERF & E-COMMERCE Plusd’histoires et de stats sur https://wpostats.com/ CONTEXTE DU E-COMMERCE
- 16. WEBPERF & E-COMMERCE LESTECHNOLOGIES : HTTP2
- 17. WEBPERF & E-COMMERCE Source: http://www.httpvshttps.com/ HTTPS/2 : 1.012 s En moyenne 86% plus rapide Et 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
- 18. WEBPERF & E-COMMERCE LESTECHNOLOGIES : 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
- 19. WEBPERF & E-COMMERCE LESTECHNOLOGIES : CACHE CACHE 1er rempart 2ème rempart 3ème rempart 4ème rempart
- 20. WEBPERF & E-COMMERCE Embarquerla « 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
- 21. WEBPERF & E-COMMERCE -Mesurer - Identifier point de contention - Améliorer - Répéter MISE EN ŒUVRE DE LA WEBPERF
- 22. WEBPERF & E-COMMERCE MESURER PageSpeed Yslow W3C Navigation timing Speed Index
- 23.
- 24.
- 25. 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
- 26. ETUDE DE CAS PRÉCONISATIONS Laferme 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
- 27. ETUDE DE CAS PRÉCONISATIONS CadeauMaestro - 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
- 28. ETUDE DE CAS PRÉCONISATIONS Shopix -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
- 29.