How to make your web application run faster?

18 February 2014 | By INSART Team

Why is it important to keep your web application running fast? The answer is obvious: “To make your users happy!”. How to deliver the efficient and high speed application to the client? Find out more about different methods of optimization:

Step 1. Client-side optimization

  • Enable compression. Сompression is effective, simple way to speed up your site. Many web servers can compress files in gzip format before sending them for download, either by calling a third-party module or using built-in routines. This can reduce the amount of time it takes to download the resources needed to render your web site.

  • Leverage Browser Caching. Browser caching for static resources can save a user time if they visit your site more than once. Caching headers should apply to all cacheable static resources, not just a small subset (such as images). Cacheable resources include JS and CSS files, image files, and other binary object files (media files, PDFs, etc.). In general, HTML is not static and shouldn’t be considered cacheable by default. You should consider what caching policy would work well for your site’s HTML.

  • Minify Resources (HTML, CSS, and JavaScript). Minifying resources refers to eliminating unnecessary bytes, such as extra spaces, line breaks, and indentation. Compacting HTML, CSS, and JavaScript can speed up downloading, parsing, and execution time. In addition, for CSS and JavaScript, it is possible to further reduce the file size by renaming variable names as long as the HTML is updated appropriately to ensure the selectors continue working. For minifying JS and CSS, you can try YUI Compressor.
  • Optimize images. Keep image sizes to a minimum to reduce the amount of time a user is waiting for resources to load. Properly formatting and compressing images can save many bytes of data. This saves time for users on slow connections and money for users on limited data plans. For reducing image size, you can try TinyPNG.

  • CSS sprites are used as a way to improve performance by combining numerous small images or icons into a larger image called a sprite sheet or tile set, and selecting which icon to show on the rendered page using CSS. It reduces the number of requests to the server and imposes work on the animation on the CSS-engine browser and not on the JS-engine.

Step 2. Server-side optimization


  • Nginx also has many other useful features like:
    1. Ability to handle more than 10,000 simultaneous connections with a low memory footprint
    2. Handling of index files, and auto-indexing
    3. Reverse proxy with caching
    4. Load balancing with in-band health checks
    5. Fault tolerance
    6. URL rewriting
    7. IPv6-compatible

    • Configure Server Settings. Lets take Apache Tomcat web application server as the example. Tomcat configuration is by default geared towards first time users looking for powerful, hassle-free, out-of-the-box functionality. However, when deployed in a real-world setting, where high server load can be expected and achieving the best possible peak load performance is vital, it is important to customize these default settings based on your site’s needs.

    • Сaching allows to significant increase productivity of the application. Especially caching can help to reduce database load. One of the great caching tools is Memcached. Memcached is high-performance, distributed memory object caching system, generic in nature, but intended for use in speeding up dynamic web applications by alleviating database load. The biggest names on the web, like YouTube, Facebook, Fotolog and Wikipedia deploy Memcached to satisfy the demands of millions of users and billions of page views every month.

    • Load Balancing. Load balancing is the distribution of a workload across many server-nodes. A Load Balancer allows users to intelligently distribute traffic to a single IP across any number of servers using a number of different protocols. This means that the processing load can be shared across many nodes, rather than being limited to a single server increasing performance during times of high activity. It increases the reliability of your web application and allows you to build your application with redundancy in mind. If one of your server nodes fails, the traffic is programmatically distributed to your other nodes without any interruption of service. Load balancing, by its nature, is the solution for more than one problem. You can use load balancing to keep your site up through traffic spikes, or grow with you as your site gains popularity.

    Step 3. Database optimization

    I will consider PostgreSQL as the database server.

    • PostgreSQL Settings. PostgreSQL ships with a basic configuration tuned for wide compatibility rather than performance. In production environment you should configure PostgreSQL according to your requirements.

    • Database Indexes. Put simply, database indexes help speed up retrieval of data. The other great benefit of indexes is that your server doesn’t have to work as hard to get the data. They are much the same as book indexes, providing the database with quick jump points on where to find the full reference (or to find the database row).

    • Partitioning refers to splitting what is logically one large table into smaller physical pieces. This approach can be used, when there are huge amount of data in a table. The partitioning can be done by either building separate smaller databases or by splitting selected elements.


    Finally, I want to share performance analysis of one of our web applications. The test was conducted using YSlow. This is a tool from Yahoo, which analyzes web pages and suggests ways to improve their performance. Here is a test without optimization steps:

  • According to the results of the test our web application has a grade C with overall performance score 71. Let’s look at the results in more detail.

    From the image above, we can select the following statistics:

    • with empty browser cache, tested web page makes 40 HTTP requests and has total weight 890.7 Kb.

    • with primed browser cache, tested web page makes 40 HTTP requests and has total weight 24.6 Kb.

    Here is a test with optimization steps:


    After optimization, our web application has a grade A with overall performance score 91.

    Statistics:

    • with empty browser cache, tested web page makes 16 HTTP requests and has total weight 684.5 Kb.

    • with primed browser cache, tested web page makes only 1 HTTP request and has total weight 15.8 Kb (a single HTTP request is obtained by adding an Expires header).

    As you can see, there are many different techniques to make your web application run faster, without having to purchase expensive hardware.

GET CONNECTED WITH US TO RECEIVE DAILY UPDATES
ON THE LATEST DEVELOPMENTS IN THE INDUSTRY AND GREAT TIPS
close