“blazing fast modern site generator for React”
- We really need CMSs
- We hate developing sites with CMSs
- Various services that solve a specific problem well
- Headless CMS solutions
=> Content is spread out
With a single CMS monolith you’re constantly making compromises.
- Adding new plugins
- Adding more tracking
- Integrating scripts and widgets
=> Performance regressions creep in
“Performant is the new responsive.” [1]
“53% of visits are abandoned if a mobile site takes longer than 3 seconds to load.” [2]
“every 100ms of latency costs 1% of sales” [3]
- [1]: https://www.gatsbyjs.org/blog/2018-10-16-why-mobile-performance-is-crucial
- [2]: https://www.thinkwithgoogle.com/data/mobile-site-abandonment-three-second-load/
- [3]: https://www.digitalrealty.com/blog/the-cost-of-latency/
- Demo: mobile Lighthouse audit of https://www.sharetribe.com/
This is not a complex CMS site!
- Precompute all the things
- Use all the cool new Webpack things
- Output a static site
- Trivialize caching, CDN usage, and hosting
“Modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup.”
- Pull in data -> build all the pages -> output a static site
- When data changes, build process is triggered
- A comprehensive Webpack setup
- Tons of data source integrations
- Headless CMS services
- Static files
- etc.
- Components define data needs using GraphQL
- Lots of plugins
- Data sources
- Transformations
- Third party services
- Custom
- Hot loading: code, data
- Image optimization
- Optimize, resize, lazy load
- Inline critical CSS
- Offline first, Service Workers
- Prefetching
- Guess.js
npm install –global gatsby-cli
gatsby –help
Questions?
Links: