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
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
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
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/
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%
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
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
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
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
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
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:
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
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
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
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
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>
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
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!!
!!
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
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!!!
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