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¶ ↑

1. Lisible par des “non techniciens”

2. Favorise l’action

3. Modulable

4. Semi-automatique // (action humaine fait partie du processus)

5. Global

6. 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- example.com/ | grep -i Strict // ?? ☐ Automatiser la correction de JSON incorrects ☐ Performance budget de Lighthouse ☐ Multiplier le chargement des bytes de Javascript ☐ 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 - justmarkup.com/articles/2017-11-02-network-based-image-loading/ - calendar.perfplanet.com/2019/prototyping-optimizations-with-cloudflare-workers-and-webpagetest/

Test de la fabrication de plugins LightHouse¶ ↑

• engineering.q42.nl/making-a-lighthouse-plugin-work-with-lighthouse-ci/

Tests automatisés¶ ↑

• www.npmjs.com/package/google

• webhint.io/

• www.ssllabs.com

Test erreurs de sécurités¶ ↑

• github.com/lirantal/is-website-vulnerable

• github.com/qazbnm456/awesome-web-security

Coût du site¶ ↑

• www.websitecarbon.com/

• whatdoesmysitecost.com/

Afficher les couleurs sous un mode graphique¶ ↑

• una.im/css-color-theming/ // Sass

• css-tricks.com/a-handy-sass-powered-tool-for-making-balanced-color-palettes/ // Variables CSS

• medium.com/@NateBaldwin/leonardo-an-open-source-contrast-based-color-generator-92d61b6521d2

Test automatisés de contraste de boutons¶ ↑

• www.aditus.io/button-contrast-checker/

Animation de l’interface¶ ↑

• raphaelfabeni.com/ui-interactions/

• codepen.io/pbakaus/pen/OJLNNvm

Autres¶ ↑

• 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¶ ↑

• serpstat.com/domains/search/?search_type=subdomains&se=g_us&query=https%3A%2F%2Fwww.leforestier-immobilier.com%2F

• whatsmyserp.com/domains/a408117d-3cef-4b9f-bf92-fbf71a652252

• www.advancedwebranking.com

• ecograder.com

• moz.com/free-seo-tools

• developers.google.com/webmaster-tools/search-console-api-original/v3/searchanalytics/query

• ahrefs.com/fr/website-authority-checker

• web.dev/measure

• www.thinkwithgoogle.com/intl/fr-fr/feature/testmysite/

Ressources¶ ↑

Connexion utilisateur¶ ↑

• www.stackbit.com/blog/open-authoring-netlifycms/

• www.zachleat.com/web/eleventy-contributors/

• www.smashingmagazine.com/2019/12/dynamic-async-functionality-jamsstack-websites/

• github.com/chromeos/static-site-scaffold

Security¶ ↑

• github.com/nico3333fr/CSP-useful

• sslmate.com/certspotter/api/

Accessibilité¶ ↑

• www.w3.org/WAI/test-evaluate/

Performance¶ ↑

• github.com/Pixboost/lighthouse-ci-docker

Statistiques¶ ↑

• httparchive.org/reports/state-of-the-web

Bibliothèques¶ ↑

• github.com/bartveneman/constyble

• github.com/sethblack/python-seo-analyzer

Curl & Grep & JSON¶ ↑

• medium.com/@LiliSousa/web-scraping-with-bash-690e4ee7f98d

• css-tricks.com/query-json-documents-in-the-terminal-with-groq/

• github.com/KilledByAPixel/JSONCrush

Articles & divers¶ ↑

• www.smashingmagazine.com/2019/01/front-end-performance-checklist-2019-pdf-pages/

• css-tricks.com/in-search-of-a-stack-that-monitors-the-quality-and-complexity-of-css/

• jameshubbardmarketing.co.uk/seo-blog/essential-technical-seo-audit-tools/

• www.screamingfrog.co.uk/seo-spider/

• github.com/serp-spider/serps-cli

• github.com/lochmueller/seocli

• www.npmjs.com/package/yoastseo

• tome.fyi/

• performance-budgets.netlify.com/

• github.com/pa11y/pa11y-ci

• www.ecometer.org/

• www.ecoindex.fr/

• snapboard.io

• v8.dev/blog/cost-of-javascript-2019

• openclassrooms.com/fr/courses/6227476-appliquez-les-principes-du-green-it-dans-votre-entreprise/6699431-decouvrez-limpact-du-numerique-sur-lenvironnement

• www.ekopedia.fr/wiki/H%C3%A9bergement_Internet

• dev.to/addyosmani/loading-web-pages-fast-on-a-20-feature-phone-8h6

• www.smashingmagazine.com/2020/01/front-end-performance-checklist-2020-pdf-pages/

• calendar.perfplanet.com/2019/prototyping-optimizations-with-cloudflare-workers-and-webpagetest/

• dev.to/addyosmani/monitoring-performance-with-the-pagespeed-insights-api-33k7

• www.udacity.com/course/offline-web-applications–ud899

• dev.to/devteam/instant-webpages-and-terabytes-of-data-savings-through-the-magic-of-service-workers-1mkc

• snyk.io/blog/77-percent-of-sites-use-vulnerable-js-libraries/

• 24ways.org/2019/twelve-days-of-front-end-testing/?mc_cid=4596c5b43a&mc_eid=971aa7dfa4

• ux-speed-calculator.netlify.com/

Videos¶ ↑

• www.youtube.com/watch?v=cXLOIIJ1UaE

• www.youtube.com/watch?v=JvJ0v5OohNg

Note d’interntion¶ ↑

Evolutions possibles¶ ↑

1. Remonter des indicateurs plus diverses (sécurité, SEO, RGPD (?)…)

2. Construire des composants plus parlants : couleurs, comparatif entre page clefs.

3. Axer le tableau sur des scores forts et pertinents: énergie, coût, sécurité…

4. Modulariser le fonctionnement

5. Rendre le code réplicable

R&D technique¶ ↑

1. Porter le site sous Eleventy (pour plus de performance sur les gros volumes)

2. Construire des plugins LightHouse

3. Tester des librairies pour remonter des scores plus variés

4. Rendre l’outil déployable (contexte d’intégration continue)

5. Création d’un bookmarklet pour lancer un audit à la main.

6. Coder une API pour le calcul des scores forts

7. Lancer des tests depuis des pays spécifiques.

8. Permettre la génération multi-rapports par instance (et pas un seul rapport par instance)