Performance Optimization

As Michael Jordan said once, "You can practice shooting eight hours a day, but if your technique is wrong, then all you become is very good at shooting the wrong way. Get the fundamentals down, and the level of everything you do will rise. " It is true for software development as well. If we emphasize a little more on the fundamentals, most of the issues or rudimentary problems can be eradicated, including performance or security. Here, I am putting down some of the basic best practices and related aspects that may help in the performance optimization of the solution.

Basic Rules -

Certain rules should be kept in mind when optimizing performance:

• Performance tuning?must?be part of every project.
• Do not optimize early in the development cycle.
• Performance is only as good as the weakest link.
• Always think about capacity vs. volume.
• Optimize important things first.
• Never optimize without?realistic?goals.

Scope Definition

First and foremost, the performance matrix ( scope) must be defined. It can be started by defining technical and business use cases and the related scope and load information including each page and flow's Work-load model.

• Most important business use cases
• Most critical technical use cases

The next step is?key performance indicators (KPI)?need to be defined. Examples of common KPIs include:

1. End to end response time
2. Server response time
3. Response time for a single component
4. Response time for the services
5. Number of idle threads in the thread pool
6. Number of free connections
7. System resources such as CPU and I/O access

Test Methodologies

The next step is defining test methodology, and It can be segregated into four types.

• Single component tests
• Combined component tests
• Going Live scenario
• Error scenarios

Measuring Performance?

There are two things one should keep in mind when dealing with performance improvements:

• Always start with an audit. It creates a baseline and provides you with helpful tips on where to improve.
• Make one change at a time, then measure. Verify changes individually to measure if they indeed give you better performance.

Load test -The thumb rule is "if you can not measure it, you can not improve it". Load test is to measure and see what might be causing bottlenecks. For Load testing, the selection of tools is one of the important steps. Following are some of the market leaders in this section.

• JMeter
• Load Runner

After optimization, one needs to test again to confirm the impact.

Optimization

Any optimizations made must be tested to ensure they have:

• Not affected the functionality
• Been verified with the load tests before being released

Reporting

After completing, one needs to have an automatic report, so that people can have a holistic view of the state of the system after performance testing. It can include the following attributes.

• Any critical errors encountered
• Non-critical issues which will still need further investigation
• Any assumptions made during testing
• Any recommendations to arise from the testing

Factors that may impact the Application's performance?

• Home/start page with lots of functionality
• Loading large JS bundles as part of the initial load of the applications
• Not effectively using lazy loading
• Using large size images without any image compression
• Using the same website/ APIs for Mobile and Desktop
• Preloading all the data in the browser instead of considering user preferences or personalization.
• Not adopting CDN to deliver the content(at least static content) to the global audience
• Invalid network/tool configurations

Performance Optimization Best practices?

Server-Side Optimizations

1. Configure compressions

This can greatly reduce the size of HTTP responses and has the most impact. Compress as many file types as possible.?Tool suggestion-?Brotli

2. Minimize HTTP requests

While compression can save significant amounts of data, you can further cut down page load times by minimizing the number of HTTP requests. Some common techniques you can use are:

• Bundling assets together. Combine JavaScript and CSS files to reduce the number of requests. If bundle sizes are too large then split them into smaller chunks.
• Use sprites. With sprites, multiple images can be delivered in one single request. You can then reference individual images by using the background-position property in CSS.

3.Use a CDN

Using a content delivery network can help reduce response times. A CDN is a collection of servers distributed across the globe. It aims to help deliver content to users faster by choosing the server closest to the user’s location. CDN can cache static assets, such as images, fonts, or PDF files.

Providers: Amazon Cloudfront, Akamai, Azure CDN, etc.

4.API/Services

Caching can drastically improve the performance of the application if configured optimally. By employing caching, one can reduce the GET queries on the databases and reduce the network calls. Starting from Object caching, it is used to store the processed data into a cache-store. The cached data will get served for the incoming requests.

Providers: Memcached, Redis cache, Ignite, EhCache, etc. These cache providers are available as part of the cloud provider as well.

As far as APIs are concerned, API results can be cached at APIGateway.?

5.Database best practices?

Relational databases are difficult to scale when compared to NO-SQL. Consider exploring NO-SQL databases when evaluating databases when possible, it should be considered after technical assessment of the project.?

Below are a few of the techniques helpful while tuning the relational database/Query optimization

• Created Optimized indexes
• Determine the expected growth and design your database
• Select fields instead of using ‘SELECT *’
• Foreign keys can impact performance negatively. Please move your foreign key validation to the business layer if possible
• Explore possibilities to use
• Run your scheduled jobs in non-business hours
• Indexes can negatively impact data modification operations. Ensure indexes are disabled when loading the huge amounts of data
• One schema may not be suitable for all the requirements. If you have a reporting system, consider having a reporting database
• Configure notifications when a query is executing on the server beyond defined threshold times.

Client-Side Optimizations

Optimize HTML

• Keep all scripts at the bottom.
• Reduce the number of DOM elements: The more DOM elements you have, the more bytes going to download

Optimize CSS

• Reduce the complexity of selectors:
• Use preloading of CSS
• Use CSS sprites
• Avoid @import to include external stylesheets

Optimize JavaScript

• Use web workers for complex calculations: JavaScript runs on the main thread in the browser.
• Use the coverage tab: The coverage tab can be a powerful tool to see which code you truly need on your page load.
• Using?async?and?defer?while loading the JS files into the browse
• use preload and prefetch
• Ensure you have enabled caching on your JS files (Every application comes with hashing the JS files. Ensure you are enabling them)
• Remove unused packages or be attentive towards the size of the installed package
• Use CDN to cache your static files like JavaScript, CSS, and images
• Use compression tools to optimize the file sizes over the network

Optimize images

• Use CSS in place of images: The best way to reduce the weight of images is to not use them. We often have complex UI elements with tiny design details.
• Use vector images: Vector images are resolution- and scale-independent, making them a good fit for visuals.
• Use the right raster format: Try to choose between the three main types:JPG, PNG, or GIF. If you need animated visuals, you are left with GIF. If you need to preserve fine details, you are left with PNG. For everything else, go with JPG.
• The image size can be reduced however it needs to be communicated with business.
• Avoid using large size images as part of the application (define max size and apply across the app)
• Optimize your images without losing the quality?

Network

Network configuration is one other key area where the performance of an application depends on.

• Configure network monitoring tools to identify when there is a sudden surge of requests
• Enable notifications for your network failures and warnings
• Ensure Autoscaling groups are configured and battle-tested before enabling them in production
• Configure HTTP2 protocol for faster retrievals
• Ensure your applications are tested from various geographical regions

Audit Tool Recommendations- Every digital business requires a regular audit. All of the tools listed below are free to use for regular auditing.

Lighthouse

Lighthouse?should be used as an audit tool to use. It’s built right inside Chrome. You can reach it through the Audits tab.

Webhint

Webhint?provides you with deep details not only on performance but other aspects as well, such as common pitfalls or security issues.

GTmetrix

Just like the previous two,?GTmetrix?helps you discover performance issues and provides you with optimization opportunities. It generates a report for you with the most impactful issues at the top.

Performance tab

The Performance tab in Chrome lets you analyze runtime performance. It provides you with all sorts of details, ranging from FPS drops to long-running scripts and how long it takes your site to render and paint everything.

Dynatrace and Appdynamics or other cloud-specific system health services - These are not free however, immensely useful for tracing the bottleneck in code or in heap. These must be use for checking the health of the system on regular basis.

Conclusion- As we all know, performance is a vital attribute in the success of the platform. It is extremely important for all the business domains, like eCommerce (B2B/B2C)where the performance of the platform can impact the conversion rate and eventually the direct business and sales.

Resources -

https://www.dhirubhai.net/redir/general-malware-page?url=https%3A%2F%2Fwww%2ekeycdn%2ecom%2Fblog%2Fwebsite-performance-optimization

https://medium.com/walmartglobaltech/an-approach-to-application-performance-optimisation-cdb8ea192cdf

https://medium.com/geekculture/the-fundamentals-of-software-development-the-core-process-9ffaa6f8fabf

https://www.webtips.dev/10-critical-performance-optimization-steps-you-should-take

https://josephjguerra.medium.com/optimizing-website-performance-faba64a1dcff