Skip to content

5 Tips to Improve Your Site's Web Performance

This article was written over 18 months ago and may contain information that is out of date. Some content may be relevant but please refer to the relevant official documentation or available resources for the latest information.

5 Tips to Improve Your Site's Web Performance

When thinking about which framework to choose, we sometimes first consider which one is the fastest or the easiest to deploy. However, we should be thinking about which framework will promote the best web performance for our particular site.


According to a recent study:

"One second of delay reduces page views by 11%."

When we talk about performance on your site, we are considering a lot more than whether your user is using Windows, Mac, or Linux. We are also thinking about whether your users are using tablets, mobile devices, or even low performance networks.

This performance directly affects your product/website. Some examples of this could be:

1. Use next-gen image format like .WebP or .AVIF

Using a next-gen image format such as WebP, AVIF, or JPeg XR helps reduce pictuze size by 20-40% without compromising the quality.

This will result in improved image loading, especially if your site uses too many images or the ones it does use are heavy.

2. Minify HTML/CSS as much as possible.

Minifying your code is a process in which you remove all unnecessary characters in your source code. These characters can be whitespace, comments, line breaks, etc. While having white space or comments can be useful when developing, when loading your site, they can cause your source file to be heavier than it should be.

It is important to know that this process does not change the functionality of your code, but reduces the size and allows a more efficient loading of your site.

3. Use a proper CDN.

A CDN (Content Delivery Network) is a geographically distributed network that delivers the site and any other resources used within it, to users.

Basically, it does the delivery of HTML, CSS, images, and also Javascript through servers physically close to the user.

4. Use Fallback fonts

If you use a custom font, it might not be able to be downloaded or it could take a while to load. The site will use this fallback to properly display it.

5. Remove unused code from dependencies

Another place where optimizations can be made is in dependencies. Certain dependencies like React.js include propTypes even in the production bundle, where they are not needed. Lodash includes methods that you may not use, but that still increase the bundle size.

There are tools to remove this unused code from dependencies.

You can see them here: GoogleChromeLabs/webpack-libs-optimizations

 

 

Conclusion

With some changes, we can improve the performance of our sites. Regardless of the framework you use in yours, these tips can help you, and offer a much better user experience.

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

Let's innovate together!

We're ready to be your trusted technical partners in your digital innovation journey.

Whether it's modernization or custom software solutions, our team of experts can guide you through best practices and how to build scalable, performant software that lasts.

Prefer email? hi@thisdot.co