Conférence sur le SEO technique que j'ai donné au SEO'Campus Paris 2018.
- Performance et temps de chargement
- Crawl et rendu par Googlebot
- HTTPS et sécurité
- Schema.org et implémentation
6. 6#seocamp@LoukilAymen
La perception de l’attente
0 100ms 300ms 1000ms
10.000ms
Smooth Petit délai Tâche
normale
Perte de
focus
Frustration
3s : la conversion chute
7. 7#seocamp@LoukilAymen
Le web est il rapide ?
13s
50%
20s 31s
25% 10%
Time To Interactive (Mobile) - Janvier 2018
Source http://beta.httparchive.org/reports/loading-speed
11. 11#seocamp@LoukilAymen
Moyenne des connexions 3G/4G
France 14 Mbps
Denmark 24.41 Mbps
Japan 22 Mbps
Belgique 20 Mbps
Suisse 18.5 Mbps
State of Mobile Networks https://opensignal.com
USA 12.5 Mbps
13. 13#seocamp@LoukilAymen
La différence de matériel peut être mortelle
https://medium.com/dev-channel/the-cost-of-javascript-84009f51e99e
Parsing JS :
4s sur un iPhone 8 (800€)
Vs
14s sur un Motorolla G4 (200€)
19. 19#seocamp@LoukilAymen
Splitter le code
- Uniquement ce qu’il faut / page
- On réduit le volume et donc le temps.
Sur wordpress regarder :
wp_enqueue_script et is_home()
27. 27#seocamp@LoukilAymen
JavaScript est une ressource bloquante
Pour chaque code JS, le navigateur bloque la construction de la page (rendu)=> ++délai
<script src="app.js" async></script>
JS essentiels en Async (exécution en fin de téléchargement)
JS non-essentiels en Defer (exécution en fin de parsing du document)
<script src="app.js" defer></script>
29. 29#seocamp@LoukilAymen
CSS est une ressource bloquante
Utilisez la propriété media
1- <link href="style.css" rel="stylesheet"> Bloque le rendu
2- <link href="style.css" rel="stylesheet" media="all"> Bloque le rendu
3- <link href="portrait.css" rel="stylesheet" media="orientation:portrait"> Ne bloque pas
4- <link href="print.css" rel="stylesheet" media="print"> Ne bloque pas le rendu
30. 30#seocamp@LoukilAymen
Prioriser le CSS critique
1. Installer CasperJS : http://casperjs.org/ (Node.js)
2. Télécharger ce script :
https://github.com/ibrennan/automation/tree/master/content/critical-css
3. >casperjs app.js pour l’exécuter
4. Répondre aux questions
5. Copier le code CSS sorti et le coller en inline avant l’inclusion des fichiers de style
47. 47#seocamp@LoukilAymen
Et le rendu ?
Comment Google voit-il mon site ?
- Fetch as Google (Search Console)
- Google Cache
- Se mettre dans la peau de Google ?
60. 60#seocamp@LoukilAymen
Ce contenu mérite il une URL ?
Posez vous la question avant de créer une nouvelle URL sur votre site :
- Les tags ?
- Les variants de produits ?
- Un testimonial ? (3 lignes)
- Storelocator listing / items..
63. 63#seocamp@LoukilAymen
Analysez vos logs
● Les pages crawlées / non crawlées
● L’évolution de l’activité de Googlebot
● Les TOP pages crawlées (souvent des surprises)
● Les pages avec erreurs
● Les pages instables (parfois HTTP 200 parfois en erreur)
● Des pages non intéressantes et souvent crawlées (perte du budget)
● Des ressources gourmandes (css, js, Zip) et pas nécessaires au rendu ?
● Les pages lentes ?
● Les bots qui ne sont pas bienvenues (spam, scrap)
● MFI ?
Croiser avec Analytics et d’autres données
73. 73#seocamp@LoukilAymen
Utilisez les headers
● Strict-Transport-Security (HSTS) : Browser => Toujours en HTTPS (MiTM attack)
● Content-Security-Policy (CSP)2016 : Quels type de contenus sont autorisés (XSS, vol de données,
malware..etc)
-> Content-Security-Policy: default-src ‘self’; img-src site1.com site2.com; scripts-src googleapis.com
jquery.com
● X-Frame-Options : Ne pas autoriser l’iframing du site (clickjacking)
● X-Content-Type-Options : Détecter un mismatch de type de contenu (malware)
https://discuss.httparchive.org/t/adoption-of-http-security-headers-on-the-web/1259
75. 75#seocamp@LoukilAymen
Être Machine-readable, c’est l’opportunité
« Schema.org rend ton site plus machine-readable:
Compréhensible par Google, Il devine facilement ce que tu y raconte.
Il peut donc proposer des résultats mieux formatés et plus adéquats
avec le contexte de la recherche. »