SlideShare une entreprise Scribd logo
1  sur  57
Télécharger pour lire hors ligne
#seocamp 1
Les clés d’un site
(beaucoup) plus rapide selon
des facteurs qui restent trop
souvent oubliés
#seocamp 2
Gilles TRAN
Consultant SEO
#seocamp 3
Pourquoi optimiser la webperf ?
#seocamp 4
Des visites
Sont abandonnées si la
page met plus de 3s à se
charger *.
La WebPerf
Oui, mais pourquoi ?
De délais Depuis Juillet 2018
53%
● * Source: Google Data, Aggregated, anonymized Google Analytics data from a sample of mWeb sites opted into sharing benchmark data, n=3.7K, Global, March 2016.
● **https://developer.akamai.com/blog/2015/09/01/mobile-web-performance-monitoring-conversion-rate
● ***https://www.searchenginejournal.com/google-ads-updates-mobile-speed-score-for-landing-pages/294401/
1sec
Peut impacter jusqu’à 20%
des conversions **
La vitesse de
chargement est un critère de
ranking pour les recherches
mobiles
Depuis Aout 2018
Un score de
vitesse sur mobile est
présent
dans Google Ads ***
#seocamp 5
Pour qui optimisons nous le site ?
#seocamp 6
Pourcentage utilisateurs Desktop Mobile
49%
33%
18%
* Source Médiamétrie 2018 : https://www.mediametrie.fr/fr/lannee-internet-2018 en France
#seocamp 7
Résolution d’écrans 2018-2019 France
0
2
4
6
8
10
12
14
16
2560x1440 1920x1080 1600x900 1440x900 1366x768 1280x800 375x667 360x640
1,9% > 1920px
1920 pixels c’est le pourcentage d’utilisateurs sur
un écran de plus de 1920px de large
* Source : http://gs.statcounter.com/screen-resolution-stats/all/france
#seocamp 8
Visible dans le “viewport”
Mobile Desktop
#seocamp 9
Contenu de la page
Mobile Desktop
#seocamp 10
Pages les plus visitées
Trafic bien diffusé Trafic concentré
Il s’agit ici des principales pages d’entrées sur le site (pages de destination) Captures : source GA
#seocamp 11
Conclusions
Pour qui optimisons-nous ?
Il faut connaître votre audience et ses usages de VOTRE site
pour cibler précisément vos actions d’optimisation.
_
Certains sites ont 80% de visites sur Desktop
lorsque d’autres l’ont sur Mobile
_
En optimisant une page vous pouvez
optimiser 75% de votre trafic
#seocamp 12
(Quelques) Principaux KPI de la
WebPerf
#seocamp 13
TTFB (Time To First Byte)
Le TTFB mesure le temps écoulé entre la requête
HTTP d'un client et le premier octet de la page
reçu dans le navigateur du client.
Les principaux KPI de la WebPerf
Speed Index
Le Speed Index est un indice de performance qui
indique à quelle vitesse le contenu d'une page
commence à être visible à l’utilisateur
FCP (First Contentful Paint)
C’est un critère important car s’est le premier
instant où l’utilisateur va voir des éléments
s’afficher dans la page
TTI (Time To Interactive)
Ce critère est très important sur le fait que c’est
le temps nécessaire pour que votre utilisateur
puisse commencer à interagir avec votre site et
votre service
Affichage Critique
C’est ce que l’internaute va voir à l’écran avant
même de pouvoir interagir avec la page. En
général ce qui est visible dans le viewport
#seocamp 14
Premières pistes d’optimisation
#seocamp 15
Lighthouse
Un plugin Chrome pour analyser vos
web performances (Obtention rapide
des KPIs : FCP, Speed Index, TTI,…)
Services d’analyse des webperfs
Webpagetest
Cet outil dispose du Speed Index (le
temps moyen à partir duquel la page
devient visible à l’utilisateur)
Gtmetrix
Ce service est rapide et pratique pour
se faire une idée sur ses performances
sans délais (accès rapide aux poids de
page et assets chargés)
PageSpeed Insights
Un service de Google pour analyser ses
performances en version mobile et
desktop (First Contentful Paint)
Utiliser l’un de ces services tiers pour obtenir des temps de chargement précis
Faire ressortir les premières pistes d’optimisations
#seocamp 16
Chrome Dev Tool
La console de Chrome ou de Firefox vous
apporte des informations précieuses en un clin
d’oeil
119 images sur 137 assets au total
pour charger cette page
#seocamp 17
CSS
Bien que concaténés et minifies par de
nombreux sites, il existe encore de
nombreux sites qui font appel à de
nombreux fichiers CSS
Les 4 pistes fréquentes
JS
Le nombre de fichiers appelés est très
souvent de l’ordre de 35 à 50%
Images
Les images sont les fichiers qui
généralement représentent le nombre
de hits et le volume le plus important
d’une page
Réponse serveur
Le temps de chargement du code HTML
de votre page est bien souvent trop
long. Des ajustements doivent être faits
sur votre serveur (amelioration du
TTFB,…)
#seocamp 18
Optimisation des images
#seocamp 19
Quelle taille pour mes images ?
3 points à vérifier
1) Indice : vérifier l’espace occupé par
l’image (en responsive)
2) Vérifier l’emplacement
alloué (col-md-6 pour
1920px on obtient 960px*)
3) Vérifier la taille de l’image
Dans cet exemple, il est probable que
l’image qui ne doit occuper que 50% de la
largeur de l’écran n’atteigne jamais 1200
pixels
Tips : Votre développeur peut tout à fait
faire ses appels aux images d’une largeur
définie en fonction de la largeur de la
colonne cible !
Source : https://www.creative-tim.com/presentation/
* 960 px, c’est 4 fois moins que 1920px !
#seocamp 20
Quelle taille pour mes images ?
Calcul avec breakpoints multiples
Pour un site responsive, la largeur d’affichage des colonnes est
variable.
Dans certains cas, il faudra communiquer la largeur optimale à
votre développeur :
col-xs-12 : largeur max 576px
col-sm-6 : largeur max 768px / 2 = 384px
col-md-6 : largeur max 992 / 2 = 496px
col-lg-6 : largeur max 1200 / 2 = 600px
col-xl-4 : largeur max 1920 / 4 = 480px
Il faudra donc tenir compte de ces largeurs pour fournir vos
dimensions idéales surtout si vous utilisez les markups d’images
responsive
#seocamp 21
Des images adaptées à mon audience
Nous avons vu que seul 1,9% de nos
visiteurs disposent d’un écran d’une taille
supérieure à 1920px de large
Si votre audience est de 75% sur mobile
vous pourrez tout à fait adapter ces chiffres
Mis à part pour des sites d’images,
vous ne devriez jamais opter pour
des images d’une dimension
supérieure à 1920px
* Source : http://www.actea-consulting.fr/assurance-sur
3159x2106 px
#seocamp 22
Des images optimisées LossLess
Notre image de 3160px de
large une fois compressée
permet un gain de 82%
Notre image de 3160px réduite
à 1920px de large puis
compressée permet un gain de
93%
* Source : https://www.imagerecycle.com/
Tips : Optimiser les images à l'aide d'une
librairie de compression (Google fournie
lui-même une librairie open source :
Guetzli)
#seocamp 23
Des images adaptées au responsive
2 intégrations possibles
La balise « Picture » et
La balise image avec un attribut
« srcset »
L’utilisation de « srcset » étant plus
simple à mettre en place
Chacune des 2 méthodes n’est
cependant pas 100% compatible avec
tous les navigateurs, mais les 2 profitent
d’un dégradé progressif sur l’attribut
« src »
Tips : Il est tout à fait possible de lazy-
loader vos images responsives. Vous
emploierez l’attribut : data-srcset
#seocamp 24
Lazy-loader mes images
Seules les images de l’encadré
sont visibles dans le viewport
Il conviendra de toujours
charger les suivantes en
asynchrone et seulement
lorsque l’image sera à
proximité immédiate du
viewport.
Tips : Vous pouvez lazy-loader toutes les
images <img/> et images de fond
* Source : http://www.mikiyakobayashi.com/projects
#seocamp 25
Lazy-loader mes images de fond
* Source : http://www.hellothierry.com
Voici 2 exemples de scripts compatibles avec la
gestion du lazy-loading des images de fond :
Lazy-loading de Mika Tuupola : l'un des scripts les plus
anciens et aboutis sur cette problèmatique :
https://appelsiini.net/projects/lazyload/
Lazysizes de Alexander Farkas : Un script plus récent qui
permet aussi le lazy-loading d'autres éléments (expl. :
iframes et vidéos) : https://github.com/aFarkas/lazysizes
<div class="lazyload" data-src="original.jpg" />
#seocamp 26
Lazy-loader mes images de fond responsive
En ce qui concerne les images de fond, il n’y a
pas encore de solution efficace !
Il y a bien des tentatives : image-set
Mais c’est encore mal supporté
* Source : https://caniuse.com/#search=image-set
Une piste de solution ? Untested
#seocamp 27
Optimisation des JS & CSS
#seocamp 28
Le chargement du JavaScript
Synchrone : <script src="…"></script>
Les fichiers sont téléchargés au fur et à mesure de la lecture du code HTML par le navigateur
Le navigateur attends que le fichier soit téléchargé pour continuer à télécharger le reste de la page !
Cela va retarder l’affichage de votre page et avoir une incidence négative sur tous vos KPI de performances
Source : https://bitsofco.de/async-vs-defe
#seocamp 29
Le chargement du JavaScript
Asynchrone : L’attribut “ASYNC”
ASYNC semble être un attribut plus souple (et c'est surtout plus récent) car il n'attendra pas que le DOM soit chargé pour
être appliqué. Néanmoins il faut savoir que si vous avez plusieurs scripts Async à télécharger, les scripts seront executés
dès lors qu'ils seront disponibles !
L'ordre ne sera pas préservé, il n’y a pas de respect des dépendances !
Pour 2 scripts « ASYNC » successifs, si le premier contient des fonctions et le second y fait appel, on pourra se retrouver
dans la situation ou l’appel des fonctions sera fait avant que nous les ayons téléchargées
#seocamp 30
Le chargement du JavaScript
Asynchrone : L’attribut “DEFER”
On sera alors peut-être tenté d'utiliser DEFER à la place, mais attention !
Les scripts ne seront exécutés qu'après le chargement complet du HTML
Si les scripts ont un effet sur le style d'un bloc de page, il faudra s'assurer que le contenu visible de ce HTML est bien
rendu correctement à l'aide des CSS (utilisation du progressive enhancement) sous peine de voir un saut de page des
éléments (FOUC, flash of unstyled content). Bonus : L’ordre des scripts est préservé avec « DEFER »
#seocamp 31
Le chargement du JavaScript
En bas de page : Avant la fermeture du </body>
L’utilisation des attributs « Async » ou « Defer » devient alors obsolète car le DOM est déjà chargé
Vous pouvez télécharger vos scripts en bas de code seulement si ces derniers n’ont pas d’incidence sur l’affichage
Vous perdez néanmoins un temps précieux de téléchargement en parallèle du code HTML
Inlining des petits scripts
Lorsque des scripts sont suffisamment petits (< 5kos), et que d’autres scripts peuvent dépendre de ce dernier, il peut
s’avérer nécessaire d’ « inliner » ce fichier (inclure le code directement dans votre HTML)
#seocamp 32
Le chargement du JavaScript
Exemple d’intégration
#seocamp 33
N’inclure que le nécessaire
jQuery UI
Supprimer les extensions inutiles
Ne cochez pas toutes les extensions lors du
téléchargement. Il ne faut prendre que le strict
necessaire !
Source : https://jqueryui.com/download/
#seocamp 34
N’inclure que le nécessaire
Bootstrap
Supprimer les extensions inutiles
Ne cochez pas toutes les extensions lors du
téléchargement. Il ne faut prendre que le strict
necessaire !
C’est valable pour les fichiers JS comme pour le CSS
Source : https://getbootstrap.com/docs/3.4/customize/
La dernière version de Bootstrap incluant toutes les fonctionnalités pèse 153kos minifiée
Les CSS de grille Bootstrap n’en pèse que 48kos
Mais il faut aussi faire du ménage dans ce dernier par rapport à vos besoins !
(https://getbootstrap.com/docs/4.3/getting-started/download/ )
#seocamp 35
Supprimer ou différer le chargement de vos scripts
Filtrer puis trier les assets chargés pour cibler vos efforts sur
les fichiers les plus volumineux
A l’aide de la console, vous pouvez voir rapidement les fichiers les plus volumineux pour cibler les actions qui
vont vous faire gagner le plus de poids
#seocamp 36
Astuce WordPress
Reprenez le contrôle du chargement de vos fichiers
De simples fonctions existent pour vous
permettre de supprimer et réordonner le
chargement de vos fichiers JS dans vos
templates WordPress
#seocamp 37
Le progressive Enhancement
Comprendre le principe d’amelioration progressive et son effet sur la vélocité de notre affichage
Exemple du “carousel”
Prenons l’exemple du carousel et
décrivons les étapes de chargement des
fichiers pour faire en sorte de parvenir à
l’affichage désiré
L’amélioration progressive est une manière de concevoir un
site web qui prend très largement en compte l'accessibilité, la
sémantique et le référencement. En séparant strictement le
fond (le contenu proposé à l'utilisateur) et la forme
(l'enjolivement et les interactions avancées), cette
technique permet de présenter un contenu
simple et de rendre un service minimum à tous
les utilisateurs, quel que soit le débit de leur connexion
ou leur navigateur, tout en améliorant progressivement
l'affichage proposé en fonction de l'équipement de
l'internaute.
* Source : https://fr.wikipedia.org/wiki/Am%C3%A9lioration_progressive
#seocamp 38
Le progressive Enhancement
Etape 1
Afficher les premières images mises
en forme à l’aide de quelques lignes
de CSS et adaptées à la taille de
l’écran
Télécharger 3 images et le CSS
correspondant
#seocamp 39
Le progressive Enhancement
Etape 2
Afficher les boutons Next / Prev
Et les puces en bas de slider
Télécharger les images des flèches et
les fichiers JS et CSS permettant le
bon fonctionnement et affichage du
slider
#seocamp 40
Le progressive Enhancement
Etape 3
Il faut maintenant preparer le
chargement des images suivantes qui
ont été lazy-loadées
Télécharger les images à l’aide de
votre script de lazy-loading
#seocamp 41
Le progressive Enhancement
Etape 4
Si vous voulez permettre aux internautes
de faire glisser les images à l’aide du scroll
de la souris
Télécharger le fichier JS de scroll de souris
(https://github.com/jquery/jquery-
mousewheel)
#seocamp 42
Le progressive Enhancement
Etape 5
Si vous voulez permettre aux
internautes de faire glisser les images
à l’aide du doigt sur leur écran mobile
Télécharger le fichier JS de “swipe” sur
écran tactile
#seocamp 43
Le progressive Enhancement
En rouge les fichiers qui ne ralentissent
pas l’affichage
Des économies non négligeables pour un
affichage critique beaucoup plus rapide
• Moins de poids
• Moins de hits en chargement synchrone
40kos
4kos
3kos
15kos
40kos
40kos
40kos
#seocamp 44
Le progressive Enhancement
J’utilise ASYNC, il faut
donc faire attention aux
dépendances
62kos
40kos
40kos
40kos
#seocamp 45
Améliorations usuelles du JavaScript
Quelques efforts usuels
• Minification
• Compression des fichiers (gzip, à appliquer par le server lors de l’envoie de vos fichiers)
• Concaténation des fichiers (si vous servez vos fichiers en protocole HTTP/1 (ce n’est pas
nécessaire en HTTP/2)
#seocamp 46
Autres fichiers qui méritent votre attention
Les fonts
Les fichiers de fonts sont des fichiers qui
peuvent ralentir de façon significative
votre chargement de page. Vous
pouvez opter pour un
chargement asynchrone de vos
fonts.
Google et Typekit ont codéveloppé un
script pour vous aider en ce sens
Web Font Loader
Repo Github : https://github.com/typekit/webfontloader
#seocamp 47
Autres fichiers qui méritent votre attention
Les fonts
ATTENTION au FOUT
Flash Of Unstyled Text
Le FOUT, c’est ce moment ou vous obtenez un
texte qui n’est pas encore stylé par vos fonts et qui
le devient après chargement
Aussi, attention à ne charger vos fonts en
asynchrone que si ces dernières sont relativement
rapides à charger
Opter pour des fonts légères
Source : https://fonts.google.com/
#seocamp 48
Autres fichiers qui méritent votre attention
Les icons fonts
Les librairies de font d’icônes sont très pratiques
pour raccourcir les temps d’intégrations pour
afficher vos icônes
Cela a néanmoins un coût non négligeable !!!
Si vous ne prenez pas garde, vous pourriez charger
des fichiers volumineux de CSS, JS et de galeries
icônes que vous utiliserez ! Privilégiez
l’utilisation de versions SVG de ces
librairies d’icônes
Utiliser des SVG inline
Créer ses propres pack de SVG
Par exemple ICOMOON APP permet de choisir ses icons
parmi les fonts les plus utilisées (Fontawesome, Material,…
#seocamp 49
Optimisation de la réponse
serveur
#seocamp 50
Pourquoi des Réponses serveur lentes ?
L’internaute demande une page, le serveur analyse la
demande et envoie la réponse
Une requête traditionnelle
Ce qui se passe réelement : Le server intercepte la
demande, interprête les scripts, fait appel à la base de
données pour obtenir les informations puis delivre la page
La même requête en détails
A chaque affichage, le serveur va
effectuer le calcul de tous les scripts
nécessaires à afficher la page.
Il va de plus faire de nombreuses
requêtes à votre serveur de base de
données
Lorsque vous expérimentez un pic
de trafic, le serveur va donc avoir du
mal à effectuer tous
les calculs et accès en BDD
#seocamp 51
Quelle solution : mise en place d’un cache
La mise en cache sous forme de plugins : Wordpress
WP Super Cache
Un plugin de cache développé et
maintenu par l’équipe derrière
Wordpress.com
WP Rocket
Un plugin “premium” reconnu des
experts
Lorsque les pages sont en cache, le serveur n’a plus besoin d’effectuer les calculs et appels en base de données
Vous allez donc normalement améliorer de façon significative le TTFB
#seocamp 52
Quelle solution : mise en place d’un cache
La mise en cache par un service SAAS : Cloudflare
Source : https://support.cloudflare.com/hc/fr-fr/articles/200172256-Comment-mettre-en-cache-du-contenu-HTML-statique-
Cloudflare s’intercale entre votre
utilisateur et votre serveur, ce qui
diminue les risques de surcharge
Cloudflare permet de servir
vos assets depuis ses
propres serveurs au plus
proche de votre utilisateur
(principe du CDN)
Il peut dans certains cas
mettre en cache vos pages
HTML
#seocamp 53
Quelle solution : mise en place d’un cache
La mise en cache par un serveur de cache : Varnish
Source : https://fr.wikipedia.org/wiki/Proxy_inverse
Varnish fonctionne en interceptant les requêtes
avant qu’elles ne parviennent à votre serveur
(que votre serveur soit sous Apache, Nginx ou
autre...)
Il ne transmet les requêtes au serveur
applicative que s’il ne dispose pas d’un cache
valide.
Il permet ainsi de soulager énormément votre
serveur applicatif
Attention néanmoins, Varnish (Open source) ne sait gérer que des requêtes
HTTP, il faudra prévoir des développements supplémentaires pour servir
vos pages en HTTPS
#seocamp 54
Quelle solution : mise en place d’un cache
La mise en cache par un serveur de cache : Varnish
L'utilisation des ESI :
L'équivalent d'include plus dynamiques pour
servir des portions de pages avec une période
de cache différente (utile dans le cas où vous
devez fournir des informations sensibles
susceptibles d’évoluer sur une courte période
de temps)
https://varnish-
cache.org/docs/3.0/tutorial/esi.html
Il est possible d’utiliser 2 fonctionnalités de Varnish pour améliorer vos règles de mise en cache
L'utilisation du "Grace mode“ :
Donner une valeur “Grace mode” positive à un objet
indique à Varnish qu’il doit proposer le cache un certain
temps après l’expiration du TTL (Cela pendant que
Varnish rafraichi son cache)
https://varnish-cache.org/docs/trunk/users-guide/vcl-
grace.html
TTL, indique le temps pendant lequel une information doit être
conservée
#seocamp 55
Votre cache est-il efficace ?
La question qu’on ne se pose pas assez souvent !
Mon cache n’est efficace que si les délais de
mise en cache sont suffisants
Si votre cache dure 30 minutes mais que votre
page n’est consultée qu’une fois toutes les
2 heures, votre cache ne sera jamais utilisé !!!
Il conviendra d’étudier vos logs pour connaître
la fréquence de consultation de vos pages. Vous
pourriez procéder par template…
- Pages categories
- Pages articles
- …
Exemple :
Les pages dont les entêtes HTTP de
réponses sont en MISS ne sont pas
servies par votre serveur de cache
Test effectué à l’aide de :
SEO Tools For Excel
Sur une liste d’URL dans Excel
Fonction :
=HttpHeader(A2,"X-Cache")
Source : https://seotoolsforexcel.com/httpheader/
#seocamp 56
Question Mug
● Qu’est-ce que
l’inlining ?
#seocamp 57
MERCI AUX SPONSORS

Contenu connexe

Tendances

Magento et SEO : le combo parfait pour développer son e-commerce
Magento et SEO : le combo parfait pour développer son e-commerceMagento et SEO : le combo parfait pour développer son e-commerce
Magento et SEO : le combo parfait pour développer son e-commercePatrick Valibus
 
Gueye babacar référencement images-video
Gueye babacar référencement images-videoGueye babacar référencement images-video
Gueye babacar référencement images-videogueyebaba
 
Pensez Web-Performances avec WordPress - Une conférence de Julien Oger et Pie...
Pensez Web-Performances avec WordPress - Une conférence de Julien Oger et Pie...Pensez Web-Performances avec WordPress - Une conférence de Julien Oger et Pie...
Pensez Web-Performances avec WordPress - Une conférence de Julien Oger et Pie...pierredargham
 
"Performance Web : vers la Speed Update, un pas après l’autre", Boris Schapir...
"Performance Web : vers la Speed Update, un pas après l’autre", Boris Schapir..."Performance Web : vers la Speed Update, un pas après l’autre", Boris Schapir...
"Performance Web : vers la Speed Update, un pas après l’autre", Boris Schapir...Boris SCHAPIRA
 
Referencement vidéos
Referencement vidéosReferencement vidéos
Referencement vidéosLaura Vincent
 
"WP Super Cache Rocket Reloaded…" – WordCamp Bordeaux 2019
"WP Super Cache Rocket Reloaded…" – WordCamp Bordeaux 2019"WP Super Cache Rocket Reloaded…" – WordCamp Bordeaux 2019
"WP Super Cache Rocket Reloaded…" – WordCamp Bordeaux 2019Boris SCHAPIRA
 
Faire de WordPress un atout dans sa sa stratégie webmarketing
Faire de WordPress un atout dans sa sa stratégie webmarketingFaire de WordPress un atout dans sa sa stratégie webmarketing
Faire de WordPress un atout dans sa sa stratégie webmarketingDaniel Roch - SeoMix
 
We❤️SEO 2019 : WebPerf et SEO
We❤️SEO 2019 : WebPerf et SEOWe❤️SEO 2019 : WebPerf et SEO
We❤️SEO 2019 : WebPerf et SEOErlé Alberton
 
Kiwiparty 2011 - Optimisation des sites internet
Kiwiparty 2011 - Optimisation des sites internetKiwiparty 2011 - Optimisation des sites internet
Kiwiparty 2011 - Optimisation des sites internetDevclic
 
Gueye babacar référencement images-video
Gueye babacar référencement images-videoGueye babacar référencement images-video
Gueye babacar référencement images-videogueyebaba
 
WordPress et la compatibilité mobile - Semrush & SeoMix
WordPress et la compatibilité mobile - Semrush & SeoMixWordPress et la compatibilité mobile - Semrush & SeoMix
WordPress et la compatibilité mobile - Semrush & SeoMixDaniel Roch - SeoMix
 
Accelerated Mobile Pages
Accelerated Mobile PagesAccelerated Mobile Pages
Accelerated Mobile PagesPhilippe YONNET
 
Réussir sa stratégie SEO à l'international : la checklist technique
Réussir sa stratégie SEO à l'international : la checklist techniqueRéussir sa stratégie SEO à l'international : la checklist technique
Réussir sa stratégie SEO à l'international : la checklist techniqueSemrush France
 
web development with amp beginning course
web development with amp   beginning courseweb development with amp   beginning course
web development with amp beginning courseHamidou Bah
 
Responsive WebDesign performant
Responsive WebDesign performantResponsive WebDesign performant
Responsive WebDesign performantRefficience
 
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?Fasterize
 
Construire un site de presse avec Wordpress ?
Construire un site de presse avec Wordpress ?Construire un site de presse avec Wordpress ?
Construire un site de presse avec Wordpress ?Benjamin LUPU
 
Core Web Vitals : les comprendre et se préparer pour le SEO
Core Web Vitals : les comprendre et se préparer pour le SEOCore Web Vitals : les comprendre et se préparer pour le SEO
Core Web Vitals : les comprendre et se préparer pour le SEODigimood - Agence SEO / SEA
 
Le Edge SEO : comment faire du SEO dans le Cloud quand tout le reste a échoué
Le Edge SEO : comment faire du SEO dans le Cloud quand tout le reste a échouéLe Edge SEO : comment faire du SEO dans le Cloud quand tout le reste a échoué
Le Edge SEO : comment faire du SEO dans le Cloud quand tout le reste a échouéPhilippe YONNET
 

Tendances (20)

Magento et SEO : le combo parfait pour développer son e-commerce
Magento et SEO : le combo parfait pour développer son e-commerceMagento et SEO : le combo parfait pour développer son e-commerce
Magento et SEO : le combo parfait pour développer son e-commerce
 
Gueye babacar référencement images-video
Gueye babacar référencement images-videoGueye babacar référencement images-video
Gueye babacar référencement images-video
 
Pensez Web-Performances avec WordPress - Une conférence de Julien Oger et Pie...
Pensez Web-Performances avec WordPress - Une conférence de Julien Oger et Pie...Pensez Web-Performances avec WordPress - Une conférence de Julien Oger et Pie...
Pensez Web-Performances avec WordPress - Une conférence de Julien Oger et Pie...
 
"Performance Web : vers la Speed Update, un pas après l’autre", Boris Schapir...
"Performance Web : vers la Speed Update, un pas après l’autre", Boris Schapir..."Performance Web : vers la Speed Update, un pas après l’autre", Boris Schapir...
"Performance Web : vers la Speed Update, un pas après l’autre", Boris Schapir...
 
Referencement vidéos
Referencement vidéosReferencement vidéos
Referencement vidéos
 
"WP Super Cache Rocket Reloaded…" – WordCamp Bordeaux 2019
"WP Super Cache Rocket Reloaded…" – WordCamp Bordeaux 2019"WP Super Cache Rocket Reloaded…" – WordCamp Bordeaux 2019
"WP Super Cache Rocket Reloaded…" – WordCamp Bordeaux 2019
 
Faire de WordPress un atout dans sa sa stratégie webmarketing
Faire de WordPress un atout dans sa sa stratégie webmarketingFaire de WordPress un atout dans sa sa stratégie webmarketing
Faire de WordPress un atout dans sa sa stratégie webmarketing
 
We❤️SEO 2019 : WebPerf et SEO
We❤️SEO 2019 : WebPerf et SEOWe❤️SEO 2019 : WebPerf et SEO
We❤️SEO 2019 : WebPerf et SEO
 
Kiwiparty 2011 - Optimisation des sites internet
Kiwiparty 2011 - Optimisation des sites internetKiwiparty 2011 - Optimisation des sites internet
Kiwiparty 2011 - Optimisation des sites internet
 
Gueye babacar référencement images-video
Gueye babacar référencement images-videoGueye babacar référencement images-video
Gueye babacar référencement images-video
 
SEO Dawa Day Progressive Web App 23 sept 2017
SEO Dawa Day Progressive Web App 23 sept 2017SEO Dawa Day Progressive Web App 23 sept 2017
SEO Dawa Day Progressive Web App 23 sept 2017
 
WordPress et la compatibilité mobile - Semrush & SeoMix
WordPress et la compatibilité mobile - Semrush & SeoMixWordPress et la compatibilité mobile - Semrush & SeoMix
WordPress et la compatibilité mobile - Semrush & SeoMix
 
Accelerated Mobile Pages
Accelerated Mobile PagesAccelerated Mobile Pages
Accelerated Mobile Pages
 
Réussir sa stratégie SEO à l'international : la checklist technique
Réussir sa stratégie SEO à l'international : la checklist techniqueRéussir sa stratégie SEO à l'international : la checklist technique
Réussir sa stratégie SEO à l'international : la checklist technique
 
web development with amp beginning course
web development with amp   beginning courseweb development with amp   beginning course
web development with amp beginning course
 
Responsive WebDesign performant
Responsive WebDesign performantResponsive WebDesign performant
Responsive WebDesign performant
 
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
 
Construire un site de presse avec Wordpress ?
Construire un site de presse avec Wordpress ?Construire un site de presse avec Wordpress ?
Construire un site de presse avec Wordpress ?
 
Core Web Vitals : les comprendre et se préparer pour le SEO
Core Web Vitals : les comprendre et se préparer pour le SEOCore Web Vitals : les comprendre et se préparer pour le SEO
Core Web Vitals : les comprendre et se préparer pour le SEO
 
Le Edge SEO : comment faire du SEO dans le Cloud quand tout le reste a échoué
Le Edge SEO : comment faire du SEO dans le Cloud quand tout le reste a échouéLe Edge SEO : comment faire du SEO dans le Cloud quand tout le reste a échoué
Le Edge SEO : comment faire du SEO dans le Cloud quand tout le reste a échoué
 

Similaire à SEO campus 2019 | Les clés d’un site web (beaucoup) plus rapide selon des facteurs qui restent trop souvent oubliés !

Core Web Vitals : Comprendre, Mesurer, Optimiser
Core Web Vitals : Comprendre, Mesurer, OptimiserCore Web Vitals : Comprendre, Mesurer, Optimiser
Core Web Vitals : Comprendre, Mesurer, OptimiseriProspect France
 
SEO & Javascript en 2021 : Challenger les acquis - Alexandre Pinat - SEO CAMP...
SEO & Javascript en 2021 : Challenger les acquis - Alexandre Pinat - SEO CAMP...SEO & Javascript en 2021 : Challenger les acquis - Alexandre Pinat - SEO CAMP...
SEO & Javascript en 2021 : Challenger les acquis - Alexandre Pinat - SEO CAMP...SEO CAMP
 
Améliorer l’expérience utilisateur en passant aux Progressive Web App
Améliorer l’expérience utilisateur en passant aux Progressive Web App Améliorer l’expérience utilisateur en passant aux Progressive Web App
Améliorer l’expérience utilisateur en passant aux Progressive Web App RESONEO
 
Web Perf : par où commencer ? #SEOGoodVibes
Web Perf : par où commencer ? #SEOGoodVibesWeb Perf : par où commencer ? #SEOGoodVibes
Web Perf : par où commencer ? #SEOGoodVibesiProspect France
 
Webperf : par où commencer ? - SEOGoodVibes
Webperf : par où commencer ? - SEOGoodVibesWebperf : par où commencer ? - SEOGoodVibes
Webperf : par où commencer ? - SEOGoodVibesMadeline Pinthon
 
Performances Web Mobile
Performances Web MobilePerformances Web Mobile
Performances Web MobileWilly Leloutre
 
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...Peak Ace
 
Core Web Vitals, quel impact et comment s'y attaquer ? - Samson Tat - SEO CAM...
Core Web Vitals, quel impact et comment s'y attaquer ? - Samson Tat - SEO CAM...Core Web Vitals, quel impact et comment s'y attaquer ? - Samson Tat - SEO CAM...
Core Web Vitals, quel impact et comment s'y attaquer ? - Samson Tat - SEO CAM...SEO CAMP
 
Cahier de charges Site web DRUPAL
Cahier de charges Site web DRUPALCahier de charges Site web DRUPAL
Cahier de charges Site web DRUPALLaribi Aicha
 
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...Mohammed JAITI
 
RennesJS Talk webperf by Dareboost
RennesJS Talk webperf by DareboostRennesJS Talk webperf by Dareboost
RennesJS Talk webperf by DareboostDamien Jubeau
 
Initiation Webperf : Comprendre, analyser et optimiser les performances web F...
Initiation Webperf : Comprendre, analyser et optimiser les performances web F...Initiation Webperf : Comprendre, analyser et optimiser les performances web F...
Initiation Webperf : Comprendre, analyser et optimiser les performances web F...Kenny Dits
 
La compatibilité mobile de WordPress et le SEO
La compatibilité mobile de WordPress et le SEOLa compatibilité mobile de WordPress et le SEO
La compatibilité mobile de WordPress et le SEOSemrush France
 
Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...
Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...
Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...Peak Ace
 
Morning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slidesMorning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slidesOxalide
 
Oxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performanceOxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performanceLudovic Piot
 
Seo camp day lorraine 2018 - Nancy gregory ambroise
Seo camp day lorraine 2018  - Nancy gregory ambroiseSeo camp day lorraine 2018  - Nancy gregory ambroise
Seo camp day lorraine 2018 - Nancy gregory ambroiseGrégory Ambroise
 
Comment transformer la performance web en croissance et conversion utilisateur
Comment transformer la performance web en croissance et conversion utilisateurComment transformer la performance web en croissance et conversion utilisateur
Comment transformer la performance web en croissance et conversion utilisateurAlexandre Thuriot
 
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...Peak Ace
 

Similaire à SEO campus 2019 | Les clés d’un site web (beaucoup) plus rapide selon des facteurs qui restent trop souvent oubliés ! (20)

Core Web Vitals : Comprendre, Mesurer, Optimiser
Core Web Vitals : Comprendre, Mesurer, OptimiserCore Web Vitals : Comprendre, Mesurer, Optimiser
Core Web Vitals : Comprendre, Mesurer, Optimiser
 
SEO & Javascript en 2021 : Challenger les acquis - Alexandre Pinat - SEO CAMP...
SEO & Javascript en 2021 : Challenger les acquis - Alexandre Pinat - SEO CAMP...SEO & Javascript en 2021 : Challenger les acquis - Alexandre Pinat - SEO CAMP...
SEO & Javascript en 2021 : Challenger les acquis - Alexandre Pinat - SEO CAMP...
 
Améliorer l’expérience utilisateur en passant aux Progressive Web App
Améliorer l’expérience utilisateur en passant aux Progressive Web App Améliorer l’expérience utilisateur en passant aux Progressive Web App
Améliorer l’expérience utilisateur en passant aux Progressive Web App
 
Web Perf : par où commencer ? #SEOGoodVibes
Web Perf : par où commencer ? #SEOGoodVibesWeb Perf : par où commencer ? #SEOGoodVibes
Web Perf : par où commencer ? #SEOGoodVibes
 
Webperf : par où commencer ? - SEOGoodVibes
Webperf : par où commencer ? - SEOGoodVibesWebperf : par où commencer ? - SEOGoodVibes
Webperf : par où commencer ? - SEOGoodVibes
 
Performances Web Mobile
Performances Web MobilePerformances Web Mobile
Performances Web Mobile
 
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
 
Core Web Vitals, quel impact et comment s'y attaquer ? - Samson Tat - SEO CAM...
Core Web Vitals, quel impact et comment s'y attaquer ? - Samson Tat - SEO CAM...Core Web Vitals, quel impact et comment s'y attaquer ? - Samson Tat - SEO CAM...
Core Web Vitals, quel impact et comment s'y attaquer ? - Samson Tat - SEO CAM...
 
Cahier de charges Site web DRUPAL
Cahier de charges Site web DRUPALCahier de charges Site web DRUPAL
Cahier de charges Site web DRUPAL
 
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
 
SAPIENS2009 - Module 4B
SAPIENS2009 - Module 4BSAPIENS2009 - Module 4B
SAPIENS2009 - Module 4B
 
RennesJS Talk webperf by Dareboost
RennesJS Talk webperf by DareboostRennesJS Talk webperf by Dareboost
RennesJS Talk webperf by Dareboost
 
Initiation Webperf : Comprendre, analyser et optimiser les performances web F...
Initiation Webperf : Comprendre, analyser et optimiser les performances web F...Initiation Webperf : Comprendre, analyser et optimiser les performances web F...
Initiation Webperf : Comprendre, analyser et optimiser les performances web F...
 
La compatibilité mobile de WordPress et le SEO
La compatibilité mobile de WordPress et le SEOLa compatibilité mobile de WordPress et le SEO
La compatibilité mobile de WordPress et le SEO
 
Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...
Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...
Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...
 
Morning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slidesMorning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slides
 
Oxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performanceOxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performance
 
Seo camp day lorraine 2018 - Nancy gregory ambroise
Seo camp day lorraine 2018  - Nancy gregory ambroiseSeo camp day lorraine 2018  - Nancy gregory ambroise
Seo camp day lorraine 2018 - Nancy gregory ambroise
 
Comment transformer la performance web en croissance et conversion utilisateur
Comment transformer la performance web en croissance et conversion utilisateurComment transformer la performance web en croissance et conversion utilisateur
Comment transformer la performance web en croissance et conversion utilisateur
 
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
 

Plus de RESONEO

Optimiser ses campagnes Google Ads avec DataStudio | SMX Paris 2019
Optimiser ses campagnes Google Ads avec DataStudio | SMX Paris 2019Optimiser ses campagnes Google Ads avec DataStudio | SMX Paris 2019
Optimiser ses campagnes Google Ads avec DataStudio | SMX Paris 2019RESONEO
 
Business Case - Allopneus
Business Case - AllopneusBusiness Case - Allopneus
Business Case - AllopneusRESONEO
 
Google Shopping en 2018 : 6 critères pour réussir
Google Shopping en 2018 : 6 critères pour réussirGoogle Shopping en 2018 : 6 critères pour réussir
Google Shopping en 2018 : 6 critères pour réussirRESONEO
 
Content marketing : quelles stratégies pour le SEO en 2018 ?
Content marketing : quelles stratégies pour le SEO en 2018 ?Content marketing : quelles stratégies pour le SEO en 2018 ?
Content marketing : quelles stratégies pour le SEO en 2018 ?RESONEO
 
Case study migration SEO : oui.sncf (seocampus 2018)
Case study migration SEO : oui.sncf (seocampus 2018)Case study migration SEO : oui.sncf (seocampus 2018)
Case study migration SEO : oui.sncf (seocampus 2018)RESONEO
 
Etude de cas Auchan/Resoneo : De l’optimisation de l’achat média à la mesure ...
Etude de cas Auchan/Resoneo : De l’optimisation de l’achat média à la mesure ...Etude de cas Auchan/Resoneo : De l’optimisation de l’achat média à la mesure ...
Etude de cas Auchan/Resoneo : De l’optimisation de l’achat média à la mesure ...RESONEO
 
Optimisation de la conversion : arrêter de tester la couleur des boutons et s...
Optimisation de la conversion : arrêter de tester la couleur des boutons et s...Optimisation de la conversion : arrêter de tester la couleur des boutons et s...
Optimisation de la conversion : arrêter de tester la couleur des boutons et s...RESONEO
 
L’intention de recherche, comment google évolue vers un moteur de réponses
L’intention de recherche, comment google évolue vers un moteur de réponsesL’intention de recherche, comment google évolue vers un moteur de réponses
L’intention de recherche, comment google évolue vers un moteur de réponsesRESONEO
 
Augmentez vos applications avec des bots et progrès de l'IA
Augmentez vos applications avec des bots et progrès de l'IAAugmentez vos applications avec des bots et progrès de l'IA
Augmentez vos applications avec des bots et progrès de l'IARESONEO
 
Le marché actuel et le potentiel du marketing programmatique en Suisse
Le marché actuel et le potentiel du marketing programmatique en SuisseLe marché actuel et le potentiel du marketing programmatique en Suisse
Le marché actuel et le potentiel du marketing programmatique en SuisseRESONEO
 
De site de niche à site d’autorité
De site de niche à site d’autoritéDe site de niche à site d’autorité
De site de niche à site d’autoritéRESONEO
 
Contenu média de l'offre éditoriale à l'offre commerciale
Contenu média de l'offre éditoriale à l'offre commercialeContenu média de l'offre éditoriale à l'offre commerciale
Contenu média de l'offre éditoriale à l'offre commercialeRESONEO
 
Détournez l’e commerce, stimulez le contenu !
Détournez l’e commerce, stimulez le contenu !Détournez l’e commerce, stimulez le contenu !
Détournez l’e commerce, stimulez le contenu !RESONEO
 
Techniques de qualification d’audiences avancées et messages personnalisés
Techniques de qualification d’audiences avancées et messages personnalisésTechniques de qualification d’audiences avancées et messages personnalisés
Techniques de qualification d’audiences avancées et messages personnalisésRESONEO
 
SEO et optimisation de la conversion - RESONEO / SMX France 2011
SEO et optimisation de la conversion - RESONEO / SMX France 2011SEO et optimisation de la conversion - RESONEO / SMX France 2011
SEO et optimisation de la conversion - RESONEO / SMX France 2011RESONEO
 
Parisweb 2010 Web Analytics
Parisweb 2010 Web AnalyticsParisweb 2010 Web Analytics
Parisweb 2010 Web AnalyticsRESONEO
 
Presentation SMX France : comment ne pas devenir un spammeur
Presentation SMX France : comment ne pas devenir un spammeurPresentation SMX France : comment ne pas devenir un spammeur
Presentation SMX France : comment ne pas devenir un spammeurRESONEO
 
Social media, e-reputation & SEO
Social media, e-reputation & SEOSocial media, e-reputation & SEO
Social media, e-reputation & SEORESONEO
 

Plus de RESONEO (18)

Optimiser ses campagnes Google Ads avec DataStudio | SMX Paris 2019
Optimiser ses campagnes Google Ads avec DataStudio | SMX Paris 2019Optimiser ses campagnes Google Ads avec DataStudio | SMX Paris 2019
Optimiser ses campagnes Google Ads avec DataStudio | SMX Paris 2019
 
Business Case - Allopneus
Business Case - AllopneusBusiness Case - Allopneus
Business Case - Allopneus
 
Google Shopping en 2018 : 6 critères pour réussir
Google Shopping en 2018 : 6 critères pour réussirGoogle Shopping en 2018 : 6 critères pour réussir
Google Shopping en 2018 : 6 critères pour réussir
 
Content marketing : quelles stratégies pour le SEO en 2018 ?
Content marketing : quelles stratégies pour le SEO en 2018 ?Content marketing : quelles stratégies pour le SEO en 2018 ?
Content marketing : quelles stratégies pour le SEO en 2018 ?
 
Case study migration SEO : oui.sncf (seocampus 2018)
Case study migration SEO : oui.sncf (seocampus 2018)Case study migration SEO : oui.sncf (seocampus 2018)
Case study migration SEO : oui.sncf (seocampus 2018)
 
Etude de cas Auchan/Resoneo : De l’optimisation de l’achat média à la mesure ...
Etude de cas Auchan/Resoneo : De l’optimisation de l’achat média à la mesure ...Etude de cas Auchan/Resoneo : De l’optimisation de l’achat média à la mesure ...
Etude de cas Auchan/Resoneo : De l’optimisation de l’achat média à la mesure ...
 
Optimisation de la conversion : arrêter de tester la couleur des boutons et s...
Optimisation de la conversion : arrêter de tester la couleur des boutons et s...Optimisation de la conversion : arrêter de tester la couleur des boutons et s...
Optimisation de la conversion : arrêter de tester la couleur des boutons et s...
 
L’intention de recherche, comment google évolue vers un moteur de réponses
L’intention de recherche, comment google évolue vers un moteur de réponsesL’intention de recherche, comment google évolue vers un moteur de réponses
L’intention de recherche, comment google évolue vers un moteur de réponses
 
Augmentez vos applications avec des bots et progrès de l'IA
Augmentez vos applications avec des bots et progrès de l'IAAugmentez vos applications avec des bots et progrès de l'IA
Augmentez vos applications avec des bots et progrès de l'IA
 
Le marché actuel et le potentiel du marketing programmatique en Suisse
Le marché actuel et le potentiel du marketing programmatique en SuisseLe marché actuel et le potentiel du marketing programmatique en Suisse
Le marché actuel et le potentiel du marketing programmatique en Suisse
 
De site de niche à site d’autorité
De site de niche à site d’autoritéDe site de niche à site d’autorité
De site de niche à site d’autorité
 
Contenu média de l'offre éditoriale à l'offre commerciale
Contenu média de l'offre éditoriale à l'offre commercialeContenu média de l'offre éditoriale à l'offre commerciale
Contenu média de l'offre éditoriale à l'offre commerciale
 
Détournez l’e commerce, stimulez le contenu !
Détournez l’e commerce, stimulez le contenu !Détournez l’e commerce, stimulez le contenu !
Détournez l’e commerce, stimulez le contenu !
 
Techniques de qualification d’audiences avancées et messages personnalisés
Techniques de qualification d’audiences avancées et messages personnalisésTechniques de qualification d’audiences avancées et messages personnalisés
Techniques de qualification d’audiences avancées et messages personnalisés
 
SEO et optimisation de la conversion - RESONEO / SMX France 2011
SEO et optimisation de la conversion - RESONEO / SMX France 2011SEO et optimisation de la conversion - RESONEO / SMX France 2011
SEO et optimisation de la conversion - RESONEO / SMX France 2011
 
Parisweb 2010 Web Analytics
Parisweb 2010 Web AnalyticsParisweb 2010 Web Analytics
Parisweb 2010 Web Analytics
 
Presentation SMX France : comment ne pas devenir un spammeur
Presentation SMX France : comment ne pas devenir un spammeurPresentation SMX France : comment ne pas devenir un spammeur
Presentation SMX France : comment ne pas devenir un spammeur
 
Social media, e-reputation & SEO
Social media, e-reputation & SEOSocial media, e-reputation & SEO
Social media, e-reputation & SEO
 

SEO campus 2019 | Les clés d’un site web (beaucoup) plus rapide selon des facteurs qui restent trop souvent oubliés !

  • 1. #seocamp 1 Les clés d’un site (beaucoup) plus rapide selon des facteurs qui restent trop souvent oubliés
  • 4. #seocamp 4 Des visites Sont abandonnées si la page met plus de 3s à se charger *. La WebPerf Oui, mais pourquoi ? De délais Depuis Juillet 2018 53% ● * Source: Google Data, Aggregated, anonymized Google Analytics data from a sample of mWeb sites opted into sharing benchmark data, n=3.7K, Global, March 2016. ● **https://developer.akamai.com/blog/2015/09/01/mobile-web-performance-monitoring-conversion-rate ● ***https://www.searchenginejournal.com/google-ads-updates-mobile-speed-score-for-landing-pages/294401/ 1sec Peut impacter jusqu’à 20% des conversions ** La vitesse de chargement est un critère de ranking pour les recherches mobiles Depuis Aout 2018 Un score de vitesse sur mobile est présent dans Google Ads ***
  • 5. #seocamp 5 Pour qui optimisons nous le site ?
  • 6. #seocamp 6 Pourcentage utilisateurs Desktop Mobile 49% 33% 18% * Source Médiamétrie 2018 : https://www.mediametrie.fr/fr/lannee-internet-2018 en France
  • 7. #seocamp 7 Résolution d’écrans 2018-2019 France 0 2 4 6 8 10 12 14 16 2560x1440 1920x1080 1600x900 1440x900 1366x768 1280x800 375x667 360x640 1,9% > 1920px 1920 pixels c’est le pourcentage d’utilisateurs sur un écran de plus de 1920px de large * Source : http://gs.statcounter.com/screen-resolution-stats/all/france
  • 8. #seocamp 8 Visible dans le “viewport” Mobile Desktop
  • 9. #seocamp 9 Contenu de la page Mobile Desktop
  • 10. #seocamp 10 Pages les plus visitées Trafic bien diffusé Trafic concentré Il s’agit ici des principales pages d’entrées sur le site (pages de destination) Captures : source GA
  • 11. #seocamp 11 Conclusions Pour qui optimisons-nous ? Il faut connaître votre audience et ses usages de VOTRE site pour cibler précisément vos actions d’optimisation. _ Certains sites ont 80% de visites sur Desktop lorsque d’autres l’ont sur Mobile _ En optimisant une page vous pouvez optimiser 75% de votre trafic
  • 13. #seocamp 13 TTFB (Time To First Byte) Le TTFB mesure le temps écoulé entre la requête HTTP d'un client et le premier octet de la page reçu dans le navigateur du client. Les principaux KPI de la WebPerf Speed Index Le Speed Index est un indice de performance qui indique à quelle vitesse le contenu d'une page commence à être visible à l’utilisateur FCP (First Contentful Paint) C’est un critère important car s’est le premier instant où l’utilisateur va voir des éléments s’afficher dans la page TTI (Time To Interactive) Ce critère est très important sur le fait que c’est le temps nécessaire pour que votre utilisateur puisse commencer à interagir avec votre site et votre service Affichage Critique C’est ce que l’internaute va voir à l’écran avant même de pouvoir interagir avec la page. En général ce qui est visible dans le viewport
  • 14. #seocamp 14 Premières pistes d’optimisation
  • 15. #seocamp 15 Lighthouse Un plugin Chrome pour analyser vos web performances (Obtention rapide des KPIs : FCP, Speed Index, TTI,…) Services d’analyse des webperfs Webpagetest Cet outil dispose du Speed Index (le temps moyen à partir duquel la page devient visible à l’utilisateur) Gtmetrix Ce service est rapide et pratique pour se faire une idée sur ses performances sans délais (accès rapide aux poids de page et assets chargés) PageSpeed Insights Un service de Google pour analyser ses performances en version mobile et desktop (First Contentful Paint) Utiliser l’un de ces services tiers pour obtenir des temps de chargement précis Faire ressortir les premières pistes d’optimisations
  • 16. #seocamp 16 Chrome Dev Tool La console de Chrome ou de Firefox vous apporte des informations précieuses en un clin d’oeil 119 images sur 137 assets au total pour charger cette page
  • 17. #seocamp 17 CSS Bien que concaténés et minifies par de nombreux sites, il existe encore de nombreux sites qui font appel à de nombreux fichiers CSS Les 4 pistes fréquentes JS Le nombre de fichiers appelés est très souvent de l’ordre de 35 à 50% Images Les images sont les fichiers qui généralement représentent le nombre de hits et le volume le plus important d’une page Réponse serveur Le temps de chargement du code HTML de votre page est bien souvent trop long. Des ajustements doivent être faits sur votre serveur (amelioration du TTFB,…)
  • 19. #seocamp 19 Quelle taille pour mes images ? 3 points à vérifier 1) Indice : vérifier l’espace occupé par l’image (en responsive) 2) Vérifier l’emplacement alloué (col-md-6 pour 1920px on obtient 960px*) 3) Vérifier la taille de l’image Dans cet exemple, il est probable que l’image qui ne doit occuper que 50% de la largeur de l’écran n’atteigne jamais 1200 pixels Tips : Votre développeur peut tout à fait faire ses appels aux images d’une largeur définie en fonction de la largeur de la colonne cible ! Source : https://www.creative-tim.com/presentation/ * 960 px, c’est 4 fois moins que 1920px !
  • 20. #seocamp 20 Quelle taille pour mes images ? Calcul avec breakpoints multiples Pour un site responsive, la largeur d’affichage des colonnes est variable. Dans certains cas, il faudra communiquer la largeur optimale à votre développeur : col-xs-12 : largeur max 576px col-sm-6 : largeur max 768px / 2 = 384px col-md-6 : largeur max 992 / 2 = 496px col-lg-6 : largeur max 1200 / 2 = 600px col-xl-4 : largeur max 1920 / 4 = 480px Il faudra donc tenir compte de ces largeurs pour fournir vos dimensions idéales surtout si vous utilisez les markups d’images responsive
  • 21. #seocamp 21 Des images adaptées à mon audience Nous avons vu que seul 1,9% de nos visiteurs disposent d’un écran d’une taille supérieure à 1920px de large Si votre audience est de 75% sur mobile vous pourrez tout à fait adapter ces chiffres Mis à part pour des sites d’images, vous ne devriez jamais opter pour des images d’une dimension supérieure à 1920px * Source : http://www.actea-consulting.fr/assurance-sur 3159x2106 px
  • 22. #seocamp 22 Des images optimisées LossLess Notre image de 3160px de large une fois compressée permet un gain de 82% Notre image de 3160px réduite à 1920px de large puis compressée permet un gain de 93% * Source : https://www.imagerecycle.com/ Tips : Optimiser les images à l'aide d'une librairie de compression (Google fournie lui-même une librairie open source : Guetzli)
  • 23. #seocamp 23 Des images adaptées au responsive 2 intégrations possibles La balise « Picture » et La balise image avec un attribut « srcset » L’utilisation de « srcset » étant plus simple à mettre en place Chacune des 2 méthodes n’est cependant pas 100% compatible avec tous les navigateurs, mais les 2 profitent d’un dégradé progressif sur l’attribut « src » Tips : Il est tout à fait possible de lazy- loader vos images responsives. Vous emploierez l’attribut : data-srcset
  • 24. #seocamp 24 Lazy-loader mes images Seules les images de l’encadré sont visibles dans le viewport Il conviendra de toujours charger les suivantes en asynchrone et seulement lorsque l’image sera à proximité immédiate du viewport. Tips : Vous pouvez lazy-loader toutes les images <img/> et images de fond * Source : http://www.mikiyakobayashi.com/projects
  • 25. #seocamp 25 Lazy-loader mes images de fond * Source : http://www.hellothierry.com Voici 2 exemples de scripts compatibles avec la gestion du lazy-loading des images de fond : Lazy-loading de Mika Tuupola : l'un des scripts les plus anciens et aboutis sur cette problèmatique : https://appelsiini.net/projects/lazyload/ Lazysizes de Alexander Farkas : Un script plus récent qui permet aussi le lazy-loading d'autres éléments (expl. : iframes et vidéos) : https://github.com/aFarkas/lazysizes <div class="lazyload" data-src="original.jpg" />
  • 26. #seocamp 26 Lazy-loader mes images de fond responsive En ce qui concerne les images de fond, il n’y a pas encore de solution efficace ! Il y a bien des tentatives : image-set Mais c’est encore mal supporté * Source : https://caniuse.com/#search=image-set Une piste de solution ? Untested
  • 28. #seocamp 28 Le chargement du JavaScript Synchrone : <script src="…"></script> Les fichiers sont téléchargés au fur et à mesure de la lecture du code HTML par le navigateur Le navigateur attends que le fichier soit téléchargé pour continuer à télécharger le reste de la page ! Cela va retarder l’affichage de votre page et avoir une incidence négative sur tous vos KPI de performances Source : https://bitsofco.de/async-vs-defe
  • 29. #seocamp 29 Le chargement du JavaScript Asynchrone : L’attribut “ASYNC” ASYNC semble être un attribut plus souple (et c'est surtout plus récent) car il n'attendra pas que le DOM soit chargé pour être appliqué. Néanmoins il faut savoir que si vous avez plusieurs scripts Async à télécharger, les scripts seront executés dès lors qu'ils seront disponibles ! L'ordre ne sera pas préservé, il n’y a pas de respect des dépendances ! Pour 2 scripts « ASYNC » successifs, si le premier contient des fonctions et le second y fait appel, on pourra se retrouver dans la situation ou l’appel des fonctions sera fait avant que nous les ayons téléchargées
  • 30. #seocamp 30 Le chargement du JavaScript Asynchrone : L’attribut “DEFER” On sera alors peut-être tenté d'utiliser DEFER à la place, mais attention ! Les scripts ne seront exécutés qu'après le chargement complet du HTML Si les scripts ont un effet sur le style d'un bloc de page, il faudra s'assurer que le contenu visible de ce HTML est bien rendu correctement à l'aide des CSS (utilisation du progressive enhancement) sous peine de voir un saut de page des éléments (FOUC, flash of unstyled content). Bonus : L’ordre des scripts est préservé avec « DEFER »
  • 31. #seocamp 31 Le chargement du JavaScript En bas de page : Avant la fermeture du </body> L’utilisation des attributs « Async » ou « Defer » devient alors obsolète car le DOM est déjà chargé Vous pouvez télécharger vos scripts en bas de code seulement si ces derniers n’ont pas d’incidence sur l’affichage Vous perdez néanmoins un temps précieux de téléchargement en parallèle du code HTML Inlining des petits scripts Lorsque des scripts sont suffisamment petits (< 5kos), et que d’autres scripts peuvent dépendre de ce dernier, il peut s’avérer nécessaire d’ « inliner » ce fichier (inclure le code directement dans votre HTML)
  • 32. #seocamp 32 Le chargement du JavaScript Exemple d’intégration
  • 33. #seocamp 33 N’inclure que le nécessaire jQuery UI Supprimer les extensions inutiles Ne cochez pas toutes les extensions lors du téléchargement. Il ne faut prendre que le strict necessaire ! Source : https://jqueryui.com/download/
  • 34. #seocamp 34 N’inclure que le nécessaire Bootstrap Supprimer les extensions inutiles Ne cochez pas toutes les extensions lors du téléchargement. Il ne faut prendre que le strict necessaire ! C’est valable pour les fichiers JS comme pour le CSS Source : https://getbootstrap.com/docs/3.4/customize/ La dernière version de Bootstrap incluant toutes les fonctionnalités pèse 153kos minifiée Les CSS de grille Bootstrap n’en pèse que 48kos Mais il faut aussi faire du ménage dans ce dernier par rapport à vos besoins ! (https://getbootstrap.com/docs/4.3/getting-started/download/ )
  • 35. #seocamp 35 Supprimer ou différer le chargement de vos scripts Filtrer puis trier les assets chargés pour cibler vos efforts sur les fichiers les plus volumineux A l’aide de la console, vous pouvez voir rapidement les fichiers les plus volumineux pour cibler les actions qui vont vous faire gagner le plus de poids
  • 36. #seocamp 36 Astuce WordPress Reprenez le contrôle du chargement de vos fichiers De simples fonctions existent pour vous permettre de supprimer et réordonner le chargement de vos fichiers JS dans vos templates WordPress
  • 37. #seocamp 37 Le progressive Enhancement Comprendre le principe d’amelioration progressive et son effet sur la vélocité de notre affichage Exemple du “carousel” Prenons l’exemple du carousel et décrivons les étapes de chargement des fichiers pour faire en sorte de parvenir à l’affichage désiré L’amélioration progressive est une manière de concevoir un site web qui prend très largement en compte l'accessibilité, la sémantique et le référencement. En séparant strictement le fond (le contenu proposé à l'utilisateur) et la forme (l'enjolivement et les interactions avancées), cette technique permet de présenter un contenu simple et de rendre un service minimum à tous les utilisateurs, quel que soit le débit de leur connexion ou leur navigateur, tout en améliorant progressivement l'affichage proposé en fonction de l'équipement de l'internaute. * Source : https://fr.wikipedia.org/wiki/Am%C3%A9lioration_progressive
  • 38. #seocamp 38 Le progressive Enhancement Etape 1 Afficher les premières images mises en forme à l’aide de quelques lignes de CSS et adaptées à la taille de l’écran Télécharger 3 images et le CSS correspondant
  • 39. #seocamp 39 Le progressive Enhancement Etape 2 Afficher les boutons Next / Prev Et les puces en bas de slider Télécharger les images des flèches et les fichiers JS et CSS permettant le bon fonctionnement et affichage du slider
  • 40. #seocamp 40 Le progressive Enhancement Etape 3 Il faut maintenant preparer le chargement des images suivantes qui ont été lazy-loadées Télécharger les images à l’aide de votre script de lazy-loading
  • 41. #seocamp 41 Le progressive Enhancement Etape 4 Si vous voulez permettre aux internautes de faire glisser les images à l’aide du scroll de la souris Télécharger le fichier JS de scroll de souris (https://github.com/jquery/jquery- mousewheel)
  • 42. #seocamp 42 Le progressive Enhancement Etape 5 Si vous voulez permettre aux internautes de faire glisser les images à l’aide du doigt sur leur écran mobile Télécharger le fichier JS de “swipe” sur écran tactile
  • 43. #seocamp 43 Le progressive Enhancement En rouge les fichiers qui ne ralentissent pas l’affichage Des économies non négligeables pour un affichage critique beaucoup plus rapide • Moins de poids • Moins de hits en chargement synchrone 40kos 4kos 3kos 15kos 40kos 40kos 40kos
  • 44. #seocamp 44 Le progressive Enhancement J’utilise ASYNC, il faut donc faire attention aux dépendances 62kos 40kos 40kos 40kos
  • 45. #seocamp 45 Améliorations usuelles du JavaScript Quelques efforts usuels • Minification • Compression des fichiers (gzip, à appliquer par le server lors de l’envoie de vos fichiers) • Concaténation des fichiers (si vous servez vos fichiers en protocole HTTP/1 (ce n’est pas nécessaire en HTTP/2)
  • 46. #seocamp 46 Autres fichiers qui méritent votre attention Les fonts Les fichiers de fonts sont des fichiers qui peuvent ralentir de façon significative votre chargement de page. Vous pouvez opter pour un chargement asynchrone de vos fonts. Google et Typekit ont codéveloppé un script pour vous aider en ce sens Web Font Loader Repo Github : https://github.com/typekit/webfontloader
  • 47. #seocamp 47 Autres fichiers qui méritent votre attention Les fonts ATTENTION au FOUT Flash Of Unstyled Text Le FOUT, c’est ce moment ou vous obtenez un texte qui n’est pas encore stylé par vos fonts et qui le devient après chargement Aussi, attention à ne charger vos fonts en asynchrone que si ces dernières sont relativement rapides à charger Opter pour des fonts légères Source : https://fonts.google.com/
  • 48. #seocamp 48 Autres fichiers qui méritent votre attention Les icons fonts Les librairies de font d’icônes sont très pratiques pour raccourcir les temps d’intégrations pour afficher vos icônes Cela a néanmoins un coût non négligeable !!! Si vous ne prenez pas garde, vous pourriez charger des fichiers volumineux de CSS, JS et de galeries icônes que vous utiliserez ! Privilégiez l’utilisation de versions SVG de ces librairies d’icônes Utiliser des SVG inline Créer ses propres pack de SVG Par exemple ICOMOON APP permet de choisir ses icons parmi les fonts les plus utilisées (Fontawesome, Material,…
  • 49. #seocamp 49 Optimisation de la réponse serveur
  • 50. #seocamp 50 Pourquoi des Réponses serveur lentes ? L’internaute demande une page, le serveur analyse la demande et envoie la réponse Une requête traditionnelle Ce qui se passe réelement : Le server intercepte la demande, interprête les scripts, fait appel à la base de données pour obtenir les informations puis delivre la page La même requête en détails A chaque affichage, le serveur va effectuer le calcul de tous les scripts nécessaires à afficher la page. Il va de plus faire de nombreuses requêtes à votre serveur de base de données Lorsque vous expérimentez un pic de trafic, le serveur va donc avoir du mal à effectuer tous les calculs et accès en BDD
  • 51. #seocamp 51 Quelle solution : mise en place d’un cache La mise en cache sous forme de plugins : Wordpress WP Super Cache Un plugin de cache développé et maintenu par l’équipe derrière Wordpress.com WP Rocket Un plugin “premium” reconnu des experts Lorsque les pages sont en cache, le serveur n’a plus besoin d’effectuer les calculs et appels en base de données Vous allez donc normalement améliorer de façon significative le TTFB
  • 52. #seocamp 52 Quelle solution : mise en place d’un cache La mise en cache par un service SAAS : Cloudflare Source : https://support.cloudflare.com/hc/fr-fr/articles/200172256-Comment-mettre-en-cache-du-contenu-HTML-statique- Cloudflare s’intercale entre votre utilisateur et votre serveur, ce qui diminue les risques de surcharge Cloudflare permet de servir vos assets depuis ses propres serveurs au plus proche de votre utilisateur (principe du CDN) Il peut dans certains cas mettre en cache vos pages HTML
  • 53. #seocamp 53 Quelle solution : mise en place d’un cache La mise en cache par un serveur de cache : Varnish Source : https://fr.wikipedia.org/wiki/Proxy_inverse Varnish fonctionne en interceptant les requêtes avant qu’elles ne parviennent à votre serveur (que votre serveur soit sous Apache, Nginx ou autre...) Il ne transmet les requêtes au serveur applicative que s’il ne dispose pas d’un cache valide. Il permet ainsi de soulager énormément votre serveur applicatif Attention néanmoins, Varnish (Open source) ne sait gérer que des requêtes HTTP, il faudra prévoir des développements supplémentaires pour servir vos pages en HTTPS
  • 54. #seocamp 54 Quelle solution : mise en place d’un cache La mise en cache par un serveur de cache : Varnish L'utilisation des ESI : L'équivalent d'include plus dynamiques pour servir des portions de pages avec une période de cache différente (utile dans le cas où vous devez fournir des informations sensibles susceptibles d’évoluer sur une courte période de temps) https://varnish- cache.org/docs/3.0/tutorial/esi.html Il est possible d’utiliser 2 fonctionnalités de Varnish pour améliorer vos règles de mise en cache L'utilisation du "Grace mode“ : Donner une valeur “Grace mode” positive à un objet indique à Varnish qu’il doit proposer le cache un certain temps après l’expiration du TTL (Cela pendant que Varnish rafraichi son cache) https://varnish-cache.org/docs/trunk/users-guide/vcl- grace.html TTL, indique le temps pendant lequel une information doit être conservée
  • 55. #seocamp 55 Votre cache est-il efficace ? La question qu’on ne se pose pas assez souvent ! Mon cache n’est efficace que si les délais de mise en cache sont suffisants Si votre cache dure 30 minutes mais que votre page n’est consultée qu’une fois toutes les 2 heures, votre cache ne sera jamais utilisé !!! Il conviendra d’étudier vos logs pour connaître la fréquence de consultation de vos pages. Vous pourriez procéder par template… - Pages categories - Pages articles - … Exemple : Les pages dont les entêtes HTTP de réponses sont en MISS ne sont pas servies par votre serveur de cache Test effectué à l’aide de : SEO Tools For Excel Sur une liste d’URL dans Excel Fonction : =HttpHeader(A2,"X-Cache") Source : https://seotoolsforexcel.com/httpheader/
  • 56. #seocamp 56 Question Mug ● Qu’est-ce que l’inlining ?