1. 1#seocamp@LoukilAymen
SEO Technique : Tips & Tricks
Actionnables pour 2018
Aymen Loukil

2. 2#seocamp@LoukilAymen
Aymen Loukil
#TechnicalSEO #entrepreneur #semanticweb #speaker #ex-développeur
Consultant SEO International
https://www.aymen-loukil.com @LoukilAymen

3. 3#seocamp@LoukilAymen
Performance
Les must-have Technical SEO 2018
Rendering & Crawl Sécurité Schema.org

4. 4#seocamp@LoukilAymen
#perfmatters

5. 5#seocamp@LoukilAymen
Imaginez..
30min à la porte du magasin
10min pour pouvoir changer de rayon
7min pour pouvoir toucher un produit

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

8. 8#seocamp@LoukilAymen
Qu’est ce qui coûte ?
Parse Compile ExecuteDownload
Réseau Matériel (processeur, mémoire)

9. 9#seocamp@LoukilAymen
“En performance, la taille
(du code) compte”

10. 10#seocamp@LoukilAymen
“Le nombre de requêtes
compte aussi”

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

12. 12#seocamp@LoukilAymen
Un peu de réseau
Une page web en moyenne : 3.6Mb*
3.6 Mb
14 Mbps
= 25s
16s(Japan)

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€)

14. 14#seocamp@LoukilAymen

15. 15#seocamp@LoukilAymen
Vous en avez vraiment besoin ?
- CTR ?
- Utilisé ?
- Faire autrement ?
- L’animation vitale ?
- AB test ?

16. 16#seocamp@LoukilAymen
Coverage : code non utilisé
50% du code
n’est pas utilisé
[1.4MB potentiel
à gagner]* ctrl+shift+p [win]

17. 17#seocamp@LoukilAymen
Alléger le code
Code non exécuté
Code exécuté
Une revue du code est nécessaire*

18. 18#seocamp@LoukilAymen
Automatiser code coverage
https://www.npmjs.com/package/page-coverage
- Check systématique
- Release
- QA

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()

20. 20#seocamp@LoukilAymen
Et les scripts externes ?
Third party badges

21. 21#seocamp@LoukilAymen
Bloquer le chargement d’une ressource

22. 22#seocamp@LoukilAymen
Comparer
https://developers.google.com
Les scripts externes [non maitrisés] peuvent dégrader la performance

23. 23#seocamp@LoukilAymen
Faire autrement, plus light
vanilla-js.com
35X plus rapide que jQuery

24. 24#seocamp@LoukilAymen
JS est le plus coûteux des ressources
38 fois plus coûteux qu’un JPEG

25. 25#seocamp@LoukilAymen
Optimiser le chemin critique
Donner en priorité ce qui est nécessaire au premier print et la ligne de flottaison
CC optimisé
CC non optimisé

26. 26#seocamp@LoukilAymen
Les ressources chargées avant le rendu
Faites le tri dans les ressources en vert
https://www.webpagetest.org/

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>

28. 28#seocamp@LoukilAymen
Async, Defer

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

31. 31#seocamp@LoukilAymen
Mettre en place AMP
= Rapide ?

32. 32#seocamp@LoukilAymen
Page web

33. 33#seocamp@LoukilAymen
Avec AMP

34. 34#seocamp@LoukilAymen
AMP n’est rapide qu’à partir de la SERP

35. 35#seocamp@LoukilAymen
Pardon ?

36. 36#seocamp@LoukilAymen
Utilisez les “Resource Hints”
https://w3c.github.io/resource-hints/

37. 37#seocamp@LoukilAymen
rel=”prefetch”

38. 38#seocamp@LoukilAymen
Quelle serait la next page ?
https://github.com/SamKnows/futurelink

39. 39#seocamp@LoukilAymen
DNS ASAP

40. 40#seocamp@LoukilAymen
Passez en HTTP/2
HTTP/1.1 HTTP/2
Open
Close
Open
Close
T T
Benefits :
● Multiplexing
● Header compression
● Better prioritization
● Server push

41. 41#seocamp@LoukilAymen
Compression d’images
Caesium :
https://saerasoft.com/caesium/
- Choisir le pourcentage de
compression
- Version Desktop
- Version CLI
25% d’une image est inutile (HTTPArchive)

42. 42#seocamp@LoukilAymen
Métriques : FP, FCP, FMP, TTI
https://developers.google.com/
ça arrive ?
c’est utile ?
c’est utilisable ?

43. 43#seocamp@LoukilAymen
La console Chrome : your friend

44. 44#seocamp@LoukilAymen
Lighthouse - Outil de diagnostic
Score performance > 90 - 5% des top

45. 45#seocamp@LoukilAymen
Automatiser vos rapports
https://github.com/GoogleChrome/lighthouse
$ npm install -g lighthouse
$ lighthouse --perf https://paris.seo-campus.org
$ lighthouse --output-path=./report.json --output json

46. 46#seocamp@LoukilAymen
Rendering & Crawl

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 ?

48. 48#seocamp@LoukilAymen
Googlebot M41

49. 49#seocamp@LoukilAymen
Polyfill et Feature detection

50. 50#seocamp@LoukilAymen
Puppeteer : Chrome-Sans-tête
https://github.com/GoogleChromeLabs/puppeteer-examples

51. 51#seocamp@LoukilAymen
Détecter des features non supportées par G
https://caniuse.com

52. 52#seocamp@LoukilAymen
Headless Chrome Crawler
https://github.com/yujiosaka/headless-chrome-crawler

53. 53#seocamp@LoukilAymen
Et le JavaScript ?
- Contenu visible ?
- Erreurs JS

54. 54#seocamp@LoukilAymen
Détecter des erreurs JS + remote report

55. 55#seocamp@LoukilAymen
Groupe pour JS SEO
https://groups.google.com/forum/#!forum/js-sites-
wg
Groupe Google autour du SEO JS

56. 56#seocamp@LoukilAymen
Dette technique SEO

57. 57#seocamp@LoukilAymen
Harder crawling, complexity
@dawnieando

58. 58#seocamp@LoukilAymen
Consistance SEO

59. 59#seocamp@LoukilAymen
Signaux en conflit
Canonical = A
Hreflang = B
Sitemap = B
B=>C
301
dev.site.com
www.site.com
Robots.txt disallow
Meta : index,
follow

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

61. 61#seocamp@LoukilAymen
Qualité >>> Quantité
#noindex
#cleaning
#lessismore
#410Gone
#Disallow
#Prune

62. 62#seocamp@LoukilAymen
Et le budget de crawl ?

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

64. 64#seocamp@LoukilAymen
Économiser un peu de budget
Pages indexées mais pas les plus importantes
Ressources ..
If-Modified-Since

65. 65#seocamp@LoukilAymen
MFI : L’ordre du contenu

66. 66#seocamp@LoukilAymen
Securité

67. 67#seocamp@LoukilAymen
HTTPS

68. 68#seocamp@LoukilAymen
Chasse au HTTP

69. 69#seocamp@LoukilAymen
Contenus mixtes
Tab : Security
Tab : Console JS

70. 70#seocamp@LoukilAymen
On va checker à la main toutes les pages !

71. 71#seocamp@LoukilAymen
Reporting des erreurs HTTPS
Content-Security-Policy-Report-Only: default-src https: 'unsafe-inline'
'unsafe-eval'; report-uri https://votrEndpointDeReporting.com/report*
Ajouter ce header dans vos réponses serveur :
JSON

72. 72#seocamp@LoukilAymen
HTTPS Headers
https://www.cspisawesome.com/

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

74. 74#seocamp@LoukilAymen
Schema.org

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. »

76. 76#seocamp@LoukilAymen
Entity first indexation
“First part of query analysis is looking for
entities” 2016 #SMX

77. 77#seocamp@LoukilAymen
Schema.org n’est pas une mode

78. 78#seocamp@LoukilAymen
Google Images / Product

79. 79#seocamp@LoukilAymen
ItemList

80. 80#seocamp@LoukilAymen
Schema/NewsArticle
Schema/NewsArticle
Schema/Organization

81. 81#seocamp@LoukilAymen
Maîtrise des informations produits
Schema/Product
Schema/Car
Schema/AggregateRating

82. 82#seocamp@LoukilAymen
Schema/Recipe

83. 83#seocamp@LoukilAymen
Schema/VideoObject
Schema/BreadcrumbList
Schema/Product
Schema/AggregateRating

84. 84#seocamp@LoukilAymen
Schema/Course

85. 85#seocamp@LoukilAymen
JobPosting
Schema/JobPosting

86. 86#seocamp@LoukilAymen
LiveBlogPosting
https://plus.google.com/u/0/+GoogleDevelopers/posts/UMFfemnynCg

87. 87#seocamp@LoukilAymen
Schema.org/ClaimReview
Schema/ClaimReview

88. 88#seocamp@LoukilAymen
Schema.org/Question / acceptedAnswer

89. 89#seocamp@LoukilAymen
Dernière version 3.3
HowTo
NewsArticle
TouristType, TouristAttraction

90. 90#seocamp@LoukilAymen
Yandex et Schema

91. 91#seocamp@LoukilAymen
Apple et Schema
Schema:Name
Schema:Price
Schema:AggregateRating
Schema:Description
Schema:reviewCount

92. 92#seocamp@LoukilAymen
Bing supporte enfin le JSON-LD !

93. 93#seocamp@LoukilAymen
Process d’implémentation Schema.org
Types
definition
Playground
& test
Check &
validate
Implementation Monitoring

94. 94#seocamp@LoukilAymen
Définition des types
Home
Editorials E-commerce Store Locator AgendaAuthors Careers

95. 95#seocamp@LoukilAymen
Définition des types
Home
Editorials E-commerce Store Locator AgendaAuthors
Article
NewsArticle
Blogposting
QAPage
Person
Organization
Product
Offer
AggregrateRating
ItemList
CheckoutPage
LocalBusiness
Organization
Address
Event
BusinessEvent
SaleEvent
MusicEvent
….
Careers
JobPosting
Website
Organization
SearchAction

96. 96#seocamp@LoukilAymen
Implémentation custom
{
"@context":"http://schema.org",
"@type": "Product",
"description": "...",
"name": « iPhone 8”,
"image":« iphone-8.jpg,
"offers": {
"@type": "Offer",
"price": « 850.00",
"priceCurrency": "EUR"
}
Framework PHP open source
API Rest
Data Model Schema.org
ORM
On peut personnaliser / créer des
types
Basé sur Symfony
https://api-platform.com/

97. 97#seocamp@LoukilAymen
Modèle de données sur Schema.org
Se baser sur Schema.org pour générer votre modèle de données métier

98. 98#seocamp@LoukilAymen
Tester la #Dev
Localhost

99. 99#seocamp@LoukilAymen
Schema.org pour E-commerce
Product
• Name
• Brand
• Price
• Availability
• ItemCondition
• Color
• gtinX
• Logo
• Material
• Offers
• SKU
• AdditionalType
• IsRelatedTo
• IsSimilarTo
• isAccessoryOrSparePartFor

100. 10
0#seocamp@LoukilAymen
additionalType et ProductOntology
http://www.productontology.org/
● Permet de donner plus de précision sur l’objet (produit ou
autre)
● Se baser sur les classes Wikipédia
http://en.wikipedia.org/wiki/Hammer
http://www.productontology.org/id/Hammer

101. 10
1#seocamp@LoukilAymen
AdditionalType
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Product",
"additionalType": "http://www.productontology.org/id/Racing_bicycle",
"name": "Moto R1",
"offers":{
"@type": "Offer",
"availability": "http://schema.org/InStock",
"serialNumber": "CONC91000937",
…
}
}
</script>

102. 10
2#seocamp@LoukilAymen
GS1 + Schema

103. 10
3#seocamp@LoukilAymen
Agilisez le SEO
Transformer l’organisation
- Casser les SILOS
- Cross-discipline
- Spirit de performance
- Communication
- KPIs
- Test & learn

104. 10
4#seocamp@LoukilAymen
Des mois d’attente..

105. 10
5#seocamp@LoukilAymen
Pour éviter ça..

106. 10
6#seocamp@LoukilAymen
Make User Experience great again
“Let’s stop chasing the content train and get back to
making experiences that perform.”
Michael King(ipullrank)

107. 10
7#seocamp@LoukilAymen
Question Mug
“Quelle est la ressource hint la plus adaptée
pour charger plus rapidement la prochaine page
que l’utilisateur va visiter? ”

108. 10
8#seocamp@LoukilAymen
Merci !
Continuons la discussion : @LoukilAymen
#TechnicalSEO2018

109. 10
9
#seocamp
MERCI AUX SPONSORS