Présentation de Mathieu Chartier durant l'événement en ligne SEMrush : 3 heures de SEO technique | 6 sessions consécutives

2. Mathieu
Chartier
Techniques de référencement
web - 4e édition
11/02/2021
Formation_web

3. Performance web : que du
bonus ?
Optimiser un site ou une application web n’est pas qu’une affaire de SEO…
SEO
UX et performance
comptent faiblement dans
les critères de pertinence
de Google et Bing
UX
La performance web
impacte positivement sur
la qualité web, la
fidélisation et l’utilisabilité
CONVERSION
40% des consommateurs
peuvent quitter un site
qui met plus de 3
secondes à se charger
ECOLOGIE
Créer des pages rapides et
légères (éco-conception)
nuance l’impact écologique
du Web
Ne pas confondre performance web et vitesse de chargement. La performance englobe des
notions d’UX, la vitesse brute ne se suffit pas à elle-même et depend de mutiples critères
extérieurs (serveurs, qualité de connexion, heure de vitesse…)

4. Focus sur
l’éco-conception
Selon HTTPArchive.orgle poids moyen
d’une page web en 2020 est 4 fois plus
élevé qu'en 2010.
1 requête sur Google = 7 g de CO²
18 requêtes = 1 km pour une voiture diesel (5L/100km)
https://www.websitecarbon.com
La page d’accueil de YouTube rejette
1,73g de CO² par visite. C’est environ
208kg d’équivalent CO² rejetés dans
l’atmosphère pour 10000 visites.
10 arbres par an pour absorber cette
quantité.
3 092 kilomètres d’électricité utile pour
une voiture électrique.

5. Aux origines du
Pagespeed
05/2011 : suivi des temps de chargement dans Google Analytics
10/2013 : creation de Pagespeed Insights
01/2015 : distinction entre les critères de vitesse et d’utilisabilité
01/2018 : prise en compte du score Chrome User Experience
11/2018 : reprise des critères de Lighthouse
05/2020 : integration des critères UX de Core Web Vitals
Google intègre dès avril
2010 un critère de vitesse
(faible) dans son
algorithme de pertinence
(https://bit.ly/36hRYMa)

6. Des outils
de test
De nombreux outils permettent
de tester la performance web ou
la vitesse de chargement des
pages en direct.
Pagespeed Insights
Write Title
Pagespeed Insights
Web.dev
Lighthouse (Chrome/Firefox)
WebPageTest
GT Metrix
Dareboost
Pingdom

7. Analyser en 3G/4G
Nombre de requêtes
Poids de la page (total/chargé)
Temps de chargement du DOM < 2 secondes
Temps de chargement du Load < 5 seconds
Temps total

8. <<<<<<<<<<<<<<
chargement des
ressources,
asynchronisme…
Technique web
Au-delà des considerations UX des critères de Core Web Vitals, les bonnes
performances web résultent de multiples optimisations conjointes.
3 grandes familles de facteurs clés
pour optimiser la performance web
Optimisation
du
Code
<<<<<<<<<<<<<<
nombre de requêtes,
compression des fichiers
(medias/codes), sprite CSS…
Gestion des médias
<<<<<<<<<<<<<<
.htaccess ou configuration
cache, compression,
module Pagespeed…
Hébergement
Optimisation
du
Serveur
Optimisation
du
Poids

9. Apache, Nginx, IIS…
Optimisation
du serveur
Module Pagespeed (Apache)
Configuration côté serveur
Configuration .htaccess
(Apache) ou web.config (IIS)
mod_expires
mod_headers
mod_deflate
mod_mime
<IfModule mod_headers.c>
<FilesMatch ".(ico|jpe?g|png|gif|swf|css|gz|js)$">
Header set Cache-Control "max-age=31536000, public"
</FilesMatch>
<FilesMatch ".(ttf|otf|woff|woff2|svg|eot)$">
Header set Cache-Control "max-age=31536000, public"
</FilesMatch>
<filesMatch ".(html|htm)$">
Header set Cache-Control "max-age=86400, public"
</filesMatch>
<FilesMatch ".(pl|php|cgi|spl|scgi|fcgi)$">
Header unset Cache-Control
</FilesMatch>
</IfModule>

10. Chaque kilo-octet compte pour
grappiller de la performance…
FileOptimizer
Sprites CSS
Utilisation de formats récents (webp, jpeg XR…)
Compression de toutes les ressources (cjpeg…)
Réduction du nombre de fichiers
Usage de sprites CSS ou polices d’icônes
Usage de CDN ou sites externes (HTTP/2)
Optimisation
du poids
Images
Javascript
HTML
Inline CSS

11. Le code est à la source et de lui
depend tout chargement…
Lazy Loading
Préchargement (preload)
Chargements asynchrones
Lazy Loading (chargement continu)
Variantes d’images (responsive)
Préchargement des ressources utiles
Hébergement des polices de caractères
Trop-plein de boucles, code lourd, d’erreurs…
Optimisation
du code
Async/Defer
Promesses
Preload
Prefetch
srcset

12. blog.internet-formation.fr
www.mathieu-chartier.com
MERCI