Web Performance 101

Akram MECHERI

Technical Leader | Blogger | Freelancer

As a passionate technical leader, I am skilled in FullStack Java development and have a strong background in DevOps, Cloud, and Kubernetes. I have a track record of delivering high-quality software, and I am always seeking to improve my knowledge and skills through continuing education and hands-on experience.

Get in Touch

What Does Web Performance Mean ? 🏎️

Web performance is the speed at which a website loads and how quickly it responds to user interactions. It is a critical factor in the success of a website. A slow website will have a high bounce rate and low conversion rate ℹ️. A fast website will have a high conversion rate and low bounce rate ℹ️.

Why Is Web Performanceimportant ? 🤔

1. User Experience 👌 A fast website will provide a better user experience, stats shows that 53% of users will abandon a website if it takes more than 3 seconds to load. (Source : thinkwithgoogle.com)
2. Search Engine Optimization ⚙️ Google has introduced web vitals ℹ️ and is considering page speed as a ranking factor. A fast website will rank higher in search engines, stats show that the first result in Google gets 34% of the clicks and the second result gets 17% of the clicks (Source: pollthepeople.app).
3. Conversion Rate 🤝🏻 A fast website will have a higher conversion rate. A slow website will have a lower conversion rate.
4. Bounce Rate 🚪 A fast website will have a lower bounce rate. A slow website will have a higher bounce rate.
5. Cost 🤑 The hosting cost of a fast website is more likely to cost less than the one of a slow website, mostly because of the bandwidth and CPU usage of your hosting service.

A good user expirience will lead to less stress and more productivity for your users, and will lead to less support tickets and more efficiency for your support team.

What are the Top Web Performance Killers ? 💀

1. Too many font/back network calls.
2. Too many database queries.
3. High reponse time of the backend.
4. High response time of the database.
5. Unoptimized backend computations.
6. Unoptimized frontend computations.

How to Improve Web Performance ? 🚀

1. Profiling: Before considering any improvement for a web app, we need to diagnose it, that’s what profiling is all about, many tools makes it possible to profile a web app, here are some of them:

   1. Client Side Profiling:

      • Lighthouse.
      • WebPageTest.
      • Chrome DevTools.
      • PageSpeed Insights.

   2. Server Side Profiling:

      • Clinic.js (For NodeJs apps).
      • VisualVM (For JVM based apps).
      • profiling module (For Python apps).

2. Frontend caching: You don’t need to send a GET request on each page refresh, you can cache the response of your HTTP calls and serve them from the browser’s cache. You can use the Cache-Control header to specify the cache duration of your HTTP calls, this is a must do for static assets like images, fonts, css, js, etc.

3. Backend caching: You don’t need to make a server-to-server call on resources that don’t change often, you can use in memory caching (like redis) to store non-volatile date.

4. Consider using a CDN: A CDN is a network of servers that are distributed across the globe, it will cache your static assets and serve them from the nearest server to the user, this will reduce the latency of your HTTP calls and will improve the performance of your website, Most CDNs implement caching and resource compression by default.

5. Assets Optimization: Make sure to compress your assets using gzip and to use next generation image formats like WebP, AVIF, etc.

6. Don’t Send It All At Once: You don’t need to send all the content of your web page at once, instead use lazy loading to load the content of your web page only when the user needs it, this concerns all kinds of resources like images, videos, fonts, and even API calls.

7. Optimistic UI: You can use optimistic UI to make your web app feel faster, this is a technique that consists of updating the UI before the server responds to the user’s action, this will make the user feel like the action was executed instantly, and will make the user feel like the app is faster.

8. Change Detection: On each asynchronous event, Angular performs change detection over the entire component tree. Although the code which detects for changes is optimized for inline-caching, this still can be a heavy computation in complex applications. A way to improve the performance of the change detection is to not perform it for subtrees which are not supposed to be changed based on the recent actions.

9. Backend Computations:

   1. Load Balancing & Horizontal Scaling: Make sure that your backend is well designed so that you can distribute the backend computations across multiple servers, this will reduce the response time of your backend and make it more scalable.
   2. Parallelism: Choose the right pattern for your parallel backend computations (multi-threading, multi-processing, multi-tasking… ), some comutations don’t need to be done sequentially, you can use parallelism to speed up your backend computations.

10. Backend Tuning: Make sure to tune your backend to suite your available resources and the needs of your application, Depending of your infrastructure, you should tune each layer of your backend to use the right amount of CPU, RAM, Disk, DB Pool Size, Network, etc.

11. DataBase Tuning: Tune your SGBD to suite your needs and the available resources of your DB Serve, PGTune is a good tool for tuning Postgres Databases.

12. DataBase Queries: Database calls can be expensive, so avoid to re-call the database to fetch a resources that another layer of your backend already fetched.

13. DataBase Indexes: A SQL index is used to retrieve data from a database very fast. Indexing a table or view is, without a doubt, one of the best ways to improve the performance of queries, so make sure to put indexes on the columns that you use in your queries.

14. DataBase Denormalization : It’s a technique that consists of storing redundant data in a database to avoid expensive joins, this will improve the performance of your database queries.

15. Pick The Perfect Location For Your Servers: Make sure to choose the right location for your servers, so that it will be the closest possible to your users, this will reduce the latency of your HTTP calls.

Final Thoughts,