This checklist is a living document used by us at Skyward. Feel free to use it for your own projects too.

Select the right tools for the job

You want to choose the best combination of tools that gives you the smallest output possible with just as much flexibility as you need with a little room for expansion in the future.

• [ ] What JS framework do you need?

  • [ ] Client Side Generation (CSR)

    React, Vue, Svelte

  • [ ] Static Site Generation (SSG)

    NextJS/Gatsby/Nuxt/Gridsome/Sveltekit/Astro/11ty

  • [ ] Server Side Rendering (SSR)

    NextJS/Nuxt/Astro

  • [ ] Incremental Static Generation (ISR)

    NextJS

Fetching Data

You want to fetch as little data as you can, prioritising what you need to actually load the current page and deferring anything else.

• [ ] Only fetch data you need (Consider GraphQL)
• [ ] Defer anything not needed until after the page has loaded
• [ ] Prefetch additional data before it’s needed

Reducing Javascript

Javascript bundles can get huge. You want to make sure you’re only serving what you need for the current page, in as small a bundle as possible.

• [ ] Minify assets (gzip/brotli)
• [ ] Don’t send unused Javascript
• [ ] Only essential Javascript is blocking
• [ ] Consider swapping for more optimised packages (Preact vs React) if functionality remains the same
• [ ] Consider only hydrating interactive elements on the client (Astro/Islands) if functionality remains the same

Reducing CSS

CSS can lead to a surprising amount of additional bloat. You want to serve as little CSS as you can by cleverly reusing styles and bundling as small as possible.

• [ ] Avoid CSS-in-JS or prefer bundlers that compile CSS-in-JS into pure CSS