Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

Les 7 commandements pour réduire vos temps de chargement

Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité

Consultez-les par la suite

1 sur 54 Publicité

Les 7 commandements pour réduire vos temps de chargement

Télécharger pour lire hors ligne

Support de notre petit-déjeuner co-organisé avec notre partenaire Expertime Consulting sur le thème des temps de chargement. Retrouvez le contenu de notre présentation : nos stats webperf, nos tips et astuces pour vous permettre d'optimiser vos temps de chargement.

Support de notre petit-déjeuner co-organisé avec notre partenaire Expertime Consulting sur le thème des temps de chargement. Retrouvez le contenu de notre présentation : nos stats webperf, nos tips et astuces pour vous permettre d'optimiser vos temps de chargement.

Publicité
Publicité

Plus De Contenu Connexe

Diaporamas pour vous (20)

Similaire à Les 7 commandements pour réduire vos temps de chargement (20)

Publicité

Plus récents (20)

Les 7 commandements pour réduire vos temps de chargement

  1. 1. Johan GIBOSIXavier KOCKELBERGH Frédéric VAN CAUWENBERGE Lorenzo BLYWEERT SEO – Expérience Utilisateur - Conversion LES 7 COMMANDEMENTS POUR RÉDUIRE VOS TEMPS DE CHARGEMENT
  2. 2. NOTRE TERRAIN DE JEU B2C B2B Retail Services Food Industrie Etc. La digitalisation du commerce Finance
  3. 3. DOUBLE EXPERTISE POUR VOTRE COMMERCE CONNECTÉ Transformation e-Commerce Aligner stratégie, outils, et organisations Performance & Clients Conversion, CRM & E-marketing
  4. 4. CONVERSION : UN ACCOMPAGNEMENT DE A À Z Taggage Collecte de data Audit conversion AB testing Opti temps réponse Formation Coaching Management de transition
  5. 5. +13 Années d’expertise ABOUT US
  6. 6. TU SURVEILLERAS LES MÉTRIQUES TU CONNAÎTRAS L’IMPORTANCE DE LA MESURE TU T’ORGANISERAS CHAINE DE PUBLICATION PROJET & IT TU OPTIMISERAS TON TAG MANAGENEMENT LES 7 COMMANDEMENTS POUR RÉDUIRE VOS TEMPS DE CHARGEMENT BACK & FRONT : TU RESPECTERAS LES BEST PRACTICES
  7. 7. POURQUOI MESURER ? 53% des mobinautes abandonnent si le temps de chargement est supérieur à 3 sec. GOOGLE
  8. 8. POURQUOI MESURER ? CONVERSION -1 sec de chargement = - 10% de CA = - 13,6 milliards $ par an Pour Amazon +0,7 sec de chargement = +20% conversion
  9. 9. POURQUOI MESURER ? USER EXPERIENCE 7/10 internautes ne reviennent pas sur un site où ils ont eu des difficultés de navigation
  10. 10. POURQUOI MESURER ? Détection des régressions Identification d’optimisations Positionnement concurrence ‘’On ne peut améliorer que ce que l’on mesure ! ‘’ Stratégie d’entreprise SEO
  11. 11. L’écosystème digital Plateforme d’affiliation Tags d’affiliés Outils Marketing Tiers CDN Clients Robots POURQUOI MESURER ?
  12. 12. TU SURVEILLERAS LES MÉTRIQUES TU CONNAÎTRAS L’IMPORTANCE DE LA MESURE TU T’ORGANISERAS CHAINE DE PUBLICATION PROJET & IT TU OPTIMISERAS TON TAG MANAGENEMENT LES 7 COMMANDEMENTS POUR RÉDUIRE VOS TEMPS DE CHARGEMENT BACK & FRONT : TU RESPECTERAS LES BEST PRACTICES
  13. 13. LES MÉTRIQUES A SURVEILLER Temps techniques Temps total (tiers) PERFORMANCES ELEMENTS PAGES INDICATEURS WEBPERF
  14. 14. PERFORMANCES Temps DNS Temps de connexion Temps d'obtention du 1er octet Temps de chargement HTML Temps de chargement des éléments pages
  15. 15. LES GRANDES ÉTAPES TECHNIQUES DU CHARGEMENT StartToRender Délai avant l’affichage d’un premier élément sur la page Important pour le visiteur : c’est un élément de réassurance, l’utilisateur voit la page se charger Important pour le SEO également : pogosticking (allers- retours dans les SERP) Fullyloaded Chargement complet de la page ainsi que des ressources asynchrones (JS partenaires par exemple) Visuallycomplete Délai avant le chargement complet de la partie au- dessus de la ligne de flottaison TimetoFirstByte Délai avant réception du début de la réponse HTML Recommandation Google : < 200 ms DNS Connexion réseau Traitement serveur
  16. 16. LES MÉTRIQUES A SURVEILLER PERFORMANCES ELEMENTS PAGES INDICATEURS WEBPERF Poids de page Nombre d’éléments
  17. 17. POIDS DE PAGE & NOMBRE D’ÉLÉMENTS 70% des éléments présents sur vos pages proviennent de tiers 88% des temps de chargement de vos pages proviennent de tiers
  18. 18. LES MÉTRIQUES A SURVEILLER PERFORMANCES ELEMENTS PAGES INDICATEURS WEBPERF Apdex Temps ressenti utilisateur Speed Index
  19. 19. EXPÉRIENCE UTILISATEUR
  20. 20. EXPÉRIENCE UTILISATEUR 0s 4s1s 2s 3s A B0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100% 0s 1s 2s 3s 4s progressionduchargement(en%) Speed Index page A page B
  21. 21. EXPÉRIENCE UTILISATEUR Un Bon Speed Index Compris entre 1000 & 2000 sur Desktop Compris entre 2000 & 3000 sur Mobile
  22. 22. TIP #1 : LAZYLOAD & LIGNE DE FLOTTAISON Les images représentent souvent une partie importante du poids d’une page - Le lazyload permet de retarder le chargement des images, jusqu’à ce qu’elle apparaissent sur l’écran du visiteur (au scroll) - Seules les images utiles sont chargées, au bon moment
  23. 23. EXPÉRIENCE UTILISATEUR Apdex= 60x1pt + 30x0,5pt +10x0 100 internautes au total Frustrante > 12sec Score : 0 pt Tolérable > 3sec & < 12sec Score : 0,5 pt Satisfaisante < 3sec Score : 1 pt Votre score Apdex est de 0,85/1
  24. 24. CAS D’UN PARCOURS Objectifs - Achat - Espace personnel - Souscription - .... 3 sec Chargement. Ne pas excéder au risque de dégrader l’expérience des internautes - 80/20 - Micro-conversion - Étape anxiogène Pourquoi un parcours ?
  25. 25. CAS D’UN PARCOURS Etude menée par Netvigie de Janvier à Juillet 2017, sur 50 sites e-commerce Français et internationaux)
  26. 26. Indicateurs webperf PIMKIE: NOS MÉTRIQUES - 3 indicateurs pour un suivi mensuel - Un rythme de relevé basé sur notre fréquence de TMA
  27. 27. PIMKIE: QUELQUES OPTIMISATIONS - Identification de l’inefficacité de certains éléments/blocs, - Prise de décision: les supprimer. Une HP revue Objectifs - Remonter la ligne de flottaison - Optimiser les temps de chargement 30% Gain de performances DOM
  28. 28. PIMKIE: QUELQUES OPTIMISATIONS Révision du panier Objectifs Modification d’une fonctionnalité coûteuse en temps de calcul.
  29. 29. PIMKIE: QUELQUES OPTIMISATIONS 75 pts Gain de score Speed Index 238ms ►101ms : 57,6% gain de perf Révision du panier Objectifs Modification d’une fonctionnalité coûteuse en temps de calcul.
  30. 30. CONTEXTE DE NAVIGATION 55% e-commerçants Frc. vendent à l’international 90% des internautes ont une approche cross device
  31. 31. LE MOBILE Depuis Septembre 2017 50% des recherches sur Google en France se font sur mobile MOBILE MOMENT
  32. 32. LE MOBILE 8/10 mobinautes se disent gênés par les temps de chargement sur mobile PERFORMANCES 8,8sec le temps de chargement moyen d’une page sur mobile en France
  33. 33. LE MOBILE - HTML ultra léger - Affichage instantané de la page AMP (Accelerated Mobile Pages) Permet de diviser les temps de chargement par 2 PWA (Progressive Web App) - Temps de chargement réduit - Ergonomique et accessible hors connexion - Moins contraignant que le développement d’une app - SEO friendly : indexation
  34. 34. TU SURVEILLERAS LES MÉTRIQUES TU CONNAÎTRAS L’IMPORTANCE DE LA MESURE TU T’ORGANISERAS CHAINE DE PUBLICATION PROJET & IT TU OPTIMISERAS TON TAG MANAGENEMENT LES 7 COMMANDEMENTS POUR RÉDUIRE VOS TEMPS DE CHARGEMENT BACK & FRONT : TU RESPECTERAS LES BEST PRACTICES
  35. 35. COMMENT S’ORGANISER ? ‘’Impossible de faire porter le problème à un seul acteur ‘’
  36. 36. 50% Business 50% Technique (dev, infra) COMMENT S’ORGANISER ? ‘’Souvent, les torts sont partagés ‘’
  37. 37. RESPONSE TIME ‘’Il faut aborder le problème globalement ‘’ COMMENT S’ORGANISER ?
  38. 38. COMMENT S’ORGANISER ? ‘’Et le résoudre durablement ‘’
  39. 39. ‘’Nommer votre Responsable Temps de réponse ‘’ COMMENT S’ORGANISER ? La responsabilité du temps de réponse doit être portée par une seule personne (mais partagée à tous) Analogie : Juriste ou Expert SEO qui ont une expertise et qui la partagent en interne.
  40. 40. ‘’Nommer votre Responsable Temps de réponse ‘’ COMMENT S’ORGANISER ? Ses missions : - Définition et choix des outils de mesure - Définition des KPIs et suivi - Cadrage amont des projets - Diffuser la culture temps de réponse
  41. 41. TU SURVEILLERAS LES MÉTRIQUES TU CONNAÎTRAS L’IMPORTANCE DE LA MESURE TU T’ORGANISERAS CHAINE DE PUBLICATION PROJET & IT TU OPTIMISERAS TON TAG MANAGENEMENT LES 7 COMMANDEMENTS POUR RÉDUIRE VOS TEMPS DE CHARGEMENT BACK & FRONT : TU RESPECTERAS LES BEST PRACTICES
  42. 42. Photographe Custom Plateforme e-commerce Front web Résolutions web standard : 72 DPI Ecran retina : Mini : 144 DPI Compression avancée en JPG, PNG. Des tailles différentes en fonction des devices et avec les écrans HD et Retina. OPTIMISE LA CHAINE DE PUBLICATION DES IMAGES ‘’1) La chaine de publication de votre catalogue produits ‘’
  43. 43. Avec l’animation commerciale, de nombreux éléments changent dans votre page -> Mais peuvent augmenter sensiblement votre temps de réponse. Pub / Adserving Slider Push Produits Bannières 1) Création d’une charte de compression des images : Formats / Tailles / Poids maximum Et ajout dans les briefs graphiques. 2) Limiter le nombre d’image nécessaires à votre business -> Valider les bons emplacements avec votre webanalytics et des cartes de chaleur. Bonnes pratiques : OPTIMISE LA CHAINE DE PUBLICATION DES IMAGES ‘’2) La chaine de publication de l’animation de votre site ‘’
  44. 44. TU SURVEILLERAS LES MÉTRIQUES TU CONNAÎTRAS L’IMPORTANCE DE LA MESURE TU T’ORGANISERAS CHAINE DE PUBLICATION PROJET & IT TU OPTIMISERAS TON TAG MANAGENEMENT LES 7 COMMANDEMENTS POUR RÉDUIRE VOS TEMPS DE CHARGEMENT BACK & FRONT : TU RESPECTERAS LES BEST PRACTICES
  45. 45. UTILISATEUR Device Réseau BACK Réseau Cache Configuration FRONT HTML CSS JavaScript Médias TEMPS DE REPONSE L’IMPONDERABLE L’OPTIMISABLE UN TEMPS DE RÉPONSE PAS TOUJOURS MAITRISABLE
  46. 46. LES ACTEURS DU TEMPS DE RÉPONSE Utilisateur Device (problèmes de performances, mauvaise utilisation, perception de lenteur) Réseau (Type de connexion, perturbations réseau…) Back Performances (Utilisation CPU…) Réseau (HTTP/2, congestion…) Cache (trop court, désactivé, non spécifié…) Bases de données Firewalls Front HTML CSS JS (site, frameworks, partenaires…) Médias (images, vidéos…) Requêtes Réponses Requêtes Réponses
  47. 47. BACK: QUELQUES PISTES D’OPTIMISATIONS TECHNIQUES Cache Redirections ConfigHTTP/2 Trop courtCache Non spécifié Firewall SécuritéMIME TraficMonitoring Pics
  48. 48. FRONT: QUELQUES PISTES D’OPTIMISATIONS TECHNIQUES Templating mobile HTMLQualité du DOM QualitéCSS Minification Concaténation Minification Concaténation JSQualité Compression des images Lazyload Médias CDN
  49. 49. TIP #2 : INTÉGRER UNE VIDÉO YOUTUBE Bonne pratique : charger le lecteur vidéo de Youtube « à la demande » et non pas au chargement de la page - Le lecteur vidéo « embedded » alourdit la page de 500+ kB - L’astuce consiste à afficher un aperçu au format image de la vidéo, et charger le lecteur Youtube uniquement au clic : 1. En mode pop-in 2. En remplacement de l’aperçu de la vidéo
  50. 50. TU SURVEILLERAS LES MÉTRIQUES TU CONNAÎTRAS L’IMPORTANCE DE LA MESURE TU T’ORGANISERAS CHAINE DE PUBLICATION PROJET & IT TU OPTIMISERAS TON TAG MANAGENEMENT LES 7 COMMANDEMENTS POUR RÉDUIRE VOS TEMPS DE CHARGEMENT BACK & FRONT : TU RESPECTERAS LES BEST PRACTICES
  51. 51. OPTIMISER SON TAG MANAGEMENT
  52. 52. OPTIMISER SON TAG MANAGEMENT Waterfall de fnac.com Représentation du chargement des éléments Même s’ils sont chargés à la fin, Les tags doivent quand même se charger chez l’internaute. (et ralentissent le chargement) Tag externe
  53. 53. 1) TAG ASYNCHONE : Il commence à se charger dès que la page est chargée dans le navigateur. 2) TIMEOUT : Durée maximale pendant laquelle le tag peut se charger. 3) LE BON TAG : Demander systématiquement aux partenaires le tag le plus léger. 4) FAIRE DU TRI : Retirer systématiquement le tag quand le partenaire est inactif. Bonnes pratiques OPTIMISER SON TAG MANAGEMENT
  54. 54. Des questions ? Merci pour votre attention !Xavier KOCKELBERGH xavierk@netvigie.com Johan GIBOSI Frédéric VAN CAUWENBERGE fvancauwenberge@expertime.com Lorenzo BLYWEERT lblyweert@expertime.com

×