Performance et accessibilité

Mistral Pro est conçu pour qu'un site assemblé à partir de ses templates reste rapide et utilisable par tous, sans travail supplémentaire. Cet article explique ce qui est pris en charge pour vous et ce qu'il faut garder à l'esprit.

Performance : ce que fait le theme

• Les images passent automatiquement par le redimensionnement d'images de HubSpot : chaque module demande de vraies largeurs d'affichage avec un srcset, fixe largeur et hauteur pour éviter les sauts de mise en page, charge l'image principale de la page en priorité et tout le reste en différé. HubSpot sert des formats plus légers aux navigateurs qui les prennent en charge.
• CSS et JavaScript sont chargés par module : une page n'embarque que le code des modules qu'elle utilise. Le theme n'ajoute aucune bibliothèque externe, aucune police web au-delà des deux que vous choisissez dans les réglages, et aucun suivi de sa part.
• Vidéo : la vidéo de fond du hero ne charge que ses métadonnées avant de jouer, et les lecteurs des lightbox ne sont chargés qu'à l'ouverture.
• Les animations sont légères et débrayables : un seul réglage du theme les coupe toutes.

Mesuré avec l'outil Lighthouse de HubSpot sur les templates du theme, celui-ci dépasse largement les seuils de la marketplace, sur ordinateur et sur mobile, en performance, accessibilité et bonnes pratiques.

Performance : ce qui reste entre vos mains

Accessibilité : ce que fait le theme

Le theme est construit dans l'esprit WCAG 2.1 AA :

• titres sémantiques (choisissez la balise de titre sur chaque module, un seul h1 par page),
• un lien d'évitement vers le contenu principal, des anneaux de focus visibles, une utilisation complète au clavier des menus, accordéons, dialogue de recherche, menu mobile et lightbox (Échap ferme, le focus revient là où il était),
• des cibles tactiles de 44 px minimum,
• des contrastes de texte AA avec la palette livrée,
• des libellés pour lecteurs d'écran sur chaque commande, tous modifiables dans les groupes Accessibility labels des modules,
• l'interrupteur Motion and animations des réglages du theme, et la préférence « réduire les animations » du navigateur toujours respectée : les compteurs affichent leur valeur finale, le défilement et les orbites s'immobilisent, les rotations automatiques s'arrêtent, le hero affiche son poster.

Accessibilité : ce qui reste entre vos mains

1. Pensez au contraste quand vous changez la palette. Un accent très clair sur blanc échouera — vérifiez votre couleur principale sur blanc et sur la couleur de votre panneau sombre.
2. Renseignez toujours le texte alternatif des images que vous téléversez. Chaque champ image du theme en a un ; laissez-le vide seulement pour les images purement décoratives (un logo dont le nom est écrit à côté, une texture de fond).
3. Gardez un seul h1 par page et un ordre logique de h2 / h3 en dessous. Le champ Heading tag (SEO) des modules est là pour cela ; la taille visuelle se choisit séparément.
4. Rédigez des libellés de liens et de boutons explicites — « Lire l'étude de cas » plutôt que « Cliquez ici ».

Voir aussi

• Réglages du theme — Motion and animations, ombres
• Images et marques
• Vidéo