Embed Size (px)
Citation preview
La Web Performance par Adista
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]
Adista…
NotRe oFFRE
Object23 accélèrevotre transformation digitale en vous accompagnant de bout en bout dans vos projets digitaux.
uNE éQuIPE d’EXPERTSL’équipe Object23 est composée de profils variés et complémentaires
pouvant répondre à toutes vos demandes
Nos technologies
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
Comprendre la Web Performance
COMPRENDREDU CODE SOURCE AU RENDU UTILISATEUR
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 ?
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
Web performance & e-Commerce
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
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
WEBPERF & E-COMMERCE
Plus d’histoires et de stats sur https://wpostats.com/
CONTEXTE DU E-COMMERCE
WEBPERF & E-COMMERCELES TECHNOLOGIES : HTTP2
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
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
WEBPERF & E-COMMERCELES TECHNOLOGIES : CACHE CACHE
1er rempart 2ème rempart
3ème rempart
4ème rempart
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
WEBPERF & E-COMMERCE
- Mesurer- Identifier point de contention- Améliorer- Répéter
MISE EN ŒUVRE DE LA WEBPERF
WEBPERF & E-COMMERCEMESURER
Page Speed Yslow W3C Navigation timing Speed Index
Web performance étude de cas
ETUDE DE CASRÉSULTAT AUDIT
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
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
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
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
Questions ?
