Tips and Tricks to Make Your Web Apps Crazy Fast

A web application’s performance can make or break the user experience. Slow and unoptimized websites are often abandoned by users and rank lower in search engines. Find out how to use various tools and techniques to optimize performance and make your web apps crazy fast.

In the ever-evolving digital world, users are accustomed to using web applications that provide great user experience, are bug-free and—most importantly—are fast.

Users can be very impatient, and even a one-second delay can result in users leaving your app and going elsewhere. What’s more, Google and other search engines prioritize faster websites. Therefore, the performance and quick loading times are crucial to retaining users and even being visible to users through search engines.

In this article, we will cover multiple approaches to making web apps blazing fast.

Resize and Optimize Images

Unoptimized images can have a huge impact on a website’s loading times. Fortunately, there are a few things that can be done:

• Resize images and provide multiple versions with dimensions targeting various screen sizes. Loading a 5000x3000 image in a 500x300 space is a big waste of time and user’s bandwidth.

• Optimize using tools like Squoosh, Sharp or ImageMagick to reduce the image size without compromising quality.

• Use modern formats, such as Avif and Webp. They provide much smaller sizes and thus load faster. The HTML picture element can be used to let the browser decide what image type should be loaded.

<picture>
  <source srcset="/images/logo-400x119.avif" type="image/avif" />
  <source srcset="/images/logo-400x119.webp" type="image/webp" />
  <img
    src="/images/logo-400x119.png"
    width="200"
    height="59"
  />
</picture>

Prefetch with Priority Hints

You can let browsers know how to prioritize when resources should be fetched by utilizing resource hints. For instance, adding fetchpriority="high" to an image or a link will tell the browser it should be fetched immediately. On the other hand, resources with fetchpriority="low" would be fetched after the browser handled more important tasks.

<img src="header-image.png" fetchpriority="high" >
<img src="footer-image.png" fetchpriority="low" >

This approach is very useful for images that are not immediately visible in the viewport. What’s more, images can also be combined with loading="lazy", so the browser defers their loading until a user scrolls near them.

Use Lazy Loading and Tree-Shaking

Modern bundlers are able to remove unused code and split code into separate chunks. A very common approach is to lazy-load and split code by routes. In essence, if a user visits the homepage, the browser will fetch and execute only the code that is needed for it. When a user navigates to a different page, such as contact, the browser fetches resources needed for that page, and so on. Modern applications can have a lot of code, and shipping all of it to every user on every request is definitely not a great idea.

However, we don’t have to code split only by routes. It’s also a good idea to split and lazy-load functionality that is not immediately visible to users, such as modals or lazy load features that are complex and require a while to load and configure before they are ready to use.

Lazy-Load Third-Party Scripts

Websites can use various third-party services for things like analytics, error reporting, etc., usually via importing their SDK libraries. However, these can often be bloated and often are not crucial for the user’s immediate needs. Therefore, it’s definitely a good idea to defer loading and initializing third-party scripts until after the browser is done with fetching and executing the core functionality.

Minify Code and Bundle Production Builds

Nowadays, a lot of applications are built using tools like Vite, Webpack or custom bundlers provided by frameworks such as Next.js. These tools provide commands to run the development server and build a production version of the application. It’s crucial to always deploy the production build, as the development one has a lot of code that is not optimized. During the build process, bundlers optimize code using various techniques, such as minification, stripping white spaces and comments, and shortening long variable names to reduce the final bundle size.

Cache Service Workers

Another useful approach to improving performance involves utilizing service workers. While they won’t improve the performance when a user visits your website for the first time, service workers can cache fetched assets locally and serve them to the users on subsequent visits.

Use a Content Delivery Network (CDN)

If you have any static assets or pages, it’s definitely a good idea to utilize a Content Delivery Network (CDN). CDNs can serve your app’s static resources from locations that are close to your users, minimizing latency. Good examples of CDNs are Cloudflare CDN and Amazon CloudFront.

Compress Files

If you are deploying your own custom server, make sure you have enabled Brotli or Gzip compression on your HTTP server, as compressed files will be fetched faster by the browser due to their smaller size.

Streamline Fonts

Who doesn’t want their website to look great and stand out among competitors? Fonts are a great way to improve a website’s look and style. Unfortunately, fonts can have a considerable impact on a website’s loading time. Therefore, it’s important to minimize the number of fonts and styles used.

For example, if your website uses only 400 and 600 font variants, don’t import all the other available variants like 300, 500, 700 and so on. What’s more, instead of using custom fonts, you can default to system fonts, so your website won’t have to download any new ones.

Use Appropriate Hosting Providers and Services

Some hosting providers might offer services that are better suited to your application. For example, services like Render or Vercel automatically deploy static assets to a global CDN, which will provide users with low latency. In comparison, if you use a service that deploys your application only in one area, users who are far away from that region will need to wait longer for your website to load.

However, a hosting provider is not the only service that you should be concerned about. Another good example is a database provider. There are new database providers coming out every now and then, but you should make sure you use a service that is reliable and doesn’t have frequent downtimes. If your application relies on fetching data from a database before it is served to your users, your users will not be able to see much if your database is down.

Use Appropriate Tools to Check Performance

There are various tools that can be used to check a website’s performance, such as PageSpeed Insights, GTmetrix or Lighthouse. They check different aspects of a website’s performance, such as scripts’ blocking time, largest contentful paint (LCP), cumulative layout shift (CLS), time to interactive (TTI), and even provide tips on what is causing delays and suggest possible fixes.

However, after checking that your website is performant, it’s necessary to keep monitoring how fast it is to avoid introducing any regressions. This can be done by using performance monitoring services such as Pingdom and by introducing automated performance tests in your CI/CD pipeline. Instead of finding a perf regression that could affect users in production, it can be discovered before the website is deployed.

Conclusion

In order to achieve a fast web application, you will need a combination of good coding practices, server-side optimizations and careful choice of tools and third-party platforms. While there are many approaches to improving web performance, the tips mentioned in this article can serve as a great start to solving many performance bottlenecks, and even a seemingly sluggish website can be transformed into a blazingly fast masterpiece.