How to speed up the web

When a company sets up a website, web application or e-shop and the project succeeds, i.e. people actively use it, it's just the beginning. Over time, the website starts to slow down. And it is at this point that many ask the question: "How do I make the web faster?" There are many ways to improve web performance. But rarely is it enough to simply turn something on. In this article, I'll describe what the options are for speeding up a site and how to systematically address the problem of a slow site.

Most people expect a expert to come in and just tweak something or turn something on and suddenly the web application is faster. But it never is.
Yes a experienced IT specialist can give several types, which can be simple to apply in practice and some of which will have a satisfying enough effect on web speed. However, even an experienced IT specialist has to do the analysis, to find out which parts of the application are working within normal values and which parts of the application are problematic and thus need to be focused on that particular part.

Customized solution vs existing solution vs service

Once you want to address the customization of an application to optimize the speed of the web application, you need to realize that you don't always have the ability to make customizations or it's not always wise to make customizations

Service

If you are using a service, the opportunities to improve speed are minimal. Because with such an application, actually a service, you don't have the ability to modify the source code. But what you can influence is not to use such an application in a way that degrades speed. Thus, you need to focus on not inadvertently degrading speed during implementation.

Existing solutions

For example, the opensource solution Wordpress for blog or Prestashop for eshop, are pre-made opensource solutions that you can start using right away. (You can install the opensource solution yourself for free or hire an IT expert to install and configure it for you and train you for a fee.) There are opensource solutions with many features, some of their features, if you use them and you have a lot of data, can negatively affect your speed. Likewise, various third party modules (extensions) can have a bad effect on the speed of such a web application.

With these open solutions, you have the ability to edit the application code and run the application on your own server frequently and if needed, so you also have the ability to tweak the server settings. Opensource solutions, then, are software where you have great speed optimization capabilities. However, you need to be careful that your customizations are done in such a way that they don't break other functionality and that it will be a simple upgrade of the application. Otherwise you can set yourself up for a lot of problems in the long run.

When working with existing solutions, it's important to consider how your changes will impact the performance of the application. In particular, focus on:

• features used
• extensions/modules selected
• the effect of your modifications on the speed of the system

In addition, these factors are also greatly influenced by the amount of data processed in the application.

Analysis

To speed up the web you need to know what is slow. Therefore, the first thing you need to do is to perform an analysis of your site's loading speed. If more than one person will be visiting your site, then do a load-test the site. This will tell you if the site works under load and how many visitors can use your web application at the same time.
You will have concrete information and numbers as output:

• how long it takes the server to respond - to load the first byte of the page
• how long it takes to display the page to the user
• if your web application and server are handling the situation well, when you have a lot of visitors on the site
• exactly how many visitors can use the web application at any one time

Frontend vs backend

Frontend is what runs on the user's browser and backend is what runs on the server. Thus, the user's overall impression of the speed of a web application consists of these two parts.

Backend speed

The backend speed you measure simply corresponds to the measurement called TTFB (Time to First Byte). If you do it over the network, the effect of network slowness is added to it.
TTFB (Time to First Byte) defines the time from sending a request to the server to receiving the first byte of the response. This parameter is critical to the overall page load speed, which has a direct impact on the user experience and consequently SEO (search engine optimization). The TTFB is a key performance indicator for websites and applications.

Frontend Speed

Because today's web applications have a lot of features that are rendered only after they are loaded in the user's browser, so time, for a user to actually see a page can be significantly longer than the time it takes to get a response from the server. Especially if there are other queries to the server or even queries to other applications to display the page.
In the case of computationally intensive code, the performance of the user's device (computer, phone) also has an impact. It also takes much longer to load large data e.g. images on a slow network.

An approximate verification of the speed of the web from the perspective of the frontend can be done by a normal user as follows, by viewing the web application on an old and therefore slow (inefficient) device (an old or cheap phone or computer).

Specific ways to speed up a web application

The origins of where the web application speed problem lies can vary. You need to check and possibly optimize this:

• web server settings
• database setup
• cache DB
• application cache
• bad database structure
• optimally created SQL queries to the database
• bad backend application code
• bad backend code - JavaScript
• reading large amounts of data

These areas need to be checked and optimized if there are problems.

Web server settings

Web server setup plays a key role in the overall speed and performance of a web application. Some of the most important factors include cache configuration, compression settings (e.g. gzip or brotli), proper routing of requests, and the choice of appropriate server software such as Apache, Nginx, or LiteSpeed. Performance is also affected by the number of requests processed simultaneously, the size of responses, network latency, and the use of HTTP/2 or HTTP/3.
An improperly configured server can significantly increase application responsiveness and ruin the user experience.

Database Settings

Database setup has a major impact on the speed of a web application, because most dynamic websites rely heavily on it.
Performance is also affected by the choice of database system, for example: MySQL/MariaDB, PostgreSQL, Microsoft SQL, NoSQL databases MongoDB, Redis.
Key factors include query optimization, proper table indexing, cache setup (e.g. query cache or external cache like Redis). You can typically increase performance by increasing configuration parameters, but beware for some parameters this is not the case and you also have to take into account that you have some hardware limits mainly RAM. And you have to fit the cached data in RAM, otherwise the database will slow down.

Cache DB

The database server has its own cache, so it can automatically cache repeating queries and thus speed up their processing. The database cache greatly affects the speed of a web application, because it reduces the need to repeatedly query the database for the same data. This leads to faster responses and less load on the database server.

For example, queries that contain the current time can be sped up in a simple way. If you don't need the exact time in seconds, but just need for example, the current time to the minute or ten minutes, you can cache the result of such a query and reuse it. This will significantly reduce the number of computationally intensive database queries and improve overall application performance.

SQL

SQL queries have a direct impact on the speed of a web application, because every database query can cause a delay in retrieving data. Query optimization, which includes using the right indexes, avoiding inefficient JOIN operations, and minimizing the number of database queries, contributes to query performance. Complex or poorly designed SQL queries, such as queries that traverse entire tables instead of using indexes, can significantly slow down an application. Other factors include data aggregation and grouping, which can be computationally intensive, as well as unnecessary selection of large amounts of data that ultimately go unused. Using limits to restrict the number of rows returned and optimizing queries to retrieve only the necessary data leads to significant application speedup. Good database schema design and regular maintenance, such as query analysis and optimization, are key to achieving good performance.

Modern programming frameworks such as PHP/Symfony, which uses the Doctrine database layer. Doctrine lets you create database tables and SQL queries quickly and well. The other 10% of database queries you have to write and optimize manually yourself.

Application Cache

The application cache is used to temporarily store data at the application level. In an application, you can cache data that you get from third-party applications, from a database, or otherwise, for example, in a complex way from different sources. This significantly speeds up the application response time and reduces the load on the entire server.
Of course, you must then invalidate such a cache properly.

Backend code

Backend code has a major impact on the speed of a web application, because it determines how efficiently and quickly the server processes requests and generates responses.
If the frontend has to fetch data, and the backend is slow then the frontend will be slow too.
The speed of the backend depends on the speed of getting the data from the database, so you need to have fast SQL queries, so you need to have SQL queries written correctly and a well setup database server.

Backend code optimization itself involves writing efficient algorithms, minimizing unnecessary operations, Using the right design pattern and architecture is also an important factor, which can improve scalability and code maintenance. A high number of API calls, poorly written loops, inappropriate use of recursion or unnecessary repetition of operations can significantly slow down application performance. It is always true that well-written and optimized code contributes significantly to the speed and stability of a web application.

JavaScript

JavaScript has a significant impact on the speed of a web application, because much of the interactivity and dynamic behavior on modern web pages depends on this language. The way JavaScript is loaded, executed, optimized, and overall programmed has an impact on performance. The size and structure of JavaScript files, the way they are loaded (synchronous vs. asynchronous), and the use of techniques such as lazy loading or code splitting can significantly speed up page load times. It is also important to minimize and compress JavaScript to reduce its size and speed up data transfer between the server and client. The way DOMs are manipulated and how effectively features such as debouncing or throttling are used to limit the number of operations performed can also affect performance. Poorly written or unoptimized JavaScript that frequently manipulates the DOM or performs complex calculations can slow down an application and negatively impact the user experience.

A typical problem is that there is a lot of JavaScript code on the frontend that takes time to render the page. You need to know if such code needs to be executed or not. Whether you can optimize the code in question or not. Whether such code doesn't call asynchronously and hence most of the page loads before this less important element.

A completely unnecessary problem is when a page loads information with many separate queries, instead of loading information in bulk with one query.

If you're loading data from your own server, you can optimize this loading or directly insert this data into the page on the backend. If you are loading something from other servers, you won't affect the loading speed much, so load the data asynchronously and render the page with empty space in between. Or maybe you don't even need to load the data, just insert an illustrative photo and load the data only when the user views or clicks on the page.

Typical application performance issues

I most often encounter these particular problems with web applications:

• Full page rendering is often prevented by long-running JavaScript execution. Because there is a lot of different JavaScript or a lot of queries being executed
• Poorly designed DB application.
• Poor application code, resulting in the webserver taking a long time to send a response.
• Development does not take into account that the application in real life will have much more data.

Some customizations are difficult to impossible to implement, for example, the database structure is hard to change. To optimize it, you need to know the application, understand what it's for, and then you can optimize it better and make it faster.

Choosing a technology

What technology you use also has a significant impact on performance. No one would run anything on Windows these days unless forced to. Everyone is using Linux or running applications in the Cloud, which realistically also runs on Linux.

There are ready-made specialized technologies for typical purposes. Use them! For example, ElasticSearch is used for text searching. Data is stored in relational or NoSQL databases.

So think about what you need and choose the right tool, it will save you time and provide a performance optimized solution.

Performance Impact

Of course, hardware, operating system, software versions such as: database, PHP, type of virtualization also have an impact on performance.

It may happen that you have a performance drop on some software version. For example, if you have poorly written queries, performance may be acceptable on one version of the database and significantly worse on another version. Similarly, for example VMware has worse performance when reading data from disk compared to Linux KVM (e.g. Proxmox), even though you'll be running the same VPS on both. In the combination of these two neglected issues, you will run into significant performance degradation

Definitely don't fall into a state where you only develop and optimize your application using a certain single version of software. Then you run the risk of being stuck in place and statistically, in the long run, such applications are inferior and therefore slower, plus they are problematic and have trouble upgrading.

How to optimally address performance

Optimizing performance is a long haul. It doesn't make sense to make optimization a priority. But at the same time, don't neglect it. Dedicate yourself to tropicalization on an ongoing basis. Address performance dips early. And then you won't have to hire an expert to speed up your application.
If the problem is not related to one page, but simply the server (apache/NginX and database) are not keeping up, the simplest solution is to increase performance, i.e. CPU or RAM.

If you need help with optimizing and speeding up your web application feel free to contact me contact me.