Optimizing for Super Sonic Speed in Vue.js & Gridsome If everything seems under control, you're not going fast enough. - Mario Andretti SHODIPO AYOMIDE | VUEJS AMSTERDAM CONFERENCE 2020, AMSTERDAM, NEATHERLANDS 

Shodipo Ayomide Senior Developer Advocate & Developer Program Manager - GitHub Star - Cloudinary Media Developer Expert - Community Evangelist Optimizing for Super Sonic Speed in Vue.js & Gridsome @developerayo on Twitter & GitHub 

VueJS is a progressive JavaScript framework for building user interfaces for the web. Optimizing for Super Sonic Speed in Vue.js & Gridsome What is VueJS 

VueJS is designed to be simple and very flexibe when it comes to changes and features. Optimizing for Super Sonic Speed in Vue.js & Gridsome 

VueJS has out of the box, Performance as a feature. Issn't that great? Optimizing for Super Sonic Speed in Vue.js & Gridsome 

VueJS is powerful enough to build powerful single page applications. Optimizing for Super Sonic Speed in Vue.js & Gridsome 

Some Benefits Optimizing for Super Sonic Speed in Vue.js & Gridsome - Out of the box Performance - Easy to Learn - Easy to maintain 

Why does speed matter? Optimizing for Super Sonic Speed in Vue.js & Gridsome The attention span of alot of people is very limited, and in website design it’s all about instant delivery. Notwithtstanding how powerful of up to date the features you have on your product, if it's slow, users will turn away. 

Why does speed matter? Optimizing for Super Sonic Speed in Vue.js & Gridsome Users love instant delivery of what they want, if you can optimize successfully and use the right technologies and your performance speed to top notch, you just gained a paying user. 

Speed == Great user experience Optimizing for Super Sonic Speed in Vue.js & Gridsome 

Speed == Great user experience Optimizing for Super Sonic Speed in Vue.js & Gridsome Performance is the first impression your product gives to users. - You never get a second chance to make a good first impression. - Will Rogers 

Speed == Great user experience Optimizing for Super Sonic Speed in Vue.js & Gridsome Speed tell's users the team behind a tool took their success into consideration and made speed a first. 

Performance is about improving conversions and the success of users. Optimizing for Super Sonic Speed in Vue.js & Gridsome 

Performance in VueJS Optimizing for Super Sonic Speed in Vue.js & Gridsome 

Keep the core of your application simple and straight forward, Do not over-engineer. Optimizing for Super Sonic Speed in Vue.js & Gridsome 

Your application's core need's to be super fast, users need to receive what you are rendering as fast as possible, For this you need to load your components asynchronous Optimizing for Super Sonic Speed in Vue.js & Gridsome 

Loading Content asynchronous is done when building large applications, where we divide the app into smaller parts rather then having everything all in one plave "that reduces delivery speed because of the number of things to process that arint improtant at that time." Optimizing for Super Sonic Speed in Vue.js & Gridsome Asynchronous Loading 

Using Async Components will help you deliver to the user from the server when a certain component is needed and not all at once. Optimizing for Super Sonic Speed in Vue.js & Gridsome Asynchronous Loading 

Optimizing for Super Sonic Speed in Vue.js & Gridsome Lazy Loading The idea of Lazy Loading media files in the web helps reduce the risk of some of the web app performance problems to a minimal. Response time is drastically reduced, media files loading speed is increased. 

Optimizing for Super Sonic Speed in Vue.js & Gridsome Lazy Loading Lazyloading images and media files should only be used to speed up the performance of a webapp or decrease server use. 

Optimizing for Super Sonic Speed in Vue.js & Gridsome Loading Fetched data + Client’s Output 

Optimizing for Super Sonic Speed in Vue.js & Gridsome Lazy Loading images account for 60% of the bytes of average needed to load a webpage. 

Optimizing for Super Sonic Speed in Vue.js & Gridsome What Happens When media files are Lazy Loaded? - Content's appear as you scroll thanks to lazy media assets. - When a large sized image is supposed to appear into the viewport, a placeholder image will be visible instead so the user is not kept waiting. - The original image will quickly replace the placeholder image once it has been fully loaded 

Optimizing for Super Sonic Speed in Vue.js & Gridsome Why Lazy loading Media Files? - Loading/Performace speed is increased to a high level. - Reduction of the work for the browser. - A low number of HTTP requests. - Mobile Data and Bandwidth Saving. 

Optimizing for Super Sonic Speed in Vue.js & Gridsome Tools Lozad: a highly performant, light lazy loader in pure JS with no dependencies for images, iframes and more, using the IntersectionObserver API 

Optimizing for Super Sonic Speed in Vue.js & Gridsome Lozad, Installation In your prefered project directory use your prefered package manager to install Lozad. 

Optimizing for Super Sonic Speed in Vue.js & Gridsome Lozad, Installation Import lozad into your vue project and commence configuring Lozad. 

Optimizing for Super Sonic Speed in Vue.js & Gridsome Tools Vue-Lazyload: This is a lightweight Vue module for lazyloading images in your applications. 

Optimizing for Super Sonic Speed in Vue.js & Gridsome Vue-Lazyload, Installation In your prefered project directory use your prefered package manager to install Vue LazyLoad. 

Optimizing for Super Sonic Speed in Vue.js & Gridsome Vue-Lazyload, Installation Call the vue-lazyload library via CDN 

Optimizing for Super Sonic Speed in Vue.js & Gridsome Vue-Lazyload, Installation Import the installed vue-lazyload library in your application. 

Optimizing for Super Sonic Speed in Vue.js & Gridsome Progressive Web Apps in VueJS. 

Optimizing for Super Sonic Speed in Vue.js & Gridsome Progressive Web Apps in VueJS - @vue/cli-plugin-pwa - Install the workbox-webpack-plugin -Configure "vue.config.js" - Setup and import your Service worker 

Optimizing for Super Sonic Speed in Vue.js & Gridsome Performance in Gridsome 

Optimizing for Super Sonic Speed in Vue.js & Gridsome Performance in Gridsome Properly size images in Gridsome, Gridsome offers a `g-image` component that outputs an optimized progressive image. This component loads a very light base64 blurred image by default, and, using an intersection observer, it swaps the blurred picture with the larger, higher-quality image as soon as it comes in the viewport. You can specify width, height and quality attributes to get the most optimization possible, as well as cropping the image easily: 

Optimizing for Super Sonic Speed in Vue.js & Gridsome Performance in Gridsome You can specify width, height and quality attributes to get the most optimization possible, as well as cropping the image easily 

Chrome Lighthouse Optimizing for Super Sonic Speed in Vue.js & Gridsome Lighthouse is an open-source, automated tool for improving the quality of web pages by auditing. 

Optimizing for Super Sonic Speed in Vue.js & Gridsome WebPack Bundle Analyzer 

Optimizing for Super Sonic Speed in Vue.js & Gridsome Install the webpack-bundle-analyzer via `NPM` or `YARN`. This will add the webpack-bundle-analyser to your `package.json` file. WebPack Bundle Analyzer 

Optimizing for Super Sonic Speed in Vue.js & Gridsome Setup the webpack-bundle-analyzer as a plugin in your `webpack.config.prod.js` file WebPack Bundle Analyzer 

Optimizing for Super Sonic Speed in Vue.js & Gridsome Once you have setup the webpack bundle-analyzer you then have to run the `npm run build` command in your terminal, and it’ll generate another host. WebPack Bundle Analyzer 

Optimizing for Super Sonic Speed in Vue.js & Gridsome Visit the generated host by clicking the IP, `127.0.0.1:8888` to view the visuals of your JavaScript Bundles WebPack Bundle Analyzer 

Questions? Follow me on Twitter & GitHub @developerayo Thank You! Optimizing for Super Sonic Speed in Vue.js & Gridsome SHODIPO AYOMIDE | VUEJS AMSTERDAM CONFERENCE 2020, AMSTERDAM, NEATHERLANDS