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

Webperfs

  • 907
Loading comments...

More from Société Occitech