Webperformance : Soyez rapides ou changez de Job. Slide du Digital Apero Silicon Comte du 9 mars 2019. Animé par Nicolas Guillaume - Netalis.

1. SOYEZ RAPIDES.
OU CHANGEZ DE JOB.

2. COUCOU C’EST NOUS (Netalis) : Opérateur & Hébergeur
● Société (SAS) fondée par une équipe de spécialistes des
infrastructures THD et services Internet (+10 ans d’expérience)
● Proximité : Siège social en région, à Besançon
● Équipe à taille humaine, support technique de proximité
● Spécialité : TPE, PME, ETI et collectivités locales
● Plateforme technique (Data Center) à Besançon et Paris : Vos
données transitent et restent en France
www.netalis.fr

3. Constat : ça rame !
● En 20 ans : on passe
de 56 kbps à 1G (!) en
FttH
● On passe de la 2G à
la 5G
● L’utilisateur est
impatient nativement
● Il faut délivrer (très)
vite les
contenus/services

4. Pourquoi ça rame ?
● Vieux matériels
● Vieux OS pas mis à
jour
● Vieux navigateurs
web
● LAN : CPL, WiFi …
● Débit connexion
● DNS FAI trop lent
● Peering saturé…
● Code pourri
● Hébergeur low cost...

5. LA #WEBPERF
● Sur le web, la
performance doit être la
clé de la réussite d’une
stratégie
● Un développeur qui
omet de rendre une app
réactive et rapide :
changez de job !
Source : https://blog.clever-age.com/fr/2012/07/31/webperf-a-
quelle-vitesse-ma-page-se-charge-t-elle/

6. Le SEO c’est has been : La WebPerf est LE point critique
● 100 ms de perdues = 1% de CA en moins (Amazon)
● 57% des visiteurs quittent un site e-commerce s’il met plus
de 4 secondes à s'afficher
● 26% des visiteurs quittent un site e-commerce s’il met plus
de 2 secondes à s'afficher
● 60% des mobinautes s'attendent à un chargement de 3s
maximum pour un site mobile...
● Et 74% quittent une page après 5 secondes d'attente

7. C’est Google qui le dit…

8. Mobile first : C’est pas gagné…
● Poids du mobile croissant sur les sites : pensez au responsive… et
ses conséquences sur la performance du site en mobilité !
● Taux de transformation sur le mobile fortement impacté par de
mauvais temps de réponse : Connexion 3G/4G pas toujours bonne
● Google Speed Update : « Si t’es pas rapide, tu grimpes pas »
● Web App ou Native app : that is the question ! (mais le besoin de
perf reste le même)

9. Transformez-vous en utilisateur final (aka Mme Michu)
● Passer d’une vision performance
infrastructure « IT » à une vision
performance vue du Client (marketing)
● Si vous n’avez pas de mesure de la
performance vue du client de bout en
bout sur le mobile et sur le Desktop :
FAUTE (et corrigez ça grâce au Real
User Monitoring)

10. C’est la cata sur le taux de rebond

11. La WebPerf : mix d’IT et de marketing web
• Des objectifs de perf partagés par le métier et l’IT, le
marketing, la créa… : Amélioration de plusieurs secondes
du temps d’affichage partout (web, mobile)
• S’adosser à un partenaire expert pour toutes les actions
possibles à externaliser
• Travailler plus en profondeur le code pour aller chercher
des améliorations supplémentaires

12. La WebPerf : C’est aussi pour l’artistique
● Utilisez des outils de monitoring pour avoir une vision
identique à celle du Client (Dynatrace, Dareboost…)
● Le travail de la webperf est un travail qui doit se faire
main dans la main avec les créatifs : UX/UI, suivi des
temps de réponses des partenaires sur le site
(webpagetest)

13. Les termes essentiels de la WebPerf
● TTFB (Time to First Byte)
● Start Render
● Speed Index
● First Interactive
● Backend
● CDN
● FEO
● …

14. Les métriques techniques à surveiller
● Temps de réponse serveur
● TTFB
● DomContentLoaded (=
DomReady)
● Onload
Waterfall WebPageTest.org

15. Métriques UX à surveiller
• Start Render
• Speed Index
• First ContentFul Paint
• First Interactive
• Visually Complete

16. Attention aux outils tiers !
• Publicités
• Scripts tiers
(analytics, etc)

17. Faites chauffer le cache (et pas le ca$h)
Un seul but : répondre plus vite et au plus près de l’internaute
● Cache local
○ plusieurs types : Block / FullPage / APC / HTTP
○ protège et soulage les backends
● CDN (Réseau de distribution de contenus) : Cache distribué
○ Ne répond pas à toutes les situations
○ tout n’est pas cachable (mais ESI/Ajax)
● Le monde est vaste et les latences réseaux peuvent être importantes : optez pour le multi-CDN avec
un bon aiguilleur de trafic (Cedexis) !

18. La WebPerf, c’est la micro-chirurgie du web
Source : Fasterize

19. WebPerf : Une attention particulière pour…
● Améliorer les temps de chargement
○ taux de transfo, SEO, nb de pages vues / visites
● Absorber les pics de charge
○ Soldes, passage TV, ventes privées
● Mise en place de CDN / multi-CDN
○ Internationalisation
○ Gérer les pays compliqués : Asie, Brésil, Turquie, Russie, Inde

20. On résume ?
● Développer et tester en continu : La préprod est indispensable avec un
environnement stable
● Héberger avec des serveurs web modernes et des applicatifs optimisés
(Nginx, etc) : pensez au Cloud (IaaS) pour gérer les pics de charge
● Mettre en place une stratégie FEO automatisée
● Réaliser des tests de montée en charge AVANT de passer en prod
● Utiliser un ou plusieurs caches / CDN pour délivrer le contenu au plus
proche de l’utilisateur en soulageant la plateforme d’origine (hébergeur)

21. Quelques conseils en plus…
● Même si le FEO est automatisé, toujours suivre et traiter le sujet en
permanence avec des outils spécialisés et agir de suite en cas de
dégradation du temps de chargement !
● La performance est un sujet de tous les jours, et nécessite un suivi
régulier, des optimisations et une prise en compte dès la conception
des contraintes techniques

22. Les outils indispensables
● Testez : www.webpagetest.org
● Testez (bis) : www.dareboost.com
● Tout péter : www.cloudnetcare.com
● Monitorez : New Relic, Cedexis Radar, Witbe,…
● Accélérez : Fasterize, Cloudflare, Cedexis…

23. Merci de votre attention !