1.
1#seocamp@Mathieujava @Emilie_bd
Tips pour améliorer vos perfs
Sur Mobile

2.
2#seocamp@Mathieujava @Emilie_bdAgence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics
CHAPON Mathieu
BADOUAL Emilie
CoFondateur de Search
Foresight
10 ans d’expérience sur des
problématiques SEO Grands
Comptes & E-commerce.
Former des équipes
Charger des outils R&D
Faire évoluer les méthodes
Accompagne les clients
stratégiques
Consultante SEO
10 ans d’expérience en marketing
Dont 4 en SEO
Piloter les missions de refontes
Piloter les missions webperf
Optimisations sémantiques
Contributrice à la Newsletter

3.
3#seocamp@Mathieujava @Emilie_bd
Search-Foresight.com
Innovante, Pragmatique, Utile
 60EXPERTS EN SEO / SEA
+200CLIENTS SATISFAITS
 1CENTRE DE FORMATION
SF UNIVERSITY
Stratégie Technique Assistance

4.
4#seocamp@Mathieujava @Emilie_bd
Sommaire
1. État de l’usage du mobile en France
2. Les réactions de Google face au mobile
3. Quels KPIs prendre en compte ?
4. Les outils pour auditer votre site?
5. Les recommandations les plus simples
6. Les recommandations avancées
7. Stratégie de lancement de site mobile
8. Conclusion

5.
5#seocamp@Mathieujava @Emilie_bd
LES ENJEUX DE LA
PERFORMANCE

6.
6#seocamp@Mathieujava @Emilie_bd
Index mobile First
LES ENJEUX DE LA PERFORMANCE
En 2018, le temps de chargement est votre priorité
Facteur de classement Business Notoriété Crawl
*Etude fasterize

7.
7#seocamp@Mathieujava @Emilie_bd
L’usage du mobile
Chiffres 2017 - 2018

8.
8#seocamp@Mathieujava @Emilie_bd
+ de
50%
 Les Français font plus de
recherches Google sur mobile
que sur ordinateur
2017 marque un tournant
En France
http://www.credoc.fr/

9.
9#seocamp@Mathieujava @Emilie_bd
Accès à internet via mobile
65%
http://www.credoc.fr/
En France

10.
10#seocamp@Mathieujava @Emilie_bd
L’essor des smartphones
http://www.credoc.fr/
Navigation Web Utilisation d’applications
La navigation et le téléchargement d’applis sont les usages les plus répandus
64% 60% 55%
Consultation des e-mails
En France

11.
11#seocamp@Mathieujava @Emilie_bd
Les conditions de vos tests
La 3G représente la connexion moyenne en France
91% 60%
Couverture du réseau sur le territoire en France
en juillet 2017
https://www.arcep.fr/index.php?id=13711
35 millions d’abonnés

12.
12#seocamp@Mathieujava @Emilie_bd
PDM des navigateurs mobiles en France
1er trimestre 2018
gs.statcounter.com
Autres
3%
Android
1%
Samsung
Internet
8%
Safari
37%
Chrome
51%

13.
13#seocamp@Mathieujava @Emilie_bd
L’usage de la messagerie instantanée
http://www.credoc.fr/
48%

14.
14#seocamp@Mathieujava @Emilie_bd
L’usage de la vidéo mobile
http://www.credoc.fr/
46%

15.
15#seocamp@Mathieujava @Emilie_bd
Temps moyen passé
sur smartphone
Les Français et leur smartphone
Une relation fusionnelle
Connexions
quotidiennes
1h42 23 X
https://www2.deloitte.com

16.
16#seocamp@Mathieujava @Emilie_bd
Les Français et leur smartphone
Les moments
Consultation au
réveil
20%
En multitâche Dans les transports
84% 49%
https://www2.deloitte.com

17.
17#seocamp@Mathieujava @Emilie_bd
Les Français et leur smartphone
Les moments
https://www2.deloitte.com

18.
18#seocamp@Mathieujava @Emilie_bd
Les réactions de Google face au mobile

19.
19#seocamp@Mathieujava @Emilie_bd
SLOW TO
LOAD
2015
MOBILE
FIRST
INDEXING
To be continued
2016
Les grandes étapes
webmasters.googleblog.com
RED
SLOW
LABEL
2015
PROJET
AMP
2015
MOBILE
GEDDON
2015
USING SPEED
IN SEARCH
RANKING
2010
SPEED
UPDATE
Juillet 2018

20.
20#seocamp@Mathieujava @Emilie_bd
L’impact en termes de CA
Chiffres 2017 - 2018

21.
21#seocamp@Mathieujava @Emilie_bd
Les attentes des Français
En matière d’usage
Vitesse de
chargementLes mobinautes s’attendent à ce
qu’une page web se charge au
moins aussi rapidement sur
mobile que sur ordinateur
41%
Moins de 5 secondes
Une page web doit se charger en
moins de 5 secondes sur un
mobile
60%
Moins de 3
secondes
Les plus exigeants ne souhaitent
pas attendre plus de 3 secondes
de chargement sous peine
d’abandon.
74%
www.fasterize.com

22.
22#seocamp@Mathieujava @Emilie_bd
www.fasterize.com – www.retailmenot.com
Les e-commerçants sans offre mobile

23.
23#seocamp@Mathieujava @Emilie_bd
www.fasterize.com
Les e-commerçants qui ont dit OUI au mobile

24.
24#seocamp@Mathieujava @Emilie_bd
Image de marque
81% des internautes français
réfléchiraient à 2 fois avant d’acheter
sur un site lent.
Les impacts sur le mobinaute
www.fasterize.com

25.
25#seocamp@Mathieujava @Emilie_bd
Abandon de panier
20% des utilisateurs abandonneraient
leur panier
Les impacts sur le mobinaute
www.fasterize.com

26.
26#seocamp@Mathieujava @Emilie_bd
Fidélisation des clients
Après 3 secondes d’attente, 57% des
internautes quittent un site
80 % d’entre eux n’y reviendront
jamais.
Les impacts sur le mobinaute
www.fasterize.com

27.
27#seocamp@Mathieujava @Emilie_bd
Quels KPIs prendre en compte ?

28.
28#seocamp@Mathieujava @Emilie_bd
Les KPIs les plus communs
Temps de réponse du
serveur (TTFB)
Le temps qui s’écoule entre le
moment où l’utilisateur “appelle”
une page et le moment où le
serveur renvoie les premiers
octets de la page HTML à son
navigateurwww.fasterize.com

29.
29#seocamp@Mathieujava @Emilie_bd
Les KPIs les plus communs
Le start render
Cette métrique mesure la
première fois que le navigateur
affiche autre chose qu'une page
vierge.
www.fasterize.com

30.
30#seocamp@Mathieujava @Emilie_bd
Les KPIs les plus communs
Le speed index
Délai moyen nécessaire à
l'affichage des pixels au-dessus de
la ligne de flottaison.
www.fasterize.com

31.
31#seocamp@Mathieujava @Emilie_bd
Les KPIs les plus communs
Time to interact
Moment où le contenu principal
est affiché et pour lequel
l’utilisateur peut commencer à
s’engager de façon significative
www.fasterize.com

32.
32#seocamp@Mathieujava @Emilie_bd
Start render First Contentfull Pain
 La mesure du Start Render se base sur une vidéo enregistrée, ce qui est
particulièrement fiable.
 Le FCP quant à lui, est une mesure prise par le navigateur qui indique le moment
où le premier élément de contenu est visible.
www.fasterize.com

33.
33#seocamp@Mathieujava @Emilie_bd
89 Ko
(images, scripts compris)
2,6 Mo
(images, scripts compris)
2000
2018
www.fasterize.com
Des pages web de plus en plus lourdes
X30

34.
34#seocamp@Mathieujava @Emilie_bd
Thank you
FIXEZ-VOUS
LES BONS OBJECTIFS

35.
35#seocamp@Mathieujava @Emilie_bd
Fixer vous des objectifs : 4 KPIS de chargement
Un site rapide, c’est + de SEO, + d’usage et + de business
Time to First Byte < 200ms
Temps de téléchargement html < 500ms
Temps du début d’affichage < 1 seconde
Temps de rendition < 2 secondes
Source : https://developers.google.com/speed/docs/insights/mobile
https://support.google.com/partners/answer/7335657?hl=fr&ref_topic=7327984

36.
36#seocamp@Mathieujava @Emilie_bd
L’objectif de 100 appels externes
Un site rapide, c’est + de SEO, + d’usage et + de business
Source : https://developers.google.com/speed/docs/insights/mobile
https://support.google.com/partners/answer/7335657?hl=fr&ref_topic=7327984

37.
37#seocamp@Mathieujava @Emilie_bd
L’objectif du poids d’une page
Un site rapide, c’est + de SEO, + d’usage et + de business
Poids d’une page
Poids d’une image
< 1mo
< 60 Ko
Nous recommandons:

38.
38#seocamp@Mathieujava @Emilie_bd
Thank you
AUDITER
VOTRE SITE

39.
39#seocamp@Mathieujava @Emilie_bd
Les outils pour l’audit
Du gratuit au payant
Page Speed Insight Google Webmaster tools Dareboost
LIGHTHOUSE KeyCDN Website Speed Test Sondes

40.
40#seocamp@Mathieujava @Emilie_bd
Page Speed
Insight
• Le score de vitesse,
• Le score d’optimisation
• La répartition du temps de
chargement sur une page
• Les statistiques de la page
• Les suggestions d’optimisation.
L’outil Performance de Google

41.
41#seocamp@Mathieujava @Emilie_bd
Nouvel outil de benchmark Google
Se comparer aux autres et simuler son manque à gagner
https://www.thinkwithgoogle.com/feature/mobile/

42.
42#seocamp@Mathieujava @Emilie_bd
Dareboost
Outil français (des Bretons ), l’outil vous propose
une évaluation de plusieurs indicateurs de
performance, mais pas que:
• SEO
• Sécurité
• W3C
• …
Ainsi que les bonnes pratiques associées
Mesure les KPIS et recommande

43.
43#seocamp@Mathieujava @Emilie_bd
GSC (GWT)
Temps de chargement de tous les types
de contenus que Google télécharge, à
savoir les pages, les fichiers CSS,
JavaScript, Flash et PDF, ainsi que les
images
Mesurer le crawl de Google

44.
44#seocamp@Mathieujava @Emilie_bd
Avec l’Index Mobile First, ce temps de chargement
devrait évoluer

45.
45#seocamp@Mathieujava @Emilie_bd
LIGHTHOUSE
Plugin Chrome de Google

46.
46#seocamp@Mathieujava @Emilie_bd
KeyCDN
Tester votre site depuis plusieurs
localités en particulier si vous couvrez
plusieurs territoires avec votre activité
Tester votre site à l’international

47.
47#seocamp@Mathieujava @Emilie_bd
Les sondes
Tester votre site en profondeur
Les sondes
Site
WEB

48.
48#seocamp@Mathieujava @Emilie_bd
Les premières
recommandations

49.
49#seocamp@Mathieujava @Emilie_bd
Les images
Source : AKAMAI

50.
50#seocamp@Mathieujava @Emilie_bd
Pire encore…
Charger les images sans les afficher

51.
51#seocamp@Mathieujava @Emilie_bd
Ou alors…
Charger les images en grand format pour les retailler par CSS

52.
52#seocamp@Mathieujava @Emilie_bd
Les optimisations classiques
Les images sont régulièrement trop lourdes. Vous pouvez:
Dimensionner vos images à la bonne taille
Réduire leur poids sans perdre la qualité https://imagify.io
Compresser en GZIP (sauf les PNG)
Héberger vos images sur un sous-domaine différent http://image.domaine.com
Utiliser le lazy loading
Utiliser les sprites CSS pour les images récurrentes sur vos templates (pictos,
logos)
Utiliser le JPEG Progressive
Les images > 50 ko

53.
53#seocamp@Mathieujava @Emilie_bd
JPEG Normal  JPEG Progressive
8s 2s

54.
54#seocamp@Mathieujava @Emilie_bd
Réduire vos images sans perte de qualité
Quelques techniques peu utilisées
Utiliser JCE pour retirer les données EXIF de vos images
La compression "Lossless" de vos images (ImageRecycle)
Encoder les petites images en base64: base64-image.de
Rallonger le cache navigateur
Les images > 50 ko

55.
55#seocamp@Mathieujava @Emilie_bd
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 (en protocole HTTP1)
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
Rallonger le cache navigateur de ces ressources qui évoluent rarement
Optimiser votre cache serveur pour éviter les purges inutiles
Traiter vos fichiers CSS et JS

56.
56#seocamp@Mathieujava @Emilie_bd
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

57.
57#seocamp@Mathieujava @Emilie_bd
Le Parser - Tolérance 0
Si on compare le code source de cette page avant/après la suppression des lignes
vides
57
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és de cette page

58.
58#seocamp@Mathieujava @Emilie_bd
Les recommandations
avancées

59.
59#seocamp@Mathieujava @Emilie_bd
Les attributs <srcset> et <size>
Le navigateur vient faire son marché
L’attribut <size> indique la largeur finale de l’image  Aide à la « prise de décision »
du navigateur.
59

60.
60#seocamp@Mathieujava @Emilie_bd
L’attribut <picture>
<picture> permet de déclarer plusieurs images en fonction des media queries.
60
<picture id="seo-camp">
<source media="(max-width: 633px)" srcset="pix/respimg320w.png">
<source media="(max-width: 833px)" srcset="pix/respimg480w.png">
<source media="(max-width: 1033px)" srcset="pix/respimg640w.png">
<source media="(max-width: 1133px)" srcset="pix/respimg800w.png">
<source media="(min-width: 1134px)" srcset="pix/respimg960w.png">
<img
src="pix/default.gif">
</picture>

61.
61#seocamp@Mathieujava @Emilie_bd
Techniques adaptées aux nouveaux
navigateurs

62.
62#seocamp@Mathieujava @Emilie_bd
Le Pre-load
Cela permet d’ordonnancer le chargement de vos ressources
Prioriser le chargement de vos fichiers externes

63.
63#seocamp@Mathieujava @Emilie_bd
Le Prefetch
Récupère les ressources en arrière-plan nécessaire plus tard et stocker dans le
cache du navigateur
Exemple: présentation, slideshow, slides, résultats de recherche paginés...
Anticipe le chargement de certains fichiers
W3C (HTML5 Links

64.
64#seocamp@Mathieujava @Emilie_bd
Le DNS Prefetch
Effectuer des recherches de DNS sur des liens externes en arrière-plan
Votre chrome le fait déjà à votre insu sur la base de votre historique sur les 10
derniers sites visités avant fermeture
Permets d’effacer les effets négatifs de la latence des réseaux

65.
65#seocamp@Mathieujava @Emilie_bd
Faites la commande : chrome://dns/

66.
66#seocamp@Mathieujava @Emilie_bd
Les inconvénients de ces 3 techniques
Ces optimisations sont gourmandes à plusieurs niveaux
Batterie
Logs Ressources
Navigateurs

67.
67#seocamp@Mathieujava @Emilie_bd
Les optimisations plus « compliquées »
Quand on vous parle de cache, vous devez savoir de quoi on parle:
Cache serveur
Cache du CMS
Cache Varnish
Cache AKAMAI
Reverse proxy
Load Balancing
CDN
…
67
Le cache: Ce que vous devez savoir!
ARHHH
HHHHH
HHHHH!!
!!

68.
68#seocamp@Mathieujava @Emilie_bd
S'il y a une chose à retenir
68
Qu’est-ce que le cache?

69.
69#seocamp@Mathieujava @Emilie_bd
S’il y a une chose à retenir
Exemple sur la durée du cache
69
Avoir du cache ne veut rien dire
Pourquoi un cache si court?
Comment est régénéré le 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,… »

70.
70#seocamp@Mathieujava @Emilie_bd
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?
70
Gérer la durée du cache

71.
71#seocamp@Mathieujava @Emilie_bd
Le protocole HTTP2

72.
72#seocamp@Mathieujava @Emilie_bd
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 : parallélisé les appels
• Le push: prioriser les chargements
• La compression des en-têtes HTTP

73.
73#seocamp@Mathieujava @Emilie_bd
Le multiplexing
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

74.
74#seocamp@Mathieujava @Emilie_bd
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!!!

75.
75#seocamp@Mathieujava @Emilie_bd
Stratégie de lancement
de site mobile

76.
76#seocamp@Mathieujava @Emilie_bd
Un site mobile allégé

77.
77#seocamp@Mathieujava @Emilie_bd
Si vous avez déjà fait de l’AMP…
Desktop Mobile AMP
195 ko
40 pubs
4,5s
87 ko
33 pubs
4s
78 ko
7 pubs
2s

78.
78#seocamp@Mathieujava @Emilie_bd
Conclusion

79.
79#seocamp@Mathieujava @Emilie_bd
Stratégie « Above-the-fold »

80.
80#seocamp@Mathieujava @Emilie_bd
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

81.
81#seocamp@Mathieujava @Emilie_bd
La certification « Sites mobiles »
UX
Perf
AMP,
PWA,
Conversion

82.
82#seocamp@Mathieujava @Emilie_bd
Faites-vous partie de l’Index First
Mobile?
GoogleBot Smartphone dans vos logs

83.
83#seocamp@Mathieujava @Emilie_bd
Merci de votre écoute

84.
84#seocamp@Mathieujava @Emilie_bd
Question Mug

85.
85#seocamp@Mathieujava @Emilie_bd
MERCI AUX SPONSORS