Static generated sites === great performance. What are you waiting for?

A presentation at JAMstack_conf San Francisco in October 2019 in San Francisco, CA, USA by Debbie O'Brien

Slide 1

Slide 1

Static sites === great performance

Slide 2

Slide 2

Debbie O’Brien Frontend Tech Lead @Patterson Agency Contributor @webpack Contributor @Nuxt Writer @Ultimate Courses Teacher @Vue School Media Developer Expert debs_obrien Debbie O’Brien

Slide 3

Slide 3

Get rid of the LAMP, Get rid of the MEAN, Let the JAM take over

Slide 4

Slide 4

What I will Cover The new frontend Static v’s Dynamic Case Study Performance Tips Useful Links

Slide 5

Slide 5

What has changed Everything is pre-rendered at build time No Execution at request time Functionality client-side

Slide 6

Slide 6

It’s all about the api’s Search Functionalities Payments Authentication and so much more…

Slide 7

Slide 7

What we gain Improves security Improves performance Better developer experience Easy deployment

Slide 8

Slide 8

Definition of Static Lacking in movement, action, or change, especially in an undesirable or uninteresting way

Slide 9

Slide 9

TaeKwonDo Static Dynamic

Slide 10

Slide 10

TaeKwonDo

Slide 11

Slide 11

Static is the new Dynamic Static site > cdn > user No Server needed

Slide 12

Slide 12

Static Site Generators Nuxt, VuePress, Gridsome, Next, Gatsby, snapper.js, Eleven.ty, jekyll, hugo

Slide 13

Slide 13

TaeKwonDo and Static Sites

Slide 14

Slide 14

Push and deploy Increase confidence Staging same as production Deploy anywhere, anytime Web hooks on content change

Slide 15

Slide 15

That’s a lot of Generation with Static Sites

Slide 16

Slide 16

Going Nuxt Nuxt is not just a static site generator Nuxt is a progressive Vue.js Framework

Slide 17

Slide 17

Benefits of Nuxt “file-based” routing Automatic Code splitting of routes Prefetching more than 50 modules

Slide 18

Slide 18

SSR, SPA or Static SSR: mode: ‘universal’, SPA: mode: ‘spa’, Static Site: nuxt generate

Slide 19

Slide 19

Case Study patterson.travel

Slide 20

Slide 20

Slide 21

Slide 21

Patterson Travel 5 Layouts 32 page components 38 components 8 plugins 9 modules 21 pages of docs

Slide 22

Slide 22

Booking Engine

Slide 23

Slide 23

Booking Engine === SPA SPA inside a Static Site

Slide 24

Slide 24

SPA Fallback generate: { fallback: true, exclude: [/booking/] }

Slide 25

Slide 25

How it works Site is pre rendered Hydration Kicks in content up to date - API calls on navigation

Slide 26

Slide 26

API call on navigation

Slide 27

Slide 27

I just want full static What if I don’t want to call the api every time i navigate to a page?

Slide 28

Slide 28

Full Static One api call on build Call the payload on navigation instead of the api

Slide 29

Slide 29

static module Add the static module nuxt generate

Slide 30

Slide 30

payload.json

Slide 31

Slide 31

Calling the payload

Slide 32

Slide 32

Static Sites === Great Performance

Slide 33

Slide 33

Accessibility Semantic HTML Labels for forms Aria tags Alt tags

Slide 34

Slide 34

Chrome dev tools for Accessibility Color Contrasts

Slide 35

Slide 35

Auto optimise your images <img src=“https://res.cloudinary.com/idemo/image/ q_auto,f_auto/cloudinary”/> upload/

Slide 36

Slide 36

Lazy Load your images

Slide 37

Slide 37

PWA modules: [‘@nuxtjs/pwa’] Add the icon.png to the static folder

Slide 38

Slide 38

CSS Stats

Slide 39

Slide 39

modern mode nuxt build —modern

Slide 40

Slide 40

Code split from the start components: { () => import(‘@/ components/the-footer’) TheFooter: }

Slide 41

Slide 41

Lazy load your translations lazy: true

Slide 42

Slide 42

Tailwind + PurgeCSS modules: [‘@nuxtjs/tailwindcss’] purgeCSS: { mode: ‘postcss’, whitelistPatterns: [/datepicker/] }

Slide 43

Slide 43

webpack analyzer

Slide 44

Slide 44

webpack analyzer

Slide 45

Slide 45

JAMstack - Do we need it? Hell yeah!

Slide 46

Slide 46

Slide 47

Slide 47

Thank you Debbie O’Brien Frontend Tech Lead Consultant and Teacher Open Source Contributor @debs_obrien

Slide 48

Slide 48

Slide 49

Slide 49

Useful Links Nuxt Boilerplate Awesome Nuxt Patterson Travel TailwindCSS PurgeCSS CSS Stats Cloudinary Lighthouse Audit @debs_obrien