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- 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¶ ↑
Tests automatisés¶ ↑
Test erreurs de sécurités¶ ↑
Coût du site¶ ↑
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¶ ↑
Animation de l’interface¶ ↑
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¶ ↑
-
whatsmyserp.com/domains/a408117d-3cef-4b9f-bf92-fbf71a652252
-
developers.google.com/webmaster-tools/search-console-api-original/v3/searchanalytics/query
Ressources¶ ↑
Connexion utilisateur¶ ↑
Security¶ ↑
Accessibilité¶ ↑
Performance¶ ↑
Statistiques¶ ↑
Bibliothèques¶ ↑
Curl & Grep & JSON¶ ↑
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/
-
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
-
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
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)