Monitoring Tool for website
Voici, les ressource et actions concernant l’outils Lowtus. L'évolution de cet outil doit se faire sur des principes simples et économes.
Ce fichier doit donc représenter l’état du projet. Ainsi, il liste : des actions à faire, des idées à tester, des ressources à étudier… des classements de sites.
Esprit de l’outil
- Lisible par des "non techniciens"
- Favorise l’action
- Modulable
- Semi-automatique // (action humaine fait partie du processus)
- Global
- Répicable
Reste à faire - (plugin TODO+ sur VSCode)
✔ Afficher une jauge pour les scores sur 100 @done(19-09-12 09:15) ✔ Ajouter l’écoindex @done(19-09-12 09:15) ✔ Ajouter la liste de corrections à appliquer => pour gagner des points @done(19-09-16 15:11) ✔ Ne plus faire appel à Yellow lab tool :: trop lourd @done(19-10-11 17:23) ☐ Lister les valeurs avec du potential saving et estimer le gain en point. // Partiellement fait ☐ S’inspirer de l’écometer (?) ☐ Test des Micro formats et schema ☐ curl -s -D- https://example.com/ | grep -i Strict // ?? ☐ Automatiser la correction de JSON incorrects ☐ Performance budget de Lighthouse ☐ Multiplier le chargement des bytes de Javascript ☐ https://developer.mozilla.org/en-US/docs/Web/API/Long_Tasks_API ☐ Droits utilisateurs - sous thèmes - générer des sous pages de tests
À mettre en place
- Création d’indicateurs
- HTML rewrite et service workers testing - https://justmarkup.com/articles/2017-11-02-network-based-image-loading/ - https://calendar.perfplanet.com/2019/prototyping-optimizations-with-cloudflare-workers-and-webpagetest/
Test de la fabrication de plugins LightHouse
Tests automatisés
Test erreurs de sécurités
Coût du site
Afficher les couleurs sous un mode graphique
- https://una.im/css-color-theming/ // Sass
- https://css-tricks.com/a-handy-sass-powered-tool-for-making-balanced-color-palettes/ // Variables CSS
- https://medium.com/@NateBaldwin/leonardo-an-open-source-contrast-based-color-generator-92d61b6521d2
Test automatisés de contraste de boutons
Animation de l’interface
Autres
- https://developers.google.com/web/tools/chrome-devtools/network/reference // has response header encoding
Commandes
Caractères à remplacer de manière manuelle
Regular expression in all files
find _data/ -name '_.json' -exec sed -i 's/{}//g' {} \; replace \/ => / seocli
Services
- https://serpstat.com/domains/search/?search_type=subdomains&se=g_us&query=https%3A%2F%2Fwww.leforestier-immobilier.com%2F
- https://whatsmyserp.com/domains/a408117d-3cef-4b9f-bf92-fbf71a652252
- https://www.advancedwebranking.com
- https://ecograder.com
- https://moz.com/free-seo-tools
- https://developers.google.com/webmaster-tools/search-console-api-original/v3/searchanalytics/query
- https://ahrefs.com/fr/website-authority-checker
- https://web.dev/measure
- https://www.thinkwithgoogle.com/intl/fr-fr/feature/testmysite/
Ressources
Connexion utilisateur
- https://www.stackbit.com/blog/open-authoring-netlifycms/
- https://www.zachleat.com/web/eleventy-contributors/
- https://www.smashingmagazine.com/2019/12/dynamic-async-functionality-jamsstack-websites/
- https://github.com/chromeos/static-site-scaffold
Security
Accessibilité
Performance
Statistiques
Bibliothèques
Curl & Grep & JSON
- https://medium.com/@LiliSousa/web-scraping-with-bash-690e4ee7f98d
- https://css-tricks.com/query-json-documents-in-the-terminal-with-groq/
- https://github.com/KilledByAPixel/JSONCrush
Articles & divers
- https://www.smashingmagazine.com/2019/01/front-end-performance-checklist-2019-pdf-pages/
- https://css-tricks.com/in-search-of-a-stack-that-monitors-the-quality-and-complexity-of-css/
- https://jameshubbardmarketing.co.uk/seo-blog/essential-technical-seo-audit-tools/
- https://www.screamingfrog.co.uk/seo-spider/
- https://github.com/serp-spider/serps-cli
- https://github.com/lochmueller/seocli
- https://www.npmjs.com/package/yoastseo
- https://tome.fyi/
- https://performance-budgets.netlify.com/
- https://github.com/pa11y/pa11y-ci
- http://www.ecometer.org/
- http://www.ecoindex.fr/
- https://snapboard.io
- https://v8.dev/blog/cost-of-javascript-2019
- https://openclassrooms.com/fr/courses/6227476-appliquez-les-principes-du-green-it-dans-votre-entreprise/6699431-decouvrez-limpact-du-numerique-sur-lenvironnement
- https://www.ekopedia.fr/wiki/H%C3%A9bergement_Internet
- https://dev.to/addyosmani/loading-web-pages-fast-on-a-20-feature-phone-8h6
- https://www.smashingmagazine.com/2020/01/front-end-performance-checklist-2020-pdf-pages/
- https://calendar.perfplanet.com/2019/prototyping-optimizations-with-cloudflare-workers-and-webpagetest/
- https://dev.to/addyosmani/monitoring-performance-with-the-pagespeed-insights-api-33k7
- https://www.udacity.com/course/offline-web-applications--ud899
- https://dev.to/devteam/instant-webpages-and-terabytes-of-data-savings-through-the-magic-of-service-workers-1mkc
- https://snyk.io/blog/77-percent-of-sites-use-vulnerable-js-libraries/
- https://24ways.org/2019/twelve-days-of-front-end-testing/?mc_cid=4596c5b43a&mc_eid=971aa7dfa4
- https://ux-speed-calculator.netlify.com/
Videos
Note d’interntion
Evolutions possibles
- Remonter des indicateurs plus diverses (sécurité, SEO, RGPD (?)…)
- Construire des composants plus parlants : couleurs, comparatif entre page clefs.
- Axer le tableau sur des scores forts et pertinents: énergie, coût, sécurité…
- Modulariser le fonctionnement
- Rendre le code réplicable
R&D technique
- Porter le site sous Eleventy (pour plus de performance sur les gros volumes)
- Construire des plugins LightHouse
- Tester des librairies pour remonter des scores plus variés
- Rendre l’outil déployable (contexte d’intégration continue)
- Création d’un bookmarklet pour lancer un audit à la main.
- Coder une API pour le calcul des scores forts
- Lancer des tests depuis des pays spécifiques.
- Permettre la génération multi-rapports par instance (et pas un seul rapport par instance)