Société Occitech
Ingénierie web : applications web sur mesure, Magento.
Webperfs
Pourquoi ?
Comment ?
# 35 le 07/12/2015 chez
Etienne ZULAUF
@occitech et @MrZoule
www.occitech.fr
Déroulement
Pourquoi ? - 10'
Quels leviers ? - 20'
Exemples - 10'
Discussion - 10'
Les outils - 10'
Pourquoi ?
En avril 2010, Google annonce que la vitesse d'un site est un nouveau "signal".
Taux de rebond
Taux de conversion
Panier moyen
Expérience utilisateur
Réduction des coûts
Business
Taux de rebond
Un site qui se charge en plus de 5 secondes a un taux de rebond 2 fois plus élevé qu'un site qui se charge en 1 seconde.
Taux de Conversion
1 seule seconde de chargement en trop peut coûter jusqu'à 7% du taux de conversion.
Taux d'abandon du panier
20% des utilisateurs abandonnent leur panier à cause du temps de chargement. Parmi les acheteurs en ligne, 67% déclarent la lenteur du site comme étant la raison principale d'abandon du panier.
Panier moyen
Un site qui a divisé son temps de chargement par 2 voit son panier moyen augmenter de 11%.
UX
Fidélité
60% des internautes quittent un site pour un concurrent lorsque le temps de chargement est supérieur à 5 secondes. 88% des internautes ne reviennent pas sur un site jugé trop lent.
Mobilité
85% des internautes s'attendent à un chargement aussi rapide voire plus rapide sur mobile que sur un site classique.
Réduction des coûts
Réduire les coûts Google Adwords
Le coût d'une campagne est impacté par le temps de chargement de la page ciblée puisque Google utilise le temps de chargement dans le calcul du score de qualité.
Hébergement/Infrastructure
Shopzilla a réduit de moitié ses coûts d'infrastructure en diminuant de 5 secondes le temps de chargement moyen de ses pages.
Comment ?
Serveur
Internet
Navigateur
Infrastructure
Le discount n'est pas la norme ! Hostez !
Optimisez les en-têtes HTTP pour caches navigateur
modules Full Page Cache ou sites statiques
Varnish (proxy)
Versions récentes de ses outils
Requêtes et moteurs SQL optimisés
NoSQL pour les recherches
Indicateur : TTFB < 0,5s
HTTP2 /!\
Internet
CDN
Pas beaucoup de leviers, mais il faut penser au 3G "1 barre" et surtout aux internautes en ADSL 512 Ko voire 56 Ko !
CDN++
ex : imgix.com
Interprétation
L’essentiel se passe sur l'intégration !
Le piège du Responsive Web Design
Objectifs : chasse au poids et fluidité pour le navigateur
Nb requêtes : Minifier et compresser les assets
Optimiser ses images : nombre, taille, compression,
lazy loading
Respect W3C, optimiser appels webfonts
Différer le chargement des Javascript
Ne pas envoyer de cookies pour les assets
Intégration "Mobile First"
Indicateur : page utilisable < 5s
Limitez l'utilisation des widgets et contenus de tiers
Frameworks JS frontaux
Sprites, images en base64
Les outils
1° Utilisez la console développeurs
F12
2° Utilisez les outils dédiés
Google PageSpeed Insights
sitespeed.io
(avec intégration continue)
https://checklists.opquast.com/webperf/
gtmetrix
webpagetest
Dareboost
Yslow
3° Fixez-vous un objectif
Chaque outil va vous proposer un score global.
Choisissez un outil et fixez-vous un objectif de score atteignable.
C'est un bon point de départ que de fixer un "budget webperfs".
4° Monitoring
Les alertes permettent de :
- sensibiliser les clients
- maintenir le niveau dans le temps
- (Surveiller l'hébergement)
Exemples
Merci !
(Discussions)
Retrouvez les slides sur
https://slides.com/occitech/webperfs/
Webperfs
By Société Occitech
