Optimizing for Super Sonic Speed in Vue.js & Gridsome

Speed should be treated as a feature rather than just something to work on after your app is fully operational, in this talk I would cover the key thing's you need to get working to make your Vue app as fast as possible, I would walk you through performance optimization in Vue and how to check for what exactly could be optimized. The other part of this talk would revolve around Gridsome and how it changes everything for Static Site rendering and also best practices you have to follow while building your Gridsome app from the ground up.

Presented at the VueJS Amsterdam Conference

Location: Amsterdam, Netherlands.

Transcript

1. 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
2. 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
3. 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
4. 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
5. VueJS has out of the box, Performance as a feature. Issn't that great? Optimizing for Super Sonic Speed in Vue.js & Gridsome
6. VueJS is powerful enough to build powerful single page applications. Optimizing for Super Sonic Speed in Vue.js & Gridsome
7. Some Benefits Optimizing for Super Sonic Speed in Vue.js & Gridsome - Out of the box Performance - Easy to Learn - Easy to maintain
8. 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.
9. 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.
10. Speed == Great user experience Optimizing for Super Sonic Speed in Vue.js & Gridsome
11. 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
12. 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.
13. Performance is about improving conversions and the success of users. Optimizing for Super Sonic Speed in Vue.js & Gridsome
14. Performance in VueJS Optimizing for Super Sonic Speed in Vue.js & Gridsome
15. Keep the core of your application simple and straight forward, Do not over-engineer. Optimizing for Super Sonic Speed in Vue.js & Gridsome
16. 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
17. 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
18. 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
19. 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.
20. 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.
21. Optimizing for Super Sonic Speed in Vue.js & Gridsome Loading Fetched data + Client’s Output
22. 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.
23. 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
24. 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.
25. 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
26. Optimizing for Super Sonic Speed in Vue.js & Gridsome Lozad, Installation In your prefered project directory use your prefered package manager to install Lozad.
27. Optimizing for Super Sonic Speed in Vue.js & Gridsome Lozad, Installation Import lozad into your vue project and commence configuring Lozad.
28. Optimizing for Super Sonic Speed in Vue.js & Gridsome Tools Vue-Lazyload: This is a lightweight Vue module for lazyloading images in your applications.
29. 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.
30. Optimizing for Super Sonic Speed in Vue.js & Gridsome Vue-Lazyload, Installation Call the vue-lazyload library via CDN
31. Optimizing for Super Sonic Speed in Vue.js & Gridsome Vue-Lazyload, Installation Import the installed vue-lazyload library in your application.
32. Optimizing for Super Sonic Speed in Vue.js & Gridsome Progressive Web Apps in VueJS.
33. 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
34. Optimizing for Super Sonic Speed in Vue.js & Gridsome Performance in Gridsome
35. 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:
36. 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
37. 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.
38. Optimizing for Super Sonic Speed in Vue.js & Gridsome WebPack Bundle Analyzer
39. 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
40. 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
41. 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
42. 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
43. 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