Static sites === great performance
A presentation at JSVidCon in May 2020 in by Debbie O'Brien
Static sites === great performance
Why Nuxt? Debbie O’Brien Frontend Tech Lead @Patterson Agency @Nuxt Team Member Contributor @webpack Writer @Ultimate Courses Teacher @Vue School Organiser @MallorcaJS, Vue Spain Debbie O’Brien @debs_obrien
Debbie O’Brien Why Nuxt?
Get rid of the LAMP, Get rid of the MEAN, Let the JAM take over
What I will Cover The new frontend Static v’s Dynamic Case Study Performance Tips Useful Links
What has changed Everything is pre-rendered at build time No Execution at request time Functionality client-side
It’s all about the api’s Search Functionalities Payments Authentication and so much more…
What we gain Improves security Improves performance Better developer experience Easy deployment
Definition of Static Lacking in movement, action, or change, especially in an undesirable or uninteresting way
TaeKwonDo Static Dynamic
TaeKwonDo
Static is the new Dynamic Static site > cdn > user No Server needed
TaeKwonDo and Static Sites
Push and deploy Increase confidence Staging same as production Deploy anywhere, anytime Web hooks on content change
That’s a lot of Generation with Static Sites
Going Nuxt Nuxt is not just a static site generator Nuxt is a progressive Vue.js Framework
Benefits of Nuxt “file-based” routing Automatic Code splitting of routes Prefetching more than 50 modules
SSR, SPA or Static SSR: mode: ‘universal’, SPA: mode: ‘spa’, Static Site: nuxt generate
Case Study patterson.travel
Patterson Travel 5 Layouts 32 page components 38 components 8 plugins 9 modules 21 pages of docs
Booking Engine
Booking Engine === SPA SPA inside a Static Site
SPA Fallback generate: { fallback: true, exclude: [/booking/] }
How it works Site is pre rendered Hydration Kicks in content up to date - API calls on navigation
API call on navigation
I just want full static What if I don’t want to call the api every time i navigate to a page?
Full Static One api call on build Call the payload on navigation instead of the api
static module
payload.json
Calling the payload
Static Sites === Great Performance
Accessibility Semantic HTML Labels for forms Aria tags Alt tags
Chrome dev tools for Accessibility Color Contrasts
Auto optimise your images <img src=“https://res.cloudinary.com/idemo/image/ q_auto,f_auto/cloudinary”/> upload/
Lazy Load your images
PWA modules: [‘@nuxtjs/pwa’] Add the icon.png to the static folder
CSS Stats
modern mode nuxt build —modern
Code split from the start components: { () => import(‘@/ components/the-footer’) TheFooter: }
Lazy load your translations lazy: true
Tailwind + PurgeCSS modules: [‘@nuxtjs/tailwindcss’] purgeCSS: { mode: ‘postcss’, whitelistPatterns: [/datepicker/] }
webpack analyzer
webpack analyzer
JAMstack - Do we need it? Hell yeah!
Thank you Debbie O’Brien Frontend Tech Lead Consultant Open Source Contributor https://github.com/debs-obrien/nuxt-boilerplate-project debs_obrien
Useful Links Nuxt Boilerplate Awesome Nuxt TailwindCSS PurgeCSS CSS Stats Cloudinary Lighthouse Audit @debs_obrien
