seo: how to reduce the HTTP requests and number of resources per page

Almost every webpage consists of mainly some text content and several web resources, such as images, external JavaScript files, external style sheets and other related files. In order for the web page to render correctly in the browser, it needs to download and often parse each of these web resources.

Ideally you would want is to reduce the number of HTTP requests made or required to display the webpage completely. There are several different, often time-consuming processes that happen when downloading these web resources.

Socket/Connection Creation: In order to download content, the client needs to create an HTTP socket connection to the server. Creating a connection is a resource intensive process that consumes time, CPU and memory resources on the server (as well as on the client). There are several techniques that are used such as HTTP pipe-lining, in order to minimize the socket creation.

Network Download Time: Downloading content from the server takes some amount of time no matter what the size. This network latency is one of the major factors affecting the page load times. As a rule of thumb, the larger the content that needs to be downloaded, the larger the download time or network latency.

Client Parse Time: Almost every piece of content, especially source such as HTML, CSS and JS needs to be parsed by the web client in order for it to be rendered or executed. The smaller the content that is downloaded, the faster it can be parsed. This means that there is a small penalty involved when the client needs to parse rules and codes that are not going to be used. Removing un-necessary and unused content from the external web resources can thus speed up the parsing process.

The above are the three main processes that occur during the download and display of the web resources. There are several techniques that are used to speed up each of these, such as caching, CDN and reuse of socket connections etc. Despite all these techniques, the fastest and most efficient way is to still reduce or minimize the need for these web resources as much as possible.

Downloading less number of files of less size is still going to be faster than all else. The challenge is to find the optimum compromise between the number of resources, the size of resources and the rendering of the webpage and content just the way you will like.

There are several advantages in reducing the number of resources on each page.

# of Connections: As mentioned, creating a connection is a very resource intensive process both on the server as well as the client side. Reducing the web resources will allow for less connections to be made and maximizes the content that can be downloaded over a single connection which will be faster.

Resource Size: Removing unneeded resources will reduce the amount of data per page, and the overall size of the page. This results in less time spend on downloading content and faster page loads.

There are several easy and effective ways to reduce the number of resources used on a page.

Combine CSS and JS Files

Many times there are multiple external style sheets used on the same page. This is a convenient way of developing web pages, as it allows for modularization and ease in the development and maintenance of the website. Combining all these different style-sheets into a single style-sheet can reduce the number of web resources. The same goes for JavaScript files as well.

You can manually combine all your style-sheets into a single style-sheet file, and then reference that file in all your web pages. Another option is to use a WordPress SEO plugin, such as WP Minify, Better WordPress Minify, Combine CSS or Combine JS that will combine and minimize the CSS file dynamically for you.

Again, using plugins will allow you the convenience of doing this dynamically and is best when used with a caching framework. It is still advisable to do them manually if it is possible and you are comfortable doing them as it will reduce the number of plugins that are used.

Depending on the page, sometimes a high number of resources are needed, like a photo page with a number of photographs or images in them. So, it is not always possible to reduce the needed resources beyond a particular limit and the page functionality.

Using Image Sprites

Many times the web resources of a page includes numerous small images. These are images that are used as menus or logos. These can also be images that are used to display buttons or borders of web elements.

Image Sprites is a technique in which several different images are combined into a single large sized image and then displayed on the page using different CSS rules. This is usually most effective when several small images are displayed on the same page and also across pages. You will require a good graphics software and some web development experience to do this manually.

Again there are several plugins in WordPress that allow you generate and use image sprites. Some of the popular ones are Sprite Me and CSS Thumbnail Sprites.

According to the analysis by Google, The average number of resources per page is around 42. You should probably try to keep the web resources much below this value.

Another factor to note, is the resources per domain or host. The is a good idea to split resources between hosts if you have a large number of them. The images can be served from a different host, and other static resources from yet another, which will reduce the load on the server.