Frontend Checklist pour les sites Web

Performance

Général

  • [ ] HTTP/2 est utilisé
  • [ ] CDN est utilisé pour les fichiers statiques
  • [ ] CDN est utilisé pour les pages de contenu
  • [ ] Cookie-Less Domain est utilisé pour les fichiers statiques
  • [ ] Le préfetching DNS est utilisé
    • [ ]<link rel="preload" as="script">(CSS, JS et fonts)
    • [ ]<link rel="dns-prefetch">(pour Domain, qui fournit des ressources statiques, par exemple : Images et Outils de suivi)

ressources

  • [ ] JavaScript combiné dans un seul fichier

  • [ ] JavaScript minié

  • [ ] JavaScript est comprimé

  • [ ] Pas de JavaScript en ligne

  • [ ] CSS combiné dans un seul fichier

  • [ ] CSS miniatisé

  • [ ] CSS est comprimé

  • [ ] CSS : Pas d'utilisation de @import

  • [ ] Pas de CSS en ligne

  • [ ] HTML miniatisé

  • [ ] Les fichiers statiques sont compressés avec gzip ou brotli

  • [ ] Les fichiers statiques sont précomprimés sur le serveur

  • [ ] HTML est comprimé avec gzip ou brotli

  • [ ] Utilisation des formats d'image corrects

  • [ ] Utilisation d'images réactive

  • [ ] Les images sont optimisées (ImageOptim...)

  • [ ] Les images sont cachées dans le navigateur

  • [ ] Les fichiers SVG sont minimisés

  • [ ] Les fichiers SVG sont utilisés lorsque possible

  • [ ] Seuls les fonts utilisés sont chargés

  • [ ] Le cache de navigateur est utilisé efficacement

  • [ ] Les étiquettes ne sont pas utilisées

  • [ ] Expiration, cache-control et max-âge pour les ressources statiques est fixé à 1 an

  • [ ] Loading asychrone ou déferré de contenu non critique

  • [ ] Tracking scripts chargés sans synchronisation

Mesures

En général, je mère les principales pages d'un projet ici.

  • [ ] Nombre de fichiers
  • [ ] La taille de tous les fichiers combinés
  • [ ] Télécharger le temps de la page
  • [ ] Analyse de la vitesse de la page Google (Desktop, Mobile et Mobile UX; x de 100)
  • Le SpeedIndex

rendu des performances

  • [ ] Les tailles d'image intrinsèque sont spécifiées dans la marque
  • [ ] CSS est chargé dans la tête du document
  • [ ] Les scripts sont chargés à la fin du document
  • [ ] Les écrits sont chargés avecdefer- les attributs
  • [ ] Les scripts sont chargés dans la tête du document après que les styles sont chargés
  • [ ] Scrolling est possible avec 60fps
  • [ ] Aucune utilisation dedocument.write
  • [ ] L'animation CSS causant le layout(reflow) n'est pas très utilisée

Performance des appareils

  • [ ] Utilisation de la CPU
  • [ ] Utilisation de la mémoire
  • [ ] Utilisation du GPU

Le cross-browser

  • [ ] Le site est chargé sur tous les navigateurs de bureau actuels (Safari, Firefox, Chrome, IE11, EDGE)
  • [ ] Le site Web est chargé sur tous les navigateurs mobiles actuels (Chrome pour Android, iOS Safari)
  • [ ] Pour les magasins: Checkout est disponible sur tous les appareils et navigateurs nécessaires
  • [ ] Viewport Meta Tag est utilisé correctement
  • [ ] Utilisation des types d'entrée corrects

SEO

  • [ ] Les pages peuvent être indexées

  • [ ] La version mobile du site est disponible

  • [ ] HTTPS est utilisé sur toutes les pages

  • [ ] Sitemap est disponible

  • [ ] Les données structurées sont utilisées lorsque c'est possible

  • [ ] Les titres utilisés

  • [ ] Titres dans le bon ordre

  • [ ] Descriptions Meta utilisées

  • [ ] Les mots-clés utilisés

  • [ ] Le titre Meta est correctement rempli

  • [ ] Paroles clés utilisées dans les titres

  • [ ] Les images utilisent lealt- les attributs

  • [ ] Les liens utilisent untitle- les attributs

  • [ ] Les liens dans la navigation ne sont pas utiliséstitle- les attributs

  • [ ] Pas de contenu dupliqué

  • [ ] Utilisation des URL absolus

  • [ ] Les liens internes pointent vers la version HTTPS de la page

  • [ ] Les redirections sont effectuées avec 301

  • [ ] N° 404 erreur

  • [ ] Il n'y a pas de 500 erreurs

  • [ ] Les étiquettes canoniques sont utilisées si nécessaire

  • [ ] La proportion de code et de contenu est d'environ 25% pour les pages de magasin et 50% pour les pages de contenu

Accessibilité

  • [ ] Le contraste de couleur est bon (WCAG 2.0)
  • [ ] Les rôles WAI-ARIA sont utilisés
  • [ ] Utilisation d'éléments accessibles tels que nav, footer, aside
  • [ ] Les URL sont accessibles
  • [ ] L'accessibilité du clavier est disponible
  • [ ] Les types d'entrée corrects sont utilisés

Sécurité

  • [ ] HTTPS est utilisé sur toutes les pages
  • [ ] Il n'y a pas de contenu mixte sur les pages
  • [ ] Plugins et traceurs externes sont chargés via HTTPS
  • [ ] Robots.txt est en utilisation
  • [ ] Crosse-Site-Scripture n'est pas possible
  • [ ] HSTS Header est configuré
  • [ ] La politique de sécurité du contenu est définie et ne permet que des hébergements spécifiques et aucun scripts inline

plus

  • [ ] Utilisation stricte du domaine avec ou sans www
  • [ ] La langue correcte dans le tag HTML
  • [ ] Le charset est fixé
  • [ ] HTML est valide
  • [ ] 404 page est disponible
  • [ ] Une feuille de style d'impression spéciale est en place

serveur

  • [ ] La langue correcte définie par le serveur
  • [ ] Les types de contenu corrects définis par le serveur