Présentation welcom la webperf by object23

1. La Web Performance par 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. Adista…

4. NotRe oFFRE Object23 accélère votre transformation digitale en vous accompagnant de bout en bout dans vos projets digitaux.

5. uNE éQuIPE d’EXPERTS L’équipe Object23 est composée de profils variés et complémentaires pouvant répondre à toutes vos demandes

6. Nos technologies

7. PLAN 1. COMPRENDRE LA WEB 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. Comprendre la Web Performance

9. COMPRENDRE DU CODE SOURCE AU 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 LA WEBPERF Maximiser l’expérience utilisateur Réduire les coûts Faire la différence par rapport à la concurrence Améliorer son Google ranking

12. Web performance & e-Commerce

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

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 Plus d’histoires et de stats sur https://wpostats.com/ CONTEXTE DU E-COMMERCE

16. WEBPERF & E-COMMERCE LES TECHNOLOGIES : 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 LES 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

19. WEBPERF & E-COMMERCE LES TECHNOLOGIES : CACHE CACHE 1er rempart 2ème rempart 3ème rempart 4ème rempart

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

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 Page Speed Yslow W3C Navigation timing Speed Index

23. Web performance étude de cas

24. ETUDE DE CAS RÉSULTAT AUDIT

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

27. ETUDE DE CAS PRÉCONISATIONS Cadeau 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

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. Questions ?

Présentation welcom la webperf by object23

Vous êtes en train de lire un aperçu.

Consultez-les par la suite

Présentation welcom la webperf by object23

Plus De Contenu Connexe

Diaporamas pour vous (20)

Similaire à Présentation welcom la webperf by object23 (20)

Plus par Brigitte Marandon (20)

Plus récents (20)