How to reduce the number of HTTP requests

HTTP requests are the protocols with the help of which data is exchanged on the Internet during client-server interaction. The browser sends these protocols when displaying web pages. While responding to a request, the server sends the appropriate files. That is, an HTTP request is a request from the browser to the server.

By showing the user a simple web page on a site, the browser can send up to a dozen requests. Below is an example where 4 HTTP requests were sent when the page was displayed:

During the download, the value of the response header and the amount of transmitted data are important. Headings usually include:

• web browser version;
  
• supported data formats;
  
• desired language for displaying content
  
• selected compression algorithms;
  
• information about the selected encoding;
  
• cookies
  
• POST / GET information, etc.
  

Up to 40 requests can be sent to download colorful, thoughtful web pages. And if about 1000 bytes are required to show one component, then the total size will be up to 40 000 bytes or 40 Kb.

The indicator can be viewed in browsers.

In Firefox, use the extension Firebug. It is effective, but in most browsers there are built-in analogues that have no less effective functionality.

To use the extension:

• go to the "Network" section;
  
• refresh the web page;
  
• check the number of requests below.
  

These two web browsers have built-in counting tools. To use them:

• open your website in them;
  
• right-click anywhere in the document and select "Explore Component";
  
• go to the "Network" tab;
  
• refresh the web page to see the exact number of requests below.
  

By combining components for downloading into a single file, specialists reduce their number. Consequently, the number of HTTP requests is reduced. If 3 stylesheets and 4 JavaScript scripts are connected, 8 requests will be sent (7 + 1 for HTML code).

To minimize the indicator, it is enough to collect style sheets in one file, and libraries in another. So the number of requests will decrease from 8 to 3.

You can use special tools, for example, Minify. By the way, the application minimizes not only statics, but also HTML. It is written for PHP.

When combining JavaScript scripts, you may encounter difficulties with those scripts that use the method document.write to display part of the text.

To eliminate the inconvenience, you have to modify these sections of code by removing document.write. Or do not combine such a script with others.

SVG is a special vector graphics format. The advantage of the format is that it can be edited in standard editors, but it will also be textual. This means that it can be opened through any code editor text.

For example:

This format is suitable for graphics that design content.

Previously, the method was popular CSS sprite. With it, to load the required component of the web page, the properties background-image, background-position were used.

One of the options for using CSS sprite:

They made such pictures manually or through spritegen. But this technology is already outdated; more and more webmasters prefer SVG images. The main reason is precisely that the images are set only of a certain size, but for the "rubber layout" this is not relevant.

This technology has disadvantages:

• The development process is becoming more complicated. A mile of the page, it is necessary to consider differences of elements when displaying in different browsers.
  
  

• The upgrade process is getting more complicated. If you need to remove or modify one graphic component, you have to edit the entire picture.

• There is a risk of slower page loading. This happens if sprites are applied incorrectly.
  
  
• CSS sprites are missing their URLs. If a visitor displays a graphic in a web browser, nothing will load in the place of such images.
  

To implement this method, the information on the server must match the cache data. As most of the downloadable components are static, a declarative expiration date is used as a suitable caching method.

To enable the mode, just put the .htaccess file in the www.domain.tld / res / folder with the instructions:

In this case, the file will not be reloaded from the server until the date selected in the third line.

The speed of display of elements is limited by the bandwidth of the data channel. To speed up the process, you can use parallel downloads.

Plugins can affect metrics. Each of them has its own styles and scripts. Plugins register links to these elements to each web page, which increases the number of requests.

The following shows how this happens with the WP Subscriber Form plugin as an example:

Custom CSS and JavaScript files can contain themes.

HTTP requests are an integral element of data transfer during client-server access. If web documents load too long, visitors can leave them without waiting for the information to be displayed. To reduce the latency of downloads, minimize requests.

The most popular ways to reduce HTTP requests:

• combining elements — style sheets, JavaScript libraries;
• association of pictures;
• Inline pictures;
• caching
• distribution of components between servers.