Outils utiles

Améliorer la qualité d’un site

Google Lighthouse

Google Lighthouse est un outil aidant à améliorer la qualité des pages d’un site web. Il se charge de faire des audits d’accessibilité, de performances sur les PWA ou encore sur le référencement.
L’outil appartient à Google, il est Open Source et relativement simple à utiliser. Après lui avoir indiqué une URL, il effectue une série de tests et génère un rapport sur la qualité et les performances de la page. Après cela, il ne reste plus qu’à prendre connaissance des facteurs bloquants mis en avant dans les audits et appliquer les améliorations adéquates. De nombreuses pages d’aide peuvent être consultées pour chaque amélioration afin d’orienter l’utilisateur sur la stratégie à adopter.

GtMetrix

GtMetrix est une plateforme qui génère un rapport de performances sur la vitesse de chargement d’un site web, en s’appuyant sur plusieurs outils complémentaires déjà existants. Il récupère toutes les données pour les regrouper et en faire un audit avec une vue détaillée sur la performance, le temps de chargement, le poids de la page ainsi que le nombre de requêtes utilisées pour la charger.
GtMetrix classe toutes ces données dans un barème allant de A à F avec pour A, le meilleur score et F le moins bon score. Dans ses recommandations d’améliorations, il vous indique aussi la priorité de chaque problème à régler afin de vous aider.

Dareboost

Dareboost est une plateforme en ligne permettant d’analyser les performances de son site web. Il est aussi possible de comparer son site avec celui d’un concurrent ou tout simplement de suivre les performances des sites concurrents.
Dareboost est simple et intuitif à utiliser, pour commencer il faut renseigner l’URL et l’environnement sur lequel la plateforme va analyser le site web (Desktop, mobile, …)
L’analyse renvoie le score global des performances du site ainsi que les problèmes, les améliorations possibles et les bons éléments.
De plus, la plateforme a aussi l’avantage de proposer la possibilité de voir au ralenti les différentes étapes de chargement des éléments d’une page. Ainsi il est possible d’identifier les sources bloquantes et de trouver des solutions.

Les logiciels et outils

JetBrains

JetBrains est une entreprise informatique spécialisée dans l’édition de logiciels et d’outils pour les développeurs, leur permettant d’augmenter leur efficacité. Dans leur large collection on retrouve notamment des IDE (Environnement de Développement Intégré) tel que PHPStorm ou encore WebStorm. Mais aussi, des outils de collaboration comme Space, permettant d’échanger avec l’équipe, suivre les projets et, obtenir une multitude d’autres informations.
La politique de l’entreprise est de fournir des outils et logiciels pour de nombreux langages de programmation : “Quelles que soient les technologies que vous utilisez, il existe un outil JetBrains adapté”.

Can I Use

Can I Use est un site web, permettant de connaître toutes les compatibilités CSS et HTML sur différents navigateurs. Il suffit d’entrer l’élément que l’on souhaite. Can I Use affiche alors, dans un tableau, la compatibilité de celui-ci sur différents navigateurs mais aussi, sur différentes versions de ces navigateurs. Lorsque la compatibilité n’est pas à 100%, le site indique, dans une note, la bonne pratique à adopter.

Web.Dev

Web.Dev est une solution créée par Google qui se divise en 2 parties, l’apprentissage et l’audit de sites web.
Dans la partie apprentissage, on retrouve une multitude de contenus trié par thématiques telles que la sécurité, les PWA, les metrics ou encore le SEO. Au travers des articles, on y donne des conseils et des bonnes pratiques pour réussir.
Dans la partie analyse et audit, Google utilise son outil Lighthouse (cité ci-dessus) pour mesurer différents aspects du site : La performance, les bonnes pratiques, le SEO ainsi que l’accessibilité. Des conseils d’améliorations sont donnés en fonction des résultats obtenus.

Les bibliothèques

Pattern

Pattern est une bibliothèque CSS proposant des motifs d’arrière-plan afin de remplir le fond blanc et monotone des sites web. Grâce à cette bibliothèque il est aussi possible d’ajouter des séparateurs ou de remplir une police avec un motif.
Les 12 motifs proposés peuvent être personnalisés au niveau de leur taille ou de leur couleur.
Pattern peut être combiné avec la bibliothèque Bootstrap.

Font Awesome

Font Awesome est une police d’écriture d’icône Open Source. Elle a été construite en CSS, LESS et SASS. Les icônes sont vectorielles ce qui permet de garder toute la qualité de l’icône, peu importe sa taille. Pour son utilisation, il faut dans un premier temps, inclure la police d’écriture via un CDN. Par la suite, il suffit de se rendre sur le site Font Awesome et de choisir l’icône, copier la classe et l’intégrer dans une balise . La documentation présente sur le site officiel de Font Awesome indique précisément les étapes à suivre afin d’utiliser les icônes.

Coolors

Le site web Coolors permet de trouver la bonne combinaison de couleurs à utiliser, pour son site web. Il est possible de choisir le nombre de couleurs que l’on souhaite, entre 2 et 10 couleurs différentes. En appuyant sur la touche espace les couleurs défilent vous permettant de juger celles qui s’associent ou non. Dès qu’une couleur qui vous plaît apparaît, il est possible de la sceller afin de trouver les autres couleurs. Ce site est parfait pour les designer, de plus, le générateur précise le code hexadécimal de la couleur afin de pouvoir l’utiliser.

Les outils aidant ou facilitant le développement, le suivi ou encore l’optimisation des sites web sont très largement utilisés. Ils permettent un gain de temps, d’efficacité et de qualité.