Skip To Article

Performance

The MyST 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[1] 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 MyST is designed to rebuild and rerender the site in <150ms, and has scroll-restoration so you don’t loose your place. This speed 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 Score

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 performance, search engine crawling, and accessibility. These scores indicate the real-world performance of a site as well as can effect search engine rankings.

Lighthouse score run Sept 15, 2022 on deployed site using Curvenote’s global CDN.

Figure 1:Lighthouse score run Sept 15, 2022 on deployed site using Curvenote’s global CDN.

Some performance and accessibility considerations:

  • Semantic HTML used for articles, asides, figures, nav, and captions, including limited use of generic divs and spans where we can.
  • Anchor tags for all interactive content, that work when Javascript is not enabled
  • Prerendering math on the server, reducing page load size (for javascript) and improving render speed and cumulative layout shift.
  • 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
  • Lazy-fetching unused javascript
  • Bundling and eliminating code for the entire site
  • Ensuring appropriate contrast in text and background in the default themes
Footnotes
  1. PRPL is a pattern designed to improve performance of webpages:

    • Preload the most important resources.
    • Render the initial route as soon as possible.
    • Pre-cache remaining assets.
    • Lazy load other routes and non-critical assets.
MyST MarkdownMyST Markdown
Community-driven tools for the future of technical communication and publication, part of Jupyter.