How to Optimize Website Performance: Handling HTTP Requests

At the latest since studies show that a faster site load time leads to more purchases, and Google uses the charge time as a ranking factor in the rankings in search engines, the site performance optimization for every webmaster is a must. The reduction of HTTP requests is a lever to which you can attach quickly with little prior knowledge and with the one already achieved significant improvements in a short time.

Why too many requests slow down a website

The request from a client (eg a browser) to a web server is called HTTP request. A request is always asked when a file or script to be loaded, the contents of which is not already in the browser cache. The response from the server and the associated data stream, however, is the response.

Each request has to be completely dissolved. So a DNS lookup is provided to resolve the address, the packets need to be routed through different DNS server (tracert see. Traceroute /) to reach their destination and in the end is the web server, which, depending on the configuration per request current rush of visitors and performance of the hardware also has a certain latency period until the incoming request is being processed.

In addition, the number of parallel requests abzuarbeitender in older browsers is very low in particular. To send the follow-up requests, they are waiting for the previous requests were fully answered.

Request measurement webpage Test

The performance measurement of webpage Test is a great way to determine the speed of a site and the number of requests. This distinguishes the online tool between the first call (First View) and the repeated call (Repeat View) in the browser’s caching mechanisms engage (unless the latter are established in accordance with the webmaster for that site).

Result of webpage Test the example of Page Report

In the above test were entered as a test site Frankfurt, DE and as the IE browser. 7 The respective requests are very nice as Waterfall – incl. The respective transfer and call duration listed. Who uses it can about the addon this information directly in the browser Firebug blank list. On page report can be seen very well on the above graph that the CSS Sprites should be revised again, as in recent months many small graphics are added.

Maximum number of simultaneous requests in major browsers

All popular browsers can only handle a certain number of requests in parallel. The fewer the number of downloadable parallel requests and the higher the request number, the slower the page generated with the user, because the new requests will only be requested if the old ones were executed. The following list provides information about which Request number of requests at the same time popular browsers:

Browser Number of parallel requests
Firefox 2 2
Firefox 3+ 6
Opera 9:26 4
Opera 12 6
Safari 3 4
Safari 5 6
Internet Explorer 7 2
Internet Explorer 8 6
Internet Explorer 10 8th
Chrome 6


There is no doubt that due to the enormous influence that HTTP requests have on the website speed, the number of requests should be kept as low as possible. The following 7 optimization levers can reduce the number of requests and make the website more quickly:

CSS and JavaScript merge files

Often multiple CSS and JavaScript be integrated on one site. This is normal because a logical development structure is established that various logical sections also be outsourced in different files. Thus, for instance, download the jQuery min.js and additionally some JS files of various jQuery addons website. Or a layout.css plus several mini-styles in the form of table.css etc. This operation is useful and saves a lot of work in the maintenance more extensive web projects and ensures that lots of styles can be reused in other projects.

However, also means each loading a CSS or JavaScript file an additional (time-guzzling) HTTP request. It makes sense, therefore, automate the different CSS files to merge to increase the site performance (“merge”). For this TYPO3 extension accepts example script merger.

Optimize browser caching and save Requests

Often CSS and JavaScript files, and images are loaded from scratch every time a web site or even when you load a new bottom. This is primarily why not make sense because CSS information in a finished webdesign mostly only in longer-term time periods change (eg weekly). Each load a file that could be actually retrieved from the cache, increased traffic (and thus the webhosting costs) and the charge time with the end user (and thus results as a direct SEO impact in poorer rankings in search engines).

The caching period should not be placed less than 1 week for all cacheable content in a meaningful value.

  1. <IfModule mod_expires.c>
  2. ExpiresActive On
  3. ExpiresDefault “access plus 1 second”
  4. ExpiresByType text / html “access plus 1 second”
  5. ExpiresByType image / gif “access plus 15 days”
  6. ExpiresByType image / png “access plus 15 days”
  7. ExpiresByType image / jpg “access plus 15 days”
  8. ExpiresByType image / jpeg “access plus 15 days”
  9. ExpiresByType text / css “access plus 15 days”
  10. ExpiresByType image / x-icon “access plus 15 days”
  11. ExpiresByType text / javascript
  12. “access plus 15 days”
  13. ExpiresByType application / x-javascript
  14. “access plus 15 days”
  15. ExpiresByType application / javascript
  16. “access plus 15 days”
  17. ExpiresByType application / x-shockwave-flash
  18. “access plus 15 days”
  19. ExpiresByType application / xhtml + xml
  20. “Access Plus 1 second”
  21. </ IfModule>

Replace layout graphics and buttons with CSS

Especially with older websites there are several layout graphics that easily by CSS (placeholder graphics) or CSS3 (eg buttons or box-shadow) can be replaced.Characterized a plurality of requests can often be dispensed with. For placeholder graphics thereby DIV container are with fixed heights and widths and buttons CSS3 styles such as background-gradient, border-radius, text-shadow, etc ..

Speed ​​increase by CSS Sprites

Were stored Following computer games, where characters and their different movements usually summarized in an image (sprite), describe CSS Sprites synonymously a technique in which an image contains all the graphics on a Web site.The use of CSS sprites can reduce the number of HTTP requests significantly because instead of many individual images now only a single image has to be loaded. This image is then positioned by background-position-information that each of the image appears, which contains the respective graphics. CSS sprites are especially useful for smaller graphics. For easy creation of CSS Sprites are, inter alia, the online toolsSpritePad and CSS Sprite Generator.

  1. # pic_1st {left: 0; width: 46px;
  2. background: url (‘sprites.png’) 0 0;}
  3. # pic_2nd {left: 63px; width: 43px;
  4. background: url (‘sprites.png’)47px 0;}

Higher performance through Inline Images / Data URIs

Pictures can be made ​​using Data URI  base64 encoded directly in HTML or embed CSS source code. This eliminates the need to load an additional resource and the site loads faster. Data URIs are particularly suitable for the integration of smaller graphics:

  1. ul .checklist li .complete {margin-left: 20px;
  2. background: url (‘data: image / png; base64,
  5. Z / dAAAAM0lEQVR4nGP4 / 5 / h / 1 + G / 58ZDrAz3D
  6. / McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA / A
  8. top left no-repeat;}

To create Data URIs are online tools such as the suitable URI generator: data from Dopiaza.

Image maps instead of many pictures

Instead of several individual linked graphics, it is often sensible to use image maps, because they consist of only one image and thus require only one HTTP request. Image maps can thus significantly increase the performance of a website. The linking of the different areas in the picture, with optional mouseover text that takes place on the indication of corresponding coordinates:

<img src = “map.jpg” alt = “my map” usemap = “#mymap” />
<map name = “mymap”>
<area title = “yeah, my coords” shape = “rect”
coords = “9,372,66,397” href = “” />

  1. </ map>

Less HTTP Requests through AJAX

Also AJAX can help to reduce the HTTP requests significantly. It is not always necessary, the entire webpage to reload when you change the page. Often it is sufficient to update the affected by the change with AJAX dynamic range in order to obtain the desired result. This path leads, for example, Facebook on his side “Suggest Friends”. The list can be endlessly scrolled down, being dynamically expanded. The more common variant is a list of advantages and back button, and the current page index. The Facebook version saves enormous requests, is much faster and more pleasant for the user.


Since all major browsers have restrictions on how many HTTP requests are charged simultaneously in parallel, bluebirds too many resources on a Web site load time significantly. Here, a faster page loading has been proven to significantly more satisfied visitors and in online stores even more sales. In SEO Area Rapid sites from Google will be rewarded with better rankings. Minimizing the request number brings a huge speed boost. It should therefore be one of the first steps in all site-performance optimizations.

Add a Comment

Your email address will not be published. Required fields are marked *

Advertisment ad adsense adlogger