Walking lessons

A large system is always faced with the constant increase in traffic from users, and at the same time has to control the growing amount of data. You start to notice obvious signs of stagnation, slow system performance, and poor user experience.

In this article, I will introduce some useful techniques to optimize and improve performance, making your system work more efficiently. Let’s go!

Client

1. Cache

As one of the top priority and important techniques that you need to apply immediately and immediately to your system

Use cache to store data temporarily and reduce the number of requests sent to the server. The browser has 3 main ways to store temporary data, including:

• Local Storage : Data is stored in the browser with no expiration time and remains even when you close the tab or close the browser
• Session Storage : Data is stored on the browser, but when you close the tab or close the browser, the data will be deleted
• Cookies : Data that is stored on the browser even if you close the tab or close the browser. With Cookies, the storage of data is limited and you can set how long it is stored

2. Choose Data structure & Algorithm

This is considered one of the important factors when building a system, in order to improve performance, increase running speed and optimize the efficiency of your application.

Choosing the wrong data structures and algorithms can slow down the system and reduce performance

3. Tree shaking & Bundle code

Using compilers like Vite, Webpack, etc. will help you to remove unused code, reduce file size and at the same time package your files to deploy your application.

4. Code splitting

Unlike bundle code (repacking the source code to reduce the number of requests), with code splitting, your source code will be split and broken down, downloading only the necessary files when needed, reducing the load time and execution. source code exam

5. Async/defer scripts

Use the async or defer attribute when importing script files into HTML to speed up page loading

As you may or may not know, when the browser parses the script tag, it will block the HTML rendering process to load and execute the Javascript. This will annoy your users. Therefore, Javascript tags need to be placed at the end of the body tag or if placed in the header, need to use the async or defer attribute.

6. Optimize images

Websites with lots of images can slow down your site and increase page load times. To solve this problem, you can apply lazy loading image technique to load images only when needed, i.e. when the user scrolls the page closer to the position of the image, then the image is loaded.

Make sure that the image size is designed to match the size displayed on the website

Use image compression tools to reduce file size while preserving image quality

Choose the right image format for each case. For example, use JPEG for images with complex colors and PNG for images with transparency or histograms.

7. Pagination

When users visit, using pagination to display part of the content in the page will help speed up the page load and reduce the load on the server.

Some strategies in pagination techniques are as follows:

• Basic pagination
• Infinite scrolling
• Load more

8. Debounce & Throttle

Debounce and throttle are two techniques used to control the execution frequency of functions during event handling in programming.

Debounce is a function that is called continuously and then stopped calling after how many ms before the function is actually executed.

Example: When a user types in a search box on a web page, the search handler function can be called repeatedly every time the user types a character. However, to avoid constant calling, we can use debounce to wait a period of time after the user stops typing, then the function will officially execute and process the keyword search.

Throttle limits the number of function calls in how many ms (how much is defined by me)

Example: When the user scrolls the web page, the scroll event will call and execute the function continuously. However, to avoid that situation, we can use throttle to limit the function to only be executed every 200ms for example.

9. Using CDN

To improve page load speed and user experience, using a content delivery network (CDN) is a smart choice.

CDN is a distributed server system located in many different geographical locations around the world. When users visit your site, the CDN loads resources (like images, CSS files, and Javascript) from the server closest to their location.

10. Using Web Workers

Web Workers is a technology in your browser’s Web API that allows you to perform tasks that run in the background on web pages. It acts as an independent worker type, without affecting the main thread of the site

11. Using Tech & Library

By choosing the right technology and libraries, you can save time and effort during development and ensure the best performance for your application.

12. Performance Testing & Evaluation

Perform testing and evaluate the site’s performance to identify issues and bottlenecks during page load. Use tools like Google Lighthouse, WebPageTest,… to measure and analyze your website’s performance, thereby understanding and improving specific performance issues

End

The above techniques will help you optimize your system and improve performance, providing a better user experience. However, it should be noted that each system has its own requirements and characteristics, so consider and apply the techniques that are right for your system. In the next Part 2 , I will share best techniques related to the server side. Thank you for reading.