1.
Améliorer
les performances
de vos sites
web
Une priorité pour 2018
Améliorer
les performances
de vos sites
web
Une priorité
pour 2018

2.
Sommaire
1) La performance au cœur de votre stratégie
2) Optimiser votre version desktop
3) Optimiser votre version mobile
4) Choix techno : PWA et AMP
5) Protocole HTTP2
6) La certification pour vous
2

3.
Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics
Performance,
chaque seconde compte
« Surtout en mobile »

4.
http://www.kpcb.com/internet-trends
3 utilisateurs sur 4 sont des
mobinautes
dans le monde

5.
Evolution

6.
L’utilisation dans la journée

7.
le mobile comme point de départ
Parcours Multiscreen
65%
Commencent
sur un
smartphone
61%
Continuent sur
un ordinateur
4%
Continuent sur
une Tablette
DECISIONCONSIDERATIONAWARENESS INTENT
SMARTPHONE
S
DESKTOPS /
TABLETTES

8.
Les indicateurs négatifs de la web performance
8
Des utilisateurs s’attendent à un site qui se charge
en moins de 2 secondes
Des utilisateurs quittent un site au-delà de 3 secondes
Des utilisateurs sont gênés par les performances
Considèrent qu’un site rapide assure leur fidélité
Seconde supplémentaire (après 3 secondes d’attente)
fait perdre 16% des clients.
47%
40%
79%
52%
1
Source: http://www.fasterize.com

9.
LES KPIs de Référence
Speed index:
Poids de la page:
Nombre de requêtes
9
< 200 ms
< 1 second
1000
< 4 seconds
D 2.3 Mo
M 0,80 Mo
85 in average
500 ms
Time to First Byte
Tps chargement HTML
Début d’affichage
Temps de chargement:

10.
Time To First Byte
10
Outil pour tester le TTFB  http://www.bytecheck.com/

11.
Time To First Byte
11
Dareboost propose une vision « scenario » plutôt sympa

12.
Speed Index
12
Le Speed Index est l’indicateur UX qui calcule le délai moyen d’affichage au-dessus de la ligne
de flottaison et la progressivité de l’affichage
Speed Index: 3082

13.
Temps de chargement HTML
13
Temps de téléchargement HTML (du code source) :
on ne compte pas les appels aux images, JS, CSS, Tag, Ads,…

14.
Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics
Améliorer la performance
Desktop & Mobile

15.
Les optimisations classiques
Les images sont régulièrement trop lourdes. Vous pouvez:
Réduire leur poids sans perdre la qualité https://imagify.io
Les compresser
Héberger vos images sur un sous-domaine différent http://image.domaine.com
Utiliser le lazy loading
Eviter de compresser le format PNG
Utiliser les sprites CSS pour les images récurrentes sur vos templates (pictos, logos)
Pour une même image, l'appeler avec un format plus léger en mobile qu’en desktop
Les images

16.
Les optimisations classiques
Ces fichiers sont une cause d’un lent chargement visuel de la page:
Regrouper vos fichiers CSS et JS en quelques fichiers
Minifier vos fichiers https://www.minifier.org/
Compresser vos fichiers
Utiliser un sous-domaine dédié pour ces ressources http://static.domaine.com
Utiliser des méthodes asynchrones ou Deferred
 qui charge ce qui est visible pour l’internaute
Rallonger le cache serveur de ces ressources qui évoluent rarement
Optimiser votre cache navigateur pour éviter les purges inutiles
Traiter vos fichiers CSS et JS

17.
Les optimisations classiques
Votre code source: au-delà de 1000 lignes, attention !
Un code optimisé est un code bien indenté et sans caractères inutiles en fin de lignes.
Ce qu’il faut retenir : 1 caractère ASCII = 7 bits = 1 octet
Soit : 1 espace = 7 bits = 1 octet
: 1 tabulation = 7 bits = 1 octet
: 1 retour à la ligne = 7 bits = 1 octet

18.
Le Parser - Tolérance 0
Si on compare le code source de cette page avant/après la suppression des lignes vides
18
234 ko 88 ko
- 69% du
poids total
Sur cette page qui faisait à la base 10825 lignes, nous en avons supprimé 8670 qui étaient vides,
soit 149,1 Ko supprimées de cette page

19.
Les optimisations plus « compliquées »
Quand on vous parle de cache, vous devez savoir de quoi on parle:
Cache serveur
Cache navigateur
Cache du CMS
Cache Varnish
Cache AKAMAI
Reverse proxy
Load Balancing
CDN
… 19
Le cache: Ce que vous devez savoir!
ARHHHH

20.
S'il y a une chose à retenir
20
Qu’est-ce que le cache?

21.
S’il y a une chose à retenir
Exemple client sur la durée du cache
 15 minutes pour les « listes produit »
 20 minutes pour les « fiches produit »
 1 fois par jour pour la « home »
 Tous les 7 jours pour les « images, css, JS,… »
21
Avoir du cache ne veut rien dire
Pourquoi un cache si court?
Comment est régénéré le cache?

22.
S'il y a une chose à retenir
Nous avons 3 leviers pour rendre le système plus efficace :
 La fréquence de rafraîchissement :
A-t-on besoin de régénérer le cache de toutes mes pages
 Les éléments à cacher dans la page :
Certains éléments de la page ne bougent jamais : le Header ou le footer par
exemple
 La création du cache : Où/qui génère le cache de la page ?
Côté serveur ou côté client?
22
Gérer la durée du cache

23.
Obligatoire pour Google
En octobre 2017, Google va encore plus loin en
signalant les sites non sécurisés dans son
navigateur Chrome.
Le passage au HTTPS est fortement recommandé
pour éviter de perdre la confiance des
internautes.
Plus de 30% des sites en 1re page de résultats
Google sont maintenant en HTTPS
contre 5% en 2014.
Source : Moz
Non sécurisé ou
Dangereux
Informations ou
non sécurisé
Sécurisé

24.
Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics
PWAMPPWA + AMP

25.
Site mobile + APP
Le Progressive Web App s’indexe comme un site mobile et s’utilise comme une App
Les avantages
Temps de chargement rapide et fonctionne hors connexion
Responsive et ergonomique
Fonctions Application: push, alerte…
Occupe très peu d’espace sur le téléphone et pas de mise à jour
SEO Friendly
APP Mobile

26.
Le SEO des PWA
Les avantages SEO pour des formats PWA:
• Fournir des URL propres
• Spécifiez les URL canoniques
• Conception pour plusieurs appareils
• Développer en itération
• Utilisez Progressive Enhancement
• Teste avec la Search Console
• Annoter avec les données structurées Schema.org
• Testez avec plusieurs navigateurs
• Mesurer la performance de la charge de page
https://webmasters.googleblog.com/2016/11/building-indexable-progressive-web-apps.html

27.
PWA chez Lancôme
Lancôme a d’ailleurs partagé ses résultats prometteurs sur le lancement de sa version PWA
•Baisse de 84% du temps de chargement
•Augmentation de 17% du taux de conversion
•Diminution du taux de rebond de 15%
•18% de taux d’ouverture des notifications
•Accroissement de 12% du taux de conversion sur la
récupération de panier via les notifications push.

28.
#PWAMP = AMP + PWA
La complémentarité des deux technologies est la formule gagnante

29.
Le protocole HTTP2

30.
Avantages du HTTP/2: Un enjeu de Performance
Le protocole HTTP/2 permet d’améliorer la vitesse des échanges des données sur le web via 3
grands axes :
• Le multiplexing :
HTTP/2 permet en une seule connexion TCP de faire
transiter plusieurs éléments
• Le push :
HTTP/2 permet de définir des éléments dont le
chargement est prioritaire par rapport à d’autres (JS,
CSS…)
• La compression des en-têtes HTTP :
Les en-têtes ne sont plus en texte, mais en binaire.
Le premier en-tête est complet, et les requêtes
suivantes ne contiennent que les éléments
changeants.

31.
Passage au HTTP/2
Le certificat SSL devient un prérequis pour pouvoir bénéficier du protocole HTTP/2.
Certaines pratiques d’optimisation des temps de chargement efficaces en HTTP/1 deviennent obsolètes :
• Concaténation de fichiers CSS ou JS
• Externalisation des ressources
• Domaines Cookie-less
• Domain Sharding
18,2%
des sites sont en
HTTP/2
en septembre 2017

32.
Google ne crawle pas le HTTP2
Un test a été effectué par Bartosz Góralewicz en
ne proposant un site qu’en HTTP2 et en
désactivant l’HTTP1.
Le site répondait en erreur!!!

33.
Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics
Les Outils et certifications

34.
Les outils de diagnostic
Ceux qu’on vous recommande

35.
Faites passer la certification « Sites mobiles »
Google propose un guide de révisons afin de
passer la certification Sites mobiles dont les
modules sous-entendent les points forts d’un
site mobile efficace…
… et certainement des futurs
critères de classement
Lancée en avril 2017

36.
La certification « Sites mobiles »
UX
Perf
AMP, PWA,
Conversion

37.
Merci.
37