Accessibility & performance
mystjs site existing, modern web-frameworks including Remix and React. These tools come out-of-the-box with prefetching for faster navigation, smaller network payloads through modern web-bundlers, image optimization, and partial-page refresh through single-page application. We follow the PRPL Pattern where possible.
As an example, try hovering over the navigation on this page (potentially with your network development tools open!), the entire page will be fetched based on your intent (i.e. hovering over the link for a moment). This includes downloading any assets for additional styling on the upcoming page. Note that many assets are shared between pages, and only the actual content is fetched (i.e. the AST and page metadata), not the full HTML page, which again makes for smaller network payloads and speed for browsing! Content is also cached if you re-visit a page.
When working locally in authoring content
mystjs is designed to have as hot-reloads, can rebuild/rerender the site in <150ms, and has scroll-restoration so you don't loose your place. The speed of
mystjs can dramatically improve the authoring experience as it allows you to preview changes rapidly.
The real-world deployment of your site will depend on the infrastructure that you use to serve it. See deployment for more information on options for sharing your site.
Lighthouse is a tool included in Chrome that measures accessibility, performance, and search engine performance (see lighthouse on GitHub). Although not perfect, the tool does do a good job at highlighting issues with performace, search engine crawling, and accessibility. These scores indicate the real-world performance of a site as well as can effect search engine rankings.
Some of the performance and accessibility considerations we have taken in
- Semantic HTML used for articles, asides, figures, nav, and captions, including limited use of generic
spans where we can.
- Optimizing images to next-generation formats (e.g.
webp), and providing fallbacks for older browsers (through image source sets)
- Providing figure captions as alt-text for images
- Lazy-fetching syntax highlighters
- Bundling and eliminating code for the entire site
- Ensuring appropriate contrast in text and background in the default themes