Web Performance, From ZERO To HERO

Web Performance, From Zero To Hero

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 Performance Important? 🤔

There are many reasons why web performance is important. Here are the most important ones:

1. User Experience 👌 A fast website will provide a better user experience, stats show that 53% of users will abandon a website if it takes more than 3 seconds to load. (Source: thinkwithgoogle.com)
2. Search Engine Optimisation ⚙️ 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 that of a slow website, mostly because of your hosting service's bandwidth and CPU usage.

A good user experience 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 response time of the backend.
4. High response time of the database.
5. Unoptimized backend computations.
6. Unoptimized frontend computations.

How to Improve Web Performance? 🚀

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

• Client Side Profiling:
  - Lighthouse.
  - WebPageTest.
  - Chrome DevTools.
  - PageSpeed Insights.
• Server Side Profiling:
  - Clinic.js (For NodeJs apps).
  - VisualVM (For JVM-based apps).
  - profiling module (For Python apps).

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.

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 data.

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.

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

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.

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.

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 that are not supposed to be changed based on recent actions.

Backend Computations:

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.

Parallelism: Choose the right pattern for your parallel backend computations (multi-threading, multi-processing, multi-tasking… ), some computations don’t need to be done sequentially, you can use parallelism to speed up your backend computations.

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

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

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

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.

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.

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,

In this article, we have seen the importance of web performance and how to improve it. I hope you enjoyed it and learned something new. If you have any questions or suggestions, feel free to leave a comment below. If you liked this article, please share it with your friends and colleagues. Thank you for reading 🙏

Originally published at https://frenchtechlead.com on August 8, 2022.