Skip to content
Mistral Studio

Performance and accessibility

What the theme does for you, and the two things that stay in your hands: contrast and alt text.

Updated August 23, 2026 · 3 min read · Applies from version 1.0.0

Mistral Pro is built so that a site assembled from its templates stays fast and usable by everyone without extra work. This article explains what is handled for you and what to keep in mind.

Performance: what the theme does

  • Images go through HubSpot's image resizing automatically: every module requests real display widths with a srcset, sets width and height to avoid layout shifts, loads the page's main image eagerly and everything else lazily. HubSpot serves lighter formats to browsers that support them.
  • CSS and JavaScript are loaded per module: a page only carries the code of the modules it uses. The theme adds no external library, no web font beyond the two you choose in the theme settings, and no tracking of its own.
  • Video: the hero background video loads only its metadata until it plays, and the lightbox players are loaded only when opened.
  • Animations are lightweight and opt-in: one theme setting turns them all off.

Measured with HubSpot's Lighthouse tooling on the theme's own templates, the theme scores well above the marketplace thresholds on desktop and mobile for performance, accessibility and best practices.

Performance: what stays in your hands

DoWhy
Upload images sized for their slot (see Images and brand marks).An oversized source still gets resized, but a source smaller than its slot will look blurry.
Keep the hero background video under about 3 MB, muted, without audio.It is the heaviest asset of the home page.
Turn on First block of the page on a media gallery that opens a page, and keep Image loading: eager on a featured post banner at the top of the blog listing.Tells the browser which image to load first.
Avoid stacking many auto-animated modules on one page.Each one is light, but attention and battery are not unlimited.

Accessibility: what the theme does

The theme is built to WCAG 2.1 AA intent:

  • semantic headings (choose the heading tag on each module, one h1 per page),
  • a skip link to the main content, visible focus rings, full keyboard operation of the menus, accordions, search dialog, mobile menu and lightbox (Escape closes, focus returns to where it was),
  • 44 px minimum touch targets,
  • AA text contrast with the shipped palette,
  • screen-reader labels on every control, all editable in the modules' Accessibility labels groups,
  • Motion and animations switch in the theme settings, and the browser's reduced-motion preference always honoured: counters show their final value, the marquee and the orbits stand still, auto-rotations stop, the hero shows its poster.

Accessibility: what stays in your hands

  1. Keep contrast in mind when you change the palette. A very light accent on white will fail — check your primary colour against white and against your dark panel colour.
  2. Always fill the alt text of the images you upload. Every image field in the theme has one; leave it empty only for purely decorative images (a logo whose name is printed next to it, a background texture).
  3. Keep one h1 per page and a logical order of h2 / h3 below it. The modules' Heading tag (SEO) field is there for that; the visual size is chosen separately.
  4. Write meaningful link and button labels — "Read the case study" rather than "Click here".

See also