Pour les Sites Web

Après avoir essayer bien des outils de construction de sites web (avec pèle-mêle, l’incontournable et bordélique Wordpress qui fait tourner prés d’un quart de sites web dans le monde, l’élitiste Drupal , le confidentiel Yacs (excellent, mais désormais abandonné depuis 2017), Joomla , l’erzatz de Wordpress, j’ai succombé à la mode des SSG¹, avec Kirby , très complet (mélange de Php et SSG), mais qui dérive dangereusement vers une usine à gaz type Wordpress avec en plus un modèle économique pour riches (logiciel coutant une fortune, thèmes, plug-in payant à l’avenant) et finalement Hugo , le meilleur, le plus rapide, le plus simple d’utilisation, mais avec un minimum d’investissement pour bien comprendre son fonctionnement, sa communauté de développeurs très active et conviviale, le plus personnalisable, avec lequel on peut effectivement maitriser l’ensemble de ses fonctions et in fine, coder soi-même ce que l’on veut.

Tester la performance

• Web Dev , donne des indications claires et un rapport avec des recommandations
• PageSpeed Insights , l’outil de Google permettant d’analyser la vitesse d’une page web sur le web et sur mobile.
• Pagelocity a une approche assez unique puisque cet outil analyse votre pages web en s’intéressant à 3 pôles, SEO, Performance et le Code
• YellowLab est un outil très complet pour analyser les performances de votre site web avec des résultats visuellement clairs et simples
• GTMetrix , l’un des plus complet, avec possibilité de comparer plusieurs URLs
• Pingdom , pas le meilleur, mais peut être utile, en complément
• Mozilla Observatory

Tester l’accessibilité du site

• naviguer au clavier dans le site en utilisant uniquement la touche Tab (et Maj + Tab pour revenir en arrière) du clavier (ne pas retirer l’outline)
• Vérifier que le code HTML est valide avec le validateur sur le site du W3C
• Vérifier que la hiérarchie de titres est cohérente avec l’extension de navigateur HeadingsMap (pour Firefox, ou pour Chrome) : pas de sauts de titre (on ne passe pas d’un h2 à un h4), pas de texte marqué comme un titre alors que c’est juste un texte qu’on a voulu écrire plus gros ou pas de texte qui devrait être un titre mais n’en est pas un.
• Vérifier que quand on zoome le site à 200 %, il n’y a pas de perte de contenu ou de fonctionnalité
• Tester globalement le site avec des extensions ou des sites qui vont vérifier certaines règles automatiquement. C’est loin de tout couvrir mais ça peut bien aider aussi. Pour citer quelques outils, il y a, par exemple : a11y.css , Accessibility Insights , ou encore Wave .
• Vérifier que les espacements des caractères, des lignes, des mots et des paragraphes peuvent être redéfinis par les utilisateurs et utilisatrices sans que cela provoque des pertes de contenus ou de fonctionnalités. Avec l’extension Stylus , il faut créer un style avec ce code pour le vérifier :

* {
    line-height: 1.5 !important;
    letter-spacing: 0.12em !important;
    word-spacing: 0.16em !important;
}
p {
    margin-bottom: 2em !important;
}

Les liens du Web

24 Jours du web

Pour une meilleure sécurité

Pour obtenir un score A+ sur [Mozylla Observatory] bien utiliser les déclarations des headers (soit via les Content Security Policy ou via les headers à la racine du site, notamment avec l’utilisation de Netlify

exemple de déclaration header

[[headers]]
  for = "/*"
  [headers.values]
    cache-control = "public,max-age=3600"
    X-Frame-Options = "SAMEORIGIN"
    X-XSS-Protection = "1; mode=block"
    X-Content-Type-Options = "nosniff"
    Content-Security-Policy = "form-action https:"
    Referrer-Policy = "strict-origin-when-cross-origin"
    Strict-Transport-Security = "max-age=2592000; includeSubDomains"
    Feature-Policy = "geolocation 'none'; midi 'none'; microphone 'none'; camera 'none'; magnetometer 'none'; gyroscope 'none'; speaker 'none'; payment 'none'"

[[headers]]
  # Override cache duration for assets with periods in the filename (i.e. static assets)
  for = "/*.*"
    [headers.values]
    cache-control = "public,max-age=2592000"

ou encore

[[headers]]
  for = "/*"
  [headers.values]
  Strict-Transport-Security = max-age=31536000; includeSubDomains; preload
  X-Content-Type-Options = "nosniff"
  X-XSS-Protection = "1; mode=block"
  Content-Security-Policy = "default-src 'self'; manifest-src 'self'; connect-src 'self'; font-src 'self'; img-src 'self' data:; script-src 'self'; style-src 'self'"
  X-Frame-Options = "SAMEORIGIN"
  Referrer-Policy = "strict-origin"
  Feature-Policy = "geolocation 'none'; midi 'none'; microphone 'none'; camera 'none'; magnetometer 'none'; gyroscope 'none'; speaker 'none'; payment 'none'"
  Cache-Control = "public, max-age=31536000"