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:
- Yelp reduced the first painting of content (75th percentile) by 45%, and the full Yelp page (75th percentile) by 25%. As a result, they saw a 15% improvement in their conversion rate.
- SportsShoes.com found that faster-than-average mobile visits were 41% more likely to convert than slower-than-average visits.
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.
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
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 Labs is a development consultancy focused on providing staff augmentation, architectural guidance, and consulting to companies.
We help implement and teach modern web best practices with technologies such as React, Angular, Vue, Web Components, GraphQL, Node, and more.