Je suis tombé récemment sur le projet github nommé front-end checklist créé par David Dias. Ce projet récapitule tout ce qu’on trouve en terme de bonnes pratiques lors d’une mise en production. Je me suis donc dit que ca pourrait être pas mal d’en faire une version française. La checklist front-end française est donc désormais disponible ici.
Si vous respectez tout ça, et que vous intégrez aussi les bonnes pratiques de développement PSR-2, alors félicitations, vous êtes un as du développement 🙂
Pour vous donner un aperçu de cette liste, et aussi profiter un peu du contenu pour le SEO de mon site personnel, la voilà:
Table des matières
Comment l’utiliser ?
Tous les élements de la Front-End Checklist sont requis dans la majorité de vos projets, mais certains peuvent être omis ou ne sont pas essentiels (par exemple, dans le cas d’une application d’administration , vous n’avez pas besoin de flux RSS). Nous avons choisi d’utiliser 3 niveaux de flexibilité:
signifie que l’élement est recommandé mais peut être omis dans certaines situations.
signifie que l’élement est hautement recommandé et peut éventuellement être omis dans certains cas particuliers . Certains élements s’ils sont omis peuvent avoir des mauvais effets secondaires en terme de performance ou de référencement (SEO).
signifie que l’élement est indispensable. Vous pouvez provoquer des dysfonctionnements dans votre page, ou avoir des problèmes d’accessibilité, voir de SEO. La priorité des tests doit d’abord s’assurer de ces éléments en premier.
Plusieurs resources possèdent un emoticon pour vous aider à comprendre quel type de contenu il s’agit :
: documentation ou article
: outil online / outil de test
: media ou contenu vidéo
Head
Notes: Vous pouvez trouver une liste de toute les balises qui peuvent être trouvées dans la section
<head>d’un document HTML.
Meta tag
- Doctype:
<!-- Doctype HTML5 -->
<!doctype html>
Les prochains 3 meta tags (Charset, X-UA Compatible and Viewport) doivent venir en premier dans le head.
- Charset:
<!-- Set character encoding for the document -->
<meta charset="utf-8">
- X-UA-Compatible:
<!-- Instruct Internet Explorer to use its latest rendering engine -->
<meta http-equiv="x-ua-compatible" content="ie=edge">
- Viewport:
<!-- Viewport for responsive web design -->
<meta name="viewport" content="width=device-width, initial-scale=1">
- Title:
<!-- Document Title -->
<title>Page Title less than 55 characters</title>
- Description:
<!-- Meta Description -->
<meta name="description" content="Description of the page less than 150 characters">
- Favicons:
favicon.ico, posez le à la racine de votre site. Normalement vous n’avez pas besoin d’utiliser de balise. Cependant, cela reste une bonne pratique de le relier comme dans l’exemple ci-dessous. Aujourd’hui, Le PNG est recommandé en remplacement du format.ico(dimensions: 32x32px).
<!-- Standard favicon -->
<link rel="icon" type="image/x-icon" href="https://example.com/favicon.ico">
<!-- Recommended favicon format -->
<link rel="icon" type="image/png" href="https://example.com/favicon.png">
- Apple Touch Icon:
<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" href="/custom-icon.png">
- Windows Tiles:
<!-- Microsoft Tiles -->
<meta name="msapplication-config" content="browserconfig.xml" />
Le balisage xml minimum requis pour le balisage du fichier browserconfig.xml doit être:
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="small.png"/>
<square150x150logo src="medium.png"/>
<wide310x150logo src="wide.png"/>
<square310x310logo src="large.png"/>
</tile>
</msapplication>
</browserconfig>
- Canonical:
rel="canonical"pour éviter le contenu dupliqué.
<!-- Helps prevent duplicate content issues -->
<link rel="canonical" href="http://example.com/2017/09/a-new-article-to-red.html">
HTML tags
- Language attribute:
langde votre site est spécifié et indique le langage de la page courante.
<html lang="en">
- L’attribut direction :
<html dir="rtl">
- Alternate language:
<link rel="alternate" href="https://es.example.com/" hreflang="es">
- Commentaire conditionel:
- Flux RSS:
- Inline critical CSS:
<style></style>dans une seule ligne (en étant minifié).
- Ordre des CSS :
<head>. (Parfois certains fichiers JS sont chargés en asynchrone en haut de page, et font donc exception à la règle).
Social meta
Facebook OG et Twitter Cards sont pour tous les sites, hautement recommandés. Les autres tags de média sociaux peuvent être utiles si vous ciblez une audience particulère et que vous voulez vous assurer un affichage particulier.
- Facebook Open Graph:
Notes: L’utilisation des balises
og:image:widthetog:image:heightqui spécifient les dimensions des images au crawler permettent le rendu des images immédiatement sans avoir besoin de les redimensionner avec un système asynchrone.
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
<!-- Next tags are optional but recommended -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
- Twitter Card:
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_account">
<meta name="twitter:creator" content="@individual_account">
<meta name="twitter:url" content="https://example.com/page.html">
<meta name="twitter:title" content="Content Title">
<meta name="twitter:description" content="Content description less than 200 characters">
<meta name="twitter:image" content="https://example.com/image.jpg">
HTML
Bonnes pratiques
- HTML5 Semantic Elements:
- Error pages:
- Noopener:
target="_blank", votre lien devrait avoir l’attributrel="noopener"pour prévenir du tab nabbing (piratage par onglet). Si vous devez supporter les anciennes versions de Firefox, utiliser alorsrel="noopener noreferrer".
- Nettoyage de commentaires:
HTML testing
- W3C compliant:
- HTML Lint:
- Link checker:
- Adblockers test:
Webfonts
Notes: Utiliser les webfonts peut causer des problèmes de textes invisibles avec Flash – envisager d’avoir des polices de secours et / ou d’utiliser des chargeurs webfont pour contrôler le comportement.
- Webfont format:
- Webfont size:
- Webfont loader:
CSS
Notes: Regardez les guidelines CSS et les Guidelines Sass fournis par de nombreux développeurs Front-End. Si vous avez des doutes sur des propriétés CSS, vous pouvez visiter la Reference CSS. Il y a aussi ce court Guide pour la cohérence.
- Responsive Web Design:
- CSS Print:
- Preprocessors:
- Unique ID:
- Reset CSS:
- JS prefix:
<div id="js-slider" class="my-slider">
<!-- Or -->
<div id="id-used-by-cms" class="js-slider my-slider">
- Embedded ou inline CSS:
<style>ou utilisant le CSS en style: le sont uniquement pour de bonnes raisons (e.g. background-image pour des sliders, ou des CSS critiques). - Vendor prefixes:
Performance
- Concatenation:
- Minification:
- Non-blocking:
- CSS non utilisés:
CSS testing
- Stylelint:
- Responsive web design:
- CSS Validator:
- Desktop Browsers:
- Mobile Browsers:
- OS:
- Pixel perfect:
- Reading direction:
Images
Notes: Pour une complète compréhension de l’optimisation des images, lisez ce livre gratuit Essential Image Optimization d’Addy Osmani.
Bonnes practiques
- Optimisation:
- Picture/Srcset:
- Retina:
- Sprite:
- Width and Height:
widthetheightsur la balise<img>dans le rendu final si la taille est connue (le css de dimensionnement peut alors être omis). - Text alternatif:
<img>ont un texte alternatif qui décrit l’image visuellement.
- Lazy loading:
JavaScript
Bonnes pratiques
- JavaScript Inline:
- Concatenation:
- Minification:
.min).
- Securité JavaScript:
- Non-blocking:
asyncou avec l’utilisation de l’attributdefer.
- Modernizr:
<html>.
Tester le JavaScript
- ESLint:
Securité
Scan et vérification de votre site web
Bonnes pratiques
- HTTPS:
- HTTP Strict Transport Security (HSTS):
- Cross Site Request Forgery (CSRF):
- Cross Site Scripting (XSS):
- Content Type Options
- X-Frame-Options (XFO)
- Content Security Policy
Performance
Bonnes pratiques
- Weight page:
- Minified:
- Lazy loading:
- Cookie size: Si vous utilisez des cookies, assurez vous qu’ils n’excèdent pas 4096 bytes et qu’il n’y en ai pas plus de 20 pour votre nom de domaine.
- Composants tiers:
Préparer les requêtes à venir
- DNS resolution:
dns-prefetch.
<link rel="dns-prefetch" href="https://example.com">
- Preconnection:
preconnect.
<link rel="preconnect" href="https://example.com">
- Prefetching:
prefetch.
<link rel="prefetch" href="image.png">
- Preloading:
<body>) sont chargés en avance avecpreload.
<link rel="preload" href="app.js">
Tester la Performance
- Google PageSpeed:
Accessibilité
Notes: Vous pouvez regader la playlist A11ycasts with Rob Dodson
Bonnes pratiques
- Progressive enhancement:
- Contraste des couleurs:
Headings
- H1:
- Headings:
Repères
- Role banner:
<header>a lerole="banner". - Role navigation:
<nav>a lerole="navigation". - Role main:
<main>a lerole="main".
Sémantique
- Specific HTML5 input types are used:
Formulaire
- Label:
aria-labelà la place.
Tester l’accessibilité
- Test des standards d’accessibilité:
- Navigation par clavier:
- Screen-reader:
- Focus style:
SEO
- Google Analytics:
- Headings logic:
- sitemap.xml:
- robots.txt:
- Structured Data:
- Sitemap HTML:
Et maintenant il est possible d’utiliser la NOUVELLE application Front-End Checklist
! C’est dynamique et peut générer manuellement des rapports de tests! ➜ http://frontendchecklist.com
Salut David.
Merci c’est cool 🙂
Sinon, je t’ai fais la modif sur ton nom dans l’article. J’ai essayé de te répondre par mail au commentaire de Korben, mais je me suis pris 3 retours. J’avais pas vu qu’il s’agissait d’un no reply.
Qq petites questions en compléments, si tu veux bien.
Tu es francais ? Tu habites pas vers Nantes à tout hasard ? 🙂
Et sinon, as tu touché aux servicesworkers ? Je commence tout juste, et je me dis que comme ca peut gérer un mode déconnecté (si perte de connexion), il pourrait être assez intéressant d’en mettre sur tous les sites et donc au final d’intégrer ça à la checklist. Enfin, quand tous les navigateurs l’auront intégrés…
Cela fait à présent quelques semaines que j’utilise un nouvel outil, et il marche parfaitement ! En plus, j’adore le design simple et épuré. Du coup je me suis dit, pourquoi pas le partager avec vous également.
Voici l’outil en question : https://www.websiteplanet.com/fr/webtools/robots-txt/
Je suis sûre que vos utilisateurs apprécieront cet outil autant que moi, si vous décidiez de le partager avec eux : )
En espérant avoir été pertinente,
Bien cordialement,
Anna.