Image Optimization - Quick Win for Improving Performance in Vue & Nuxt Apps

Rate this content
Bookmark

Improving Performance of Vue or Nuxt apps is not an easy task. However, there are some quick wins that you can implement easily that will drastically improve the performance of your website. One of such quick win is Image Optimization. In this talk, I will teach you how to optimize images on the fly with Digital Asset Managements services like Cloudinary or Content Management Systems, utilize the concept of Lazy Loading, use compressed format of images like WEBP, and many more!

This talk has been presented at Vue.js London 2023, check out the latest edition of this JavaScript Conference.

FAQ

Front-end techniques for improving website performance include optimizing image formats and sizes, using lazy loading for images, and employing image optimization services to adjust images on the fly.

Image optimization is crucial because it significantly reduces load times and improves user experience. Optimizing images ensures they load faster, which is particularly important in e-commerce where quick access to product images can enhance the shopping experience.

Modern image formats like WebP or Avif are generally lighter than JPEG and PNG, which means they load faster and consume less bandwidth. However, they are not supported by some older browsers such as Internet Explorer.

Image optimizing services allow for on-the-fly optimization of images, adjusting parameters like format, size, and quality based on what is needed at the moment. This dynamic capability helps in significantly reducing image file sizes without losing quality, enhancing page load speeds.

Lazy loading is a technique that defers loading of images until they are actually needed, such as when they enter the viewport. This method reduces initial load times, saves bandwidth, and improves user experience by loading images contextually rather than all at once.

Yes, image optimization can positively affect SEO by improving page load times and user experience, both of which are factors in search engine rankings. Properly optimized images can also be indexed more effectively, further enhancing SEO.

NUX Cloudinary provides specific functionalities and optimizations from Cloudinary, offering more detailed image transformations. On the other hand, NUX image is designed to be generic, allowing for integration with multiple providers using one API.

Jakub Andrzejewski
Jakub Andrzejewski
31 min
12 May, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Image optimization is crucial for website performance and user experience. Services like IPX and Cloudinary can help optimize images on the fly. Cloudinary offers additional functionalities and transformations for image management. Lazy loading and the lazy pattern can improve website performance by deferring image loading. Optimized images deliver a better user experience. Fallbacks can mitigate the impact of service failures.

1. Introduction to Image Optimization

Short description:

In order to improve website performance, we often focus on the back-end. However, there are several front-end optimizations we can make. Image optimization is a quick win for improving performance and user experience. Let's start with a poll to see how many of you are using and optimizing images on your websites. Optimizing images is crucial for a well-performing website and enhances user experience. Today, we will focus on image optimization and its impact on website performance.

Okay, do you hear me well? Yeah? Good. Okay. So, you might be thinking that in order to improve performance of the website, we need to focus on the back-end stuff. Right? So, we need to optimize or make the SQL queries more efficient. We need to go for the cache implementations and stuff like that. But in reality, there are actually several things we can do on the front end itself to make it more performant. And this inspired me to basically take the topic of image optimization for today's presentation as it is, in my opinion, one of the quick wins for improving performance in your website.

So, as I've already introduced me. My name is Jakub and I work at Vue Storefront. And I'm also a Google Developer Expert in web performance. This is also one of the reasons why I selected the topic. And I'm also an ambassador in those organizations, so if you're interested in talking about any of them, just find me after the talk and we can just share the knowledge. And yeah. Talk about it. And as Dom also mentioned, we met almost two years ago on the last edition of Vue.js Live, so I'm pretty happy to be here once again. And yeah, share my knowledge with all of you.

So I will start the presentation with a little poll. So please raise your hand if you are using images in your website. That's basically really straightforward, right? It's yes, we are using the images in our websites. And now please raise your hand if you are optimizing the images. Okay. So quite a few of you, but not so many. So you can clearly see that we are all using the images, but we are not optimizing them. While optimizing images is, in my opinion, the crucial part of a well-performing website. And it's not only about the results of the Lighthouse or any other web performance auditing tool. It's also good for user experience because users want to get the data as soon as possible. Like the images, if you are looking for e-commerce website, you want to have the product image as soon as possible because you want to buy the product. So let's talk first about the image formats. So there are many technical differences between one image format and another. And in my today's talk, I wanted to focus on the optimization.

2. Importance of Image Size and Format

Short description:

The size and load time of images are important factors in website performance. Formats like WebP and Avif are lighter than JPEG and PNG, but not supported by Internet Explorer. Properly sized images prevent layout shift and improve load time. Core Web Vitals, such as largest contentful paint and cumulative layout shift, rely on properly sized images. Image optimizing services can help optimize images on the fly.

So basically the size and the load time of the image. So I want to focus only on one. And yes, be prepared there will be some more memes as well.

For the users, the usual difference between one image which is, let's say, in one format and the other image, which is in different format, is usually the same. You can't see the difference. They just look the same. The only difference is the size. And this is what I will be showing during the short demo later on. But in general, formats such as WebP or Avif, I hope I pronounced it correctly, are lighter than JPEG and PNG, but they are not supported by Internet Explorer. And I'm saying this because one of my friends, until today, is supporting application that still needs to be running on Internet Explorer. So he doesn't have a great job I would say.

Yes, so we talked about the image formats. There are also cases about the size, properly sized images. And I have seen too many production websites where they were basically fetching the image, for example, for a small icon, and the image was in a full HD resolution, and then it was like squeezed into the icon that was, for example, in the footer. So this might seem like a really, really strange issue, but it happens too often, I would say, for the modern websites.

So why should we have the images in a proper size? It's basically because of the load time. If we are fetching the images in the right format, the load time will be shorter and there will be also what is the second most important thing, we won't see the layout shift. Because you will have... if you've seen some talks or articles about the web performance, you probably know already about the Core Web Vitals. This is like the metric or set of metrics that we can use in order to check how our website is performing. So there are metrics such as first, largest contentful paint and cumulative layout shift. And having the properly sized images is important for both of them. But we can optimize those images by basically replacing... or converting the one of the images format into another one. We can just have the image in correct resolution from the very beginning. But in the majority of cases, we want to be able to optimize them on the fly. By using certain software. So for that, we can use image optimizing services. I'm not sure if there is a word such as this one or a key word. I just made it up.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

A Guide to React Rendering Behavior
React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
Top Content
This transcription provides a brief guide to React rendering behavior. It explains the process of rendering, comparing new and old elements, and the importance of pure rendering without side effects. It also covers topics such as batching and double rendering, optimizing rendering and using context and Redux in React. Overall, it offers valuable insights for developers looking to understand and optimize React rendering.
Speeding Up Your React App With Less JavaScript
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Top Content
Watch video: Speeding Up Your React App With Less JavaScript
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
Welcome to Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Welcome to Nuxt 3
Top Content
Nux3 has made significant improvements in performance, output optimization, and serverless support. Nuxt Bridge brings the Nitro engine for enhanced performance and easier transition between Nuxt 2 and Nuxt Read. Nuxt 3 supports Webpack 5, Bytes, and Vue 3. NextLab has developed brand new websites using Docus technology. Nuxt.js is recommended for building apps faster and simpler, and Nuxt 2 should be used before migrating to Nuxt 3 for stability. DOCUS is a new project that combines Nuxt with additional features like content modules and an admin panel.
One Year Into Vue 3
Vue.js London Live 2021Vue.js London Live 2021
20 min
One Year Into Vue 3
Top Content
Vue 3 has seen significant adoption and improvements in performance, bundle size, architecture, and TypeScript integration. The ecosystem around Vue 3 is catching up, with new tools and frameworks being developed. The Vue.js.org documentation is undergoing a complete overhaul. PNIA is emerging as the go-to state management solution for Vue 3. The options API and composition API are both viable options in Vue 3, with the choice depending on factors such as complexity and familiarity with TypeScript. Vue 3 continues to support CDN installation and is recommended for new projects.
React Concurrency, Explained
React Summit 2023React Summit 2023
23 min
React Concurrency, Explained
Top Content
Watch video: React Concurrency, Explained
React 18's concurrent rendering, specifically the useTransition hook, optimizes app performance by allowing non-urgent updates to be processed without freezing the UI. However, there are drawbacks such as longer processing time for non-urgent updates and increased CPU usage. The useTransition hook works similarly to throttling or bouncing, making it useful for addressing performance issues caused by multiple small components. Libraries like React Query may require the use of alternative APIs to handle urgent and non-urgent updates effectively.
Vue: Feature Updates
Vue.js London 2023Vue.js London 2023
44 min
Vue: Feature Updates
Top Content
The Talk discusses the recent feature updates in Vue 3.3, focusing on script setup and TypeScript support. It covers improvements in defining props using imported types and complex types support. The introduction of generic components and reworked signatures for defined components provides more flexibility and better type support. Other features include automatic inference of runtime props, improved define emits and defined slots, and experimental features like reactive props destructure and define model. The Talk also mentions future plans for Vue, including stabilizing suspense and enhancing computer invalidations.

Workshops on related topic

React Performance Debugging Masterclass
React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Top Content
Featured WorkshopFree
Ivan Akulov
Ivan Akulov
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
Vue3: Modern Frontend App Development
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
Mikhail Kuznetcov
Mikhail Kuznetcov
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
Building WebApps That Light Up the Internet with QwikCity
JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
Featured WorkshopFree
Miško Hevery
Miško Hevery
Building instant-on web applications at scale have been elusive. Real-world sites need tracking, analytics, and complex user interfaces and interactions. We always start with the best intentions but end up with a less-than-ideal site.
QwikCity is a new meta-framework that allows you to build large-scale applications with constant startup-up performance. We will look at how to build a QwikCity application and what makes it unique. The workshop will show you how to set up a QwikCitp project. How routing works with layout. The demo application will fetch data and present it to the user in an editable form. And finally, how one can use authentication. All of the basic parts for any large-scale applications.
Along the way, we will also look at what makes Qwik unique, and how resumability enables constant startup performance no matter the application complexity.
Next.js 13: Data Fetching Strategies
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Data Fetching Strategies
Top Content
WorkshopFree
Alice De Mauro
Alice De Mauro
- Introduction- Prerequisites for the workshop- Fetching strategies: fundamentals- Fetching strategies – hands-on: fetch API, cache (static VS dynamic), revalidate, suspense (parallel data fetching)- Test your build and serve it on Vercel- Future: Server components VS Client components- Workshop easter egg (unrelated to the topic, calling out accessibility)- Wrapping up
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Vue.js London Live 2021Vue.js London Live 2021
117 min
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Top Content
Workshop
Daniel Roe
Daniel Roe
We'll build a Nuxt project together from scratch using Nitro, the new Nuxt rendering engine, and Nuxt Bridge. We'll explore some of the ways that you can use and deploy Nitro, whilst building a application together with some of the real-world constraints you'd face when deploying an app for your enterprise. Along the way, fire your questions at me and I'll do my best to answer them.
React Performance Debugging
React Advanced Conference 2023React Advanced Conference 2023
148 min
React Performance Debugging
Workshop
Ivan Akulov
Ivan Akulov
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)