Koalati : Le contrôle-qualité simplifié

Projets
05 janvier 2017
Koalati : Le contrôle-qualité simplifié

Lorsqu'on développe un site web, que ce soit pour un client ou simplement un projet personnel, il est important de s'assurer qu'il fonctionne correctement et qu'il est bien optimisé afin d'améliorer l'expérience utilisateur et le référencement. C'est ce qu'on appelle le QA (pour Quality Assurance), ou contrôle qualité. Dépendamment de votre niveau de perfectionnisme, de la taille du site et des outils à votre disposition, c'est un processus qui peut prendre de 30 minutes à plusieurs journées de travail. C'est pourquoi j'ai commencé un nouveau projet: Koalati.

L'idée derrière Koalati est d'automatiser au maximum le processus de contrôle qualité à l'aide d'une multitude de tests diagnostiques en ligne, qui analysent différentes pages de votre site web, et qui vous donnent des informations sur ce qui est bien fait, et ce qui devrait être ajusté. L'objectif initial de Koalati est d'automatiser les six facettes suivantes du contrôle qualité:

  • le design adaptif
  • la vitesse de chargement
  • l'optimisation pour les réseaux sociaux
  • la vérification orthographique et grammaticale
  • les problèmes de tags et de syntaxe du code HTML
  • la compatibilité sur les différents navigateurs

L'outil utilise le sitemap de votre site afin de pouvoir analyser chaque page, ce qui est l'avantage principal comparément à certains outils en lignes qui effectuent déjà des tests diagnostiques, tels que le Google Speedtest. De plus, bien que le projet soit toujours dans les premiers stades de développement, une version préliminaire de certains des tests sont déjà fonctionnels, et des plans sont déjà en place pour les autres. Voici le statut actuel des différents tests diagnostiques.

Vitesse de chargement (version préliminaire fonctionnelle)

Le test de vitesse de chargement fonctionne avec l'API du Google Speedtest, et vous présente les mêmes résultats que le test original de Google. Par contre, l'avantage de Koalati par rapport à celui-ci est qu'il permet d'analyser les différentes pages de votre site en une seule fois, sans avoir à entrer l'URL de chaque page individuellement. Comme dans tous les tests sur Koalati, une note est attribuée à chaque page, et une note globale est calculée à l'aide de ces résultats individuels.

Optimisation pour les réseaux sociaux (version préliminaire fonctionnelle)

Le test d'optimisation pour les réseaux sociaux analyse le code HTML de vos pages afin de vérifier s'il contient les méta-tags les plus importants, soit Facebook et Twitter. Dans cette version initiale, seuls les tags de bases sont recherchés, mais l'objectif est d'avoir une analyse plus complète qui serait basée sur une sélection de réseaux sociaux de votre choix.

 

Tags et syntaxe du code HTML (version préliminaire fonctionnelle)

Le test des tags et de la syntaxe du code HTML analyse le code HTML de la page et vérifie plusieurs éléments qui sont importants sur différents aspects. Voici quelques éléments qui sont vérifiés: la présence des tags H1 et H2 pour indiquer de quoi votre page traite, la présence de liens morts qui devraient être corrigés, l'utilisation de tags HTML qui ne sont plus supportés, et la présence d'images n'ayant pas de description. Une multitude d'autres éléments sont également analysés, comme il est possible de le voir sur l'image ci-dessous, et certaines nouvelles vérifications risquent d'être ajoutées à ce test dans les versions à venir de Koalati.

Design adaptif (à développer)

Le test de design adaptif n'est pas encore en développement, mais l'idée générale pour ce test est d'utiliser l'API du Google Mobile-friendly Test et d'ajouter à cela une analyse des fichiers CSS inclus sur le site. Un objectif futur serait que le test soit en mesure de vérifier les autres problèmes majeurs et fréquents du design responsive, tels que les dépassements (ou overflow) du contenu, qui sont plus difficiles à automatiser avec uniquement le code HTML et CSS des pages. 

Vérification orthographique et grammaticale (à développer)

Bien que ce test n'ait pas encore été développé, son concept est simple: utiliser un API ou une librairie d'analyse orthographique et grammaticale existante afin de vérifier si des erreurs sont présentes dans le contenu du site. J'ai fait quelques recherches par rapport aux différentes API et librairies existantes, mais je n'ai toujours pas fait de choix par rapport à laquelle je prévois utiliser pour monter ce test. Si vous avez des recommandations, n'hésitez pas à m'en faire part dans les commentaires ou via courriel.

Compatibilité sur les différents navigateurs (à développer)

Ce dernier test est le plus important, mais risque également d'être le plus complexe de tous. Mon objectif est de demander à l'utilisateur quelle version des différents navigateurs il désire supporter (par exemple, jusqu'à Internet Explorer 9), et d'ensuite analyser le HTML et le CSS du site pour s'assurer que tous les tags, les attributs, les sélecteurs et les valeurs utilisées sont valides sur les navigateurs désirés. J'ai en tête d'utiliser le travail qui a déjà été fait par Alexis Deveria avec CanIUse pour vérifier qu'est-ce qui est valide sur quelles versions. Par exemple, si je choisis de supporter les anciens navigateurs jusqu'à IE9, et que mon CSS contient des background-image avec des linear-gradient pour colorer l'image d'arrière-plan, le test devrait vérifier si un background-image classique, sans linear-gradient, est présent comme alternative. J'aimerais également que dans ce cas, le test puisse proposer d'utiliser une alternative pour IE9 telle que le fameux "progid:DXImageTransform.Microsoft.gradient".

 

C'est donc tout pour la progression et les prévisions actuelles pour Koalati. Si vous avez des commentaires, des propositions ou des questions par rapport au projet, n'hésitez pas à m'en faire part dans la section ci-bas, ou directement à l'aide du formulaire de contact disponible sur le site.

S'abonner à l'infolettre

Recevez à chaque mois un résumé de l'activité sur mon site ainsi que des offres exclusives et des annonces officielles en vous abonnant à l'infolettre.