How can I make my frontend run quicker

When we try to improve user experience for a website, good design and nice flow definitely matter.

But what else should be also taken into account?
Yes! It's performance!

Even if we use the awarded design for our website, if any actions on the web take 10 seconds to load not many people would use the website.

Then let's discuss how to improve web performance.
The followings are what helped me (and my team) to improve performance on our web app.

1. Use code bundler, use code bundler wisely!
   Now days, when you create an app with framework like next or nuxt, bundlers are also set-up as default. But wait a second, what is bundler? To use it smart put in small research about tools you are using.

2. Lazy loading
   This is very simple and nice way to improve initial loading time.
   When you first load the page, we load all related code from server.
   What about the components that wouldn't be rendered now? Do we also load them? Normally yes, unless you are using lazy loading.

3. API call bundling / caching
   Making multiple API calls often is worse than making a single bundled api calls due to waiting time, server loads, less http request overhead. And having proper caching logic also helps to make less requests to server.
   But we need to make sure these aren't always THE ANSWER.
   Maybe we want to get the result for main api call to render this data to user first!
   Accidentally showing stale data to user could be fatal error!

4. Image Compression
   Using compressed images on the right places can help improving data fetching speed.

   • load low-quality images for small thumbnails
   • compress before image upload (or before returning image from BE)

Then happy coding everyone!
If you want to learn more/detailed knowledge for the topic, I also recommend to read: https://www.freecodecamp.org/news/the-front-end-performance-optimization-handbook/ and apply it to your very own projects!