![16#seocamp@LoukilAymen
Coverage : code non utilisé
50% du code
n’est pas utilisé
[1.4MB potentiel
à gagner]* ctrl+shift+p [win]](https://image.slidesharecdn.com/technicalseotipstricks-aymenloukil-180325130235/85/Technical-seo-tips-and-tricks-actionnables-2018-16-320.jpg)
![22#seocamp@LoukilAymen
Comparer
https://developers.google.com
Les scripts externes [non maitrisés] peuvent dégrader la performance](https://image.slidesharecdn.com/technicalseotipstricks-aymenloukil-180325130235/85/Technical-seo-tips-and-tricks-actionnables-2018-22-320.jpg)
Téléchargé parAymen Loukil
Technical seo tips and tricks actionnables 2018
Le document présente des conseils sur le SEO technique pour 2018, abordant des sujets tels que la performance, le rendu, la sécurité, et l'utilisation de schémas pour améliorer la lisibilité par les machines. Il donne des astuces pour réduire la taille et le nombre de requêtes, optimiser les ressources, et utiliser des outils de diagnostic comme Lighthouse. Enfin, il souligne l'importance de la collaboration interdisciplinaire pour améliorer l'expérience utilisateur et la performance du site.
Technical seo tips and tricks actionnables 2018
- 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 TechnicalSEO 2018 Rendering & Crawl Sécurité Schema.org
- 4.
- 5. 5#seocamp@LoukilAymen Imaginez.. 30min à laporte du magasin 10min pour pouvoir changer de rayon 7min pour pouvoir toucher un produit
- 6. 6#seocamp@LoukilAymen La perception del’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 estil 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 quicoûte ? Parse Compile ExecuteDownload Réseau Matériel (processeur, mémoire)
- 9. 9#seocamp@LoukilAymen “En performance, lataille (du code) compte”
- 10. 10#seocamp@LoukilAymen “Le nombre derequêtes compte aussi”
- 11. 11#seocamp@LoukilAymen Moyenne des connexions3G/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 deréseau Une page web en moyenne : 3.6Mb* 3.6 Mb 14 Mbps = 25s 16s(Japan)
- 13. 13#seocamp@LoukilAymen La différence dematé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.
- 15. 15#seocamp@LoukilAymen Vous en avezvraiment besoin ? - CTR ? - Utilisé ? - Faire autrement ? - L’animation vitale ? - AB test ?
- 16. 16#seocamp@LoukilAymen Coverage : codenon utilisé 50% du code n’est pas utilisé [1.4MB potentiel à gagner]* ctrl+shift+p [win]
- 17. 17#seocamp@LoukilAymen Alléger le code Codenon 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 scriptsexternes ? Third party badges
- 21. 21#seocamp@LoukilAymen Bloquer le chargementd’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, pluslight vanilla-js.com 35X plus rapide que jQuery
- 24. 24#seocamp@LoukilAymen JS est leplus coûteux des ressources 38 fois plus coûteux qu’un JPEG
- 25. 25#seocamp@LoukilAymen Optimiser le chemincritique 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éesavant le rendu Faites le tri dans les ressources en vert https://www.webpagetest.org/
- 27. 27#seocamp@LoukilAymen JavaScript est uneressource 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.
- 29. 29#seocamp@LoukilAymen CSS est uneressource 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 CSScritique 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 placeAMP = Rapide ?
- 32.
- 33.
- 34. 34#seocamp@LoukilAymen AMP n’est rapidequ’à partir de la SERP
- 35.
- 36. 36#seocamp@LoukilAymen Utilisez les “ResourceHints” https://w3c.github.io/resource-hints/
- 37.
- 38. 38#seocamp@LoukilAymen Quelle serait lanext page ? https://github.com/SamKnows/futurelink
- 39.
- 40. 40#seocamp@LoukilAymen Passez en HTTP/2 HTTP/1.1HTTP/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 - Outilde 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.
- 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.
- 49.
- 50.
- 51. 51#seocamp@LoukilAymen Détecter des featuresnon supportées par G https://caniuse.com
- 52.
- 53. 53#seocamp@LoukilAymen Et le JavaScript? - Contenu visible ? - Erreurs JS
- 54. 54#seocamp@LoukilAymen Détecter des erreursJS + remote report
- 55. 55#seocamp@LoukilAymen Groupe pour JSSEO https://groups.google.com/forum/#!forum/js-sites- wg Groupe Google autour du SEO JS
- 56.
- 57.
- 58.
- 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ériteil 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.
- 62. 62#seocamp@LoukilAymen Et le budgetde 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 peude budget Pages indexées mais pas les plus importantes Ressources .. If-Modified-Since
- 65. 65#seocamp@LoukilAymen MFI : L’ordredu contenu
- 66.
- 67.
- 68.
- 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 erreursHTTPS 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.
- 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.
- 75. 75#seocamp@LoukilAymen Être Machine-readable, c’estl’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 “Firstpart of query analysis is looking for entities” 2016 #SMX
- 77.
- 78.
- 79.
- 80.
- 81. 81#seocamp@LoukilAymen Maîtrise des informationsproduits Schema/Product Schema/Car Schema/AggregateRating
- 82.
- 83.
- 84.
- 85.
- 86.
- 87.
- 88.
- 89.
- 90.
- 91.
- 92. 92#seocamp@LoukilAymen Bing supporte enfinle 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 EditorialsE-commerce Store Locator AgendaAuthors Careers
- 95. 95#seocamp@LoukilAymen Définition des types Home EditorialsE-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éessur Schema.org Se baser sur Schema.org pour générer votre modèle de données métier
- 98.
- 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.
- 103. 10 3#seocamp@LoukilAymen Agilisez le SEO Transformerl’organisation - Casser les SILOS - Cross-discipline - Spirit de performance - Communication - KPIs - Test & learn
- 104.
- 105.
- 106. 10 6#seocamp@LoukilAymen Make User Experiencegreat 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 estla 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 ladiscussion : @LoukilAymen #TechnicalSEO2018
- 109.