It often happens that with the growth of the code base, the web application (site) starts to work more slowly. The page takes a long time to load. All of this annoys the end user, causing churn and less popularity. On the Internet, you can find many tips and ways to eliminate this deficiency. But I will also give some non-standard solutions that can be very appropriate in certain situations. I want to encourage the reader to make an optimized app from the very beginning.
It all depends on the type of web application and the specific situation, but I will tell you how to make the web application faster and more responsive. I divided the optimization of the web application into two parts: front-end optimization and back-end optimization.
Front-end optimization
Everything you need to optimize from the point of view of search engines will tell you https://pagespeed.web.dev/
Images compression
The user does not need pictures in the maximum quality, it is enough that they are sharp. To achieve even greater results, you can convert images to WebP format, files in this format are 26% smaller than jpeg.
Reduce the number of requests to the server
That is, combine all js files into one file or make them all download in parallel. The same for CSS files. Reduce the amount of icons using inline icons.
Minification JS, CSS, HTML
Webpack minifies JS and CSS files by default when we build them in production mode. But it does not remove useless styles or classes. For this, you can use libraries like https://purgecss.com/
Do not forget to check the dependency, connect only the functionality that you use.
Browser’s cache
PWA is one of the tools that allows you to cache your data in the browser to the extent that you can work with the web application completely without the Internet. But if you don't want to dive into it too much, you can just set the Expires HTTP header and the static files will be automatically cached in the browser.
You can also use Local Storage, Cookies, Session storage, IndexedDB, Web SQL, Cache storage as you see fit. The different storages have its advantages and disadvantages.
Web sockets
Websocket is a very powerful technology that allows you to listen to the server and update the data coming from the server in real time. They allow you to reduce the number of requests to the server and change small pieces of data with it.
Lazy loading
It is not necessary to download all the content of the page at once. Content that is off-screen, inside accordions, tabs, or otherwise hidden can be loaded later using AJAX requests or websockets.
Keep in mind that this can affect the indexing of pages by search engines, although they say that they know how to work with such pages.
CDN
The closer the end user is to the server, the faster the content will be loaded, so it makes more sense to put static data on a CDN server.
In short, a CDN is a group of servers to which your files are duplicated. These servers are located in different geographical areas and when requested, the user receives files from the nearest one.
Backend optimization
OpCache
If you're developing in PHP, you can safely enable it in most cases.
Since the code of the entire site does not change so quickly, it does not need to be constantly compiled from scratch. PHP can cache already compiled code, which makes his work much faster.
Zip or Gzip compression
Web servers such as apache and nginx can compress data on the fly.
It could be easily done with Nginx
server {
...
gzip off;
...
}
Two modules are responsible for compression in Apache. The first module is called mod_deflate and the second mod_gzip, only one of them needs to be enabled. But this puts an additional load on the server. With mod_gzip, you need to compress each file yourself and upload it to the site root.
Database optimization
Usually, the server itself works quickly and in most cases, the long response of the server occurs due to heavy and numerous requests to the database.
In this case, it is necessary to check whether the N+1 request problem does not arise for example when the requests occur in a cycle. If this problem is fixed, it is necessary to check whether all the necessary indexes are inserted. Database optimization is a separate big topic, which I will not spotlight on in this article.
Data handling approaches such as data caching and queuing some requests play an important role. I will talk about this in detail in the next two points.
Data caching
Most of the data changes infrequently enough that it will be correct to cache it using high-speed data stores. Depending on the speed, reliability, cost, and amount of data, there are different storages, such as File, Memcache, Redis, etc.
Queues
All functionality that is not required to work at the same moment when the request is made must be queued.
For example, we save the order, and as a result - we need to get the order number. Saving the order in the database, transferring information about it to the managers via a third-party API, sending a letter to the client and the store administrator - all this functionality must be queued. This will help not only to unload the server but also to reduce the load on the database.
Scaling
If none of this helps, maybe the server simply does not cope with a large load, then you need to take a more powerful server. This is the simplest scaling (vertical scaling).
But eventually, you need to think about horizontal scaling. It is also different, depending on where the load is most significant. Raise several server instances and install a load balancer to balance the load between these servers. But suppose there are bottlenecks where the server's capacity is used to the maximum, such as rendering, conversions or file generation, etc. In that case, such functionality is transferred to a separate service, which, in turn, will be scaled separately. There are now many tools and services that can automatically scale your app according to its load.
There is also an option to switch to serverless technology, which will allow you not to think about scaling.
It also happens that it is necessary to scale the database horizontally, in this case, different replication approaches are used.
I described the main solutions that can improve the speed of the web application. In any case, it is necessary to look for a problem and choose approaches, taking into account the type of web application, its structure, and its purpose.
Top comments (1)
Nice article, just to add Proxies server is good option too and also data store in memory cache db like Red-is it also improves performance,mobile first approach