Seo camp'us 2018 - Tips pour améliorer et suivre vos temps de chargement pour Mobile First - Mathieu Chapon - Emilie Badoual

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

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

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

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

LES ENJEUX DE LA
PERFORMANCE

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

L’usage du mobile
Chiffres 2017 - 2018

+ 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/

Accès à internet via mobile
65%
En France

L’essor des smartphones
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

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

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

L’usage de la messagerie instantanée
48%

L’usage de la vidéo mobile
46%

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

Les moments
Consultation au
réveil
20%
En multitâche Dans les transports
84% 49%

Les moments

Les réactions de Google face au mobile

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

L’impact en termes de CA
Chiffres 2017 - 2018

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

www.fasterize.com – www.retailmenot.com
Les e-commerçants sans offre mobile

www.fasterize.com
Les e-commerçants qui ont dit OUI au mobile

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

Abandon de panier
20% des utilisateurs abandonneraient
leur panier
www.fasterize.com

Fidélisation des clients
Après 3 secondes d’attente, 57% des
internautes quittent un site
80 % d’entre eux n’y reviendront
jamais.
www.fasterize.com

Quels KPIs prendre en compte ?

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

Le start render
Cette métrique mesure la
première fois que le navigateur
affiche autre chose qu'une page
vierge.
www.fasterize.com

Le speed index
Délai moyen nécessaire à
l'affichage des pixels au-dessus de
la ligne de flottaison.
www.fasterize.com

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

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

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

Thank you
FIXEZ-VOUS
LES BONS OBJECTIFS

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

L’objectif de 100 appels externes
Source : https://developers.google.com/speed/docs/insights/mobile
https://support.google.com/partners/answer/7335657?hl=fr&ref_topic=7327984

L’objectif du poids d’une page
Poids d’une page
Poids d’une image
< 1mo
< 60 Ko
Nous recommandons:

Thank you
AUDITER
VOTRE SITE

Les outils pour l’audit
Du gratuit au payant
Page Speed Insight Google Webmaster tools Dareboost
LIGHTHOUSE KeyCDN Website Speed Test Sondes

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

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

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

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

Avec l’Index Mobile First, ce temps de chargement
devrait évoluer

LIGHTHOUSE
Plugin Chrome de Google

KeyCDN
Tester votre site depuis plusieurs
localités en particulier si vous couvrez
plusieurs territoires avec votre activité
Tester votre site à l’international

Les sondes
Tester votre site en profondeur
Les sondes
Site
WEB

Les premières
recommandations

Les images
Source : AKAMAI

Pire encore…
Charger les images sans les afficher

Ou alors…
Charger les images en grand format pour les retailler par CSS

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

JPEG Normal  JPEG Progressive
8s 2s

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

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

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

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

Les recommandations
avancées

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

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="(min-width: 1134px)" srcset="pix/respimg960w.png">
<img
src="pix/default.gif">
</picture>

Techniques adaptées aux nouveaux
navigateurs

Le Pre-load
Cela permet d’ordonnancer le chargement de vos ressources
Prioriser le chargement de vos fichiers externes

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

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

Faites la commande : chrome://dns/

Les inconvénients de ces 3 techniques
Ces optimisations sont gourmandes à plusieurs niveaux
Batterie
Logs Ressources
Navigateurs

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!!
!!

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

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,… »

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

Le protocole HTTP2

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

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

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!!!

Stratégie de lancement
de site mobile

Un site mobile allégé

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

Conclusion

Stratégie « Above-the-fold »

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

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

Faites-vous partie de l’Index First
Mobile?
GoogleBot Smartphone dans vos logs

Merci de votre écoute

Question Mug

MERCI AUX SPONSORS

Seo camp'us 2018 - Tips pour améliorer et suivre vos temps de chargement pour Mobile First - Mathieu Chapon - Emilie Badoual

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Seo camp'us 2018 - Tips pour améliorer et suivre vos temps de chargement pour Mobile First - Mathieu Chapon - Emilie Badoual

Similaire à Seo camp'us 2018 - Tips pour améliorer et suivre vos temps de chargement pour Mobile First - Mathieu Chapon - Emilie Badoual (20)

Plus de Peak Ace

Plus de Peak Ace (20)

Seo camp'us 2018 - Tips pour améliorer et suivre vos temps de chargement pour Mobile First - Mathieu Chapon - Emilie Badoual