Amélioration de l’UX et score Lighthouse

Making-of

11ty

Ligthouse est un outil qui permet d’auditer des sites web depuis son navigateur. Voyons comment on peut améliorer notre site fraichement créé.

En créant un site depuis zéro, je peux faire en sorte qu'il soit le plus conforme et optimisé possible. Si j'attends avant de suivre certaines pratiques d'optimisation, elles seront bien plus difficiles à mettre en place.

J'ai lancé une analyse du site avec Lighthouse depuis les outils de développeur de mon navigateur

Le résultat de cette analyse m'a donné un score sur 4 dimensions :

Performance
Accessibilité
“Best practices”
SEO

Pour le moment, les score sont presque tous à 100, c'est à dire le maximum.

Il y a quelques recommendation d'accessibilité qui me sont proposées :

Ajout de la balise meta viewport
Ajout de la balise meta description

Dans le fichier de mise en page layout.html, J'ai paramétré la balise meta description avec un fichier global data.

Index: index.html

 ---
 layout: layout.html
 title: Baldir
+description: "Foo"
 ---

_data/global.json

{
  "description": "Développeur logiciel en quête du sens dans un monde aux ressources limitées."
}

Index: _includes/layout.html

 <html lang="fr">
 <head>
     <meta charset="UTF-8">
+    <meta name="description" content="{{global.description}}" >
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Baldir - {{title}}</title>
 </head>
 <body>