Top 10 Tips For Building High Performance Websites

A typical website is a large web application that does more than host a few web pages. A website typically involves backend databases, APIs or data access services, web servers and services, backend services, and front-end web pages.

This article is for web developers and software architects who want to build high-performance, scalable websites. This article lists key factors I consider when making my next enterprise scalable Web application.

A website’s performance is a significant factor in user engagement and retention. Research suggests that if a website takes longer than 3 seconds to load, users leave immediately and don’t return. Website performance is the speed of a web page to download, render, and display in a web browser. Website performance is measured in Page Load Time. The page load time is when it takes a browser to download and display the entire contents of a web page. Besides average page load time, average domain lookup time, average redirection time, average server connection time, average server response time, and average page download time are other factors considered when measuring a website's performance.

 

Good web developers must understand various factors affecting a website's performance and scalability. The following lists the top 10 factors that affect website performance:

1. Poor selection of web frameworks
2. Unoptimized web pages
3. Poorly designed APIs
4. Unoptimized SQL
5. Bad database design
6. Insufficient hardware resources
7. Slow third-party services
8. Shared resources on the Web server
9. File download size
10. Increased web traffic

Discuss these factors individually, so you can better decide when to build your next scalable, high-performance website.

1. Poor selection of a Web framework

There are several web frameworks available to build websites. Some of the most popular Web development frameworks or languages are PHP, JavaScript, Angular, React, and ASP.NET. While these frameworks may seem similar, there are specific reasons these frameworks are designed. Some frameworks are good for building data-heavy applications; some are mobile-friendly, and some work better for multiple devices.

Each framework is designed for a specific purpose. Therefore, when architecting your website, you must research these frameworks and choose the best framework that suits your needs.

One of the biggest mistakes Software Architects and business owners make is, selecting a Web framework based on “What You Know.” This is the foundation of a web project. Unfortunately, the selection of the wrong framework means disaster. 

PHP, ASP.NET, Angular, React, J2EE, and Ruby on Rails are popular Web development frameworks. JavaScript is the most used and popular language for the Web. Several popular JavaScript frameworks are being used to develop sizeable scalable Web applications, such as Angular, React, and NodeJS. Here is a recommended article: Top 10 JavaScript Frameworks in the World 

You can also use a hybrid approach by using multiple frameworks. For example, you can use separate backend and front-end frameworks. For our new C# Corner platform, we’re considering using .NET Core (now .NET 5) as the backend and React as front end framework. Here is a list of Top Front-end frameworks.

2. Unoptimized Web pages

Poorly designed web pages are one of the significant reasons many highly-trafficked websites are slow to load and respond. This technique is also known as Front end optimization. The good news is it’s easy to optimize Web pages by simplifying HTML, CSS, and web controls.

The following is a list of the top 10 key actions (reference Front End Optimization). 

1. Clean up the HTML Document
2. Optimize CSS Performance
3. Reduce External HTTP Requests
4. Minify CSS, JS, and HTML
5. Enable Prefetching
6. Increase Speed with a CDN and Caching
7. Compress Your Files
8. Optimize Your Images
9. Use a Minimalistic Framework
10. Secure website with HTTPS

3. Poorly designed APIs

APIs are the bridge between the web pages and the database. APIs transfer data from data sources to web browsers and vice versa. If not appropriately designed, APIs could clog the data pipes and degrade your app's performance. Software architects must use API best practices and architectural and coding guidelines. 

4. Unoptimized SQL

Unoptimized SQL queries (or stored procedures) are one of the common reasons data-heavy web applications are slow. Web developers who are not experienced in writing optimal SQL queries can easily add additional stress on a database server. It’s easy to find out if your SQL queries are a problem. You can run SQL optimization tools available in the market. Most of these tools have recommendations on how to fix SQL queries. Learn here How to Optimize SQL Queries. 

Many database engines, such as SQL Server, provide query optimization and tuning tools. SQL Server's automatic tuning feature can notify you when your database requires Tuning. Check out Automatic Tuning here: https://docs.microsoft.com/en-us/sql/relational-databases/automatic-tuning/automatic-tuning?view=sql-server-ver15

Database Engine Tuning Advisor is another helpful tool you may use: https://docs.microsoft.com/en-us/sql/relational-databases/performance/database-engine-tuning-advisor?view=sql-server-ver15.

Several other tools are available in SQL Server, such as Performance Dashboard, QTA, Open Activity Monitor, and more. Here is a list of these tools: https://docs.microsoft.com/en-us/sql/relational-databases/performance/performance-monitoring-and-tuning-tools?view=sql-server-ver15

You can also look for tools like RedGate, SQL Sentry, etc. 

5. Bad database design

A bad database design can highly impact a website’s performance. This is because thes is because the database stores website-related data, including, including text and raw data. Therefore, a database must be appropriately designed for performance reasons.

Lousy database design affects the performance of SQL queries. Learning if you’re not a database expert or DBA may take a while. Perhaps you should hire an expert to analyze your database and prepare a recommendation report.

This is probably the most challenging component to fix. All stored procedures, SQL queries, backend jobs, and data layer code are written based on database tables. Unfortunately, the lousy design of tables also means slow SQL queries.

You can hire an expert DBA to analyze your database and help you optimize the tables and queries to fix a bad database design.

6. Insufficient hardware resources

Hardware resources could be the reason for a slow website if a website gets a lot of traffic. For C# Corner, hardware resources have always been a challenge. Hardware resources include processor speed, hard drive speed, storage size, memory, network speed, and firewalls.

Most hosting service providers have tools to analyze hardware resources' usage and performance.

7. Slow third-party services

Third-party services and APIs are often needed in large scalable complex websites. Third-party services and APIs may also change from time to time. Your website must ensure that any update in third-party APIs is up to date at your end. One of our clients uses a third-party API to authenticate and register new members. I know this third-party vendor changes API calls every few months, breaking my client’s authentication.

8. Shared resources on the Web server

If you’re using a hosting company’s shared server or shared resources, you want to make sure your Web app has enough resources allocated to it.

The only way to fix this is to allocate enough resources to your Web app. If unsure, you may want to talk to your hosting provider. Most of the hosting providers also have resource consumption reports and monitoring.

9. Data and File download size

If you provide file downloads on your website, the size of the data and file download and the user’s internet speed could affect the website's performance.

Ensure you compress data and files before they are uploaded to your website. You want to squeeze, for example, if your website serves images and icons like C# Corner does.

If your web pages provide a large data display and tables, try to download data in chunks visible on the page.

10. Increased web traffic

Websites with high traffic can impact a website’s performance drastically. If any previous points are not taken care of, increased website traffic can worsen it. If you have a poor front-end framework, bad SQL or database, or insufficient hardware resources, more traffic will add to your problems.

Increased traffic is a good problem to have. The only way to fix this is to optimize website components, including front-end pages, SQL, and APIs. You definitely will need to add more hardware power to the servers.

When building a website that may get a ton of traffic, you want to make sure that you choose a scalable and high-performance database engine. For example, some databases are not designed for highly trafficked websites. 

11. Progressive and responsive

Data access and data download can lead to slow website responses. Lousy database design and unoptimized SQL queries and stored procedures pair often lead to slow answers from database to UI. Making a website a progressive web app (PWA) is one of the growing technologies these days. PWA technology allows a Website to cache data in a local browser and even lets you access it in offline modes. The service worker's use will enable PWAs to access data access and other operations in the background worker threads. Optimized and caching images also help. I highly recommend looking into PWA if you’re looking to build blazing-fast Web apps. Here is a free online training on PWA: https://www.c-sharpcorner.com/learn/build-progressive-web-apps 

Test Website Performance

This is a bonus point. You can check a website’s performance by using several free tools. A website’s performance is directly related to the speed of the website, which is also the response time. Ideally, you want to test a website’s performance before it goes live.

The top 5 website speed test tools include TestMySite, YSlow, WebPageTest, GTMetrix, and Google Analytics. Check out the Top 5 Website Speed Test Tools to learn more about these tools.

PageSpeed Insights

Google’s PageSpeed Insights is one of the most popular online tools for analyzing and generating a  reportweb page report. The following is a report of C# Corner’s home page. A score above 90 is a good score.

 

The tool provides a detailed analysis and report on the problems in a Web page and how to fix these problems.

 

PageSpeed Insights uses Lighthouse, an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. In addition, it addition, it addition, it has audits for performance, accessibility, progressive web apps, and more.

Speedometer is one of the top recommended tools for Web performance and standards. Check out: Speedometer 3 (browserbench.org)

Further Readings

Here is a list of some interesting, related articles: 

1. Top Website Performance Testing Tools
2. Tips and Tricks to Improve ASP.NET Web Application Performance
3. How to Build Secure Websites