A presentation at Full Stack Fest in in 08870 Sitges, Barcelona, Spain by Debbie O'Brien
Why you should be Vue-ing your performance
Debbie O’Brien Frontend Tech Lead @Patterson Agency in Mallorca Teacher @Vue School Writer @Ultimate Courses Contributor @webpack and @Nuxt and other stuff debs_obrien
Performance
Run Performance Tests Be aware of what your shipping Use webpack analyzer to see what is being bundled Run an audit in chrome dev tools Check your css with CSS Stats
Dev Tools Audit
Analyse your bundle
Analyse your bundle
Code Splitting Just change this: import BaseHero from ‘~/components/BaseHero.vue’ components: { BaseHero, }, to this: components: { BaseHero: () => import(‘~/components/BaseHero.vue’), },
Lazy Load your translations locales: [ { code: ‘en’, iso: ‘en-US’, name: ‘English’, file: ‘en.js’, }, ], lazy: true, langDir: ‘i18n/’,
Lazy Load your Images import Vue from ‘vue’ import VLazyImage from ‘v-lazy-image’ Vue.component(‘VLazyImage’, VLazyImage) <v-lazy-image src=”http://lorempixel.com/400/200/” />
Lazy Load your Images
Use a CDN for your images <v-lazy-image src=“https://res.cloudinary.com/idemo/ image/upload/q_auto,f_auto/cloudinary”/>
Styles Utilities classes === less code to maintain A utility-first CSS framework
Styles
Use PurgeCSS Remove Unused CSS
Styles
Build Static Sites Static Sites are faster Just do it
Put Performance First
Aim for Perfection
Thank you @debs_obrien
Performance
