Techniques for Decreasing HTTP Requests

Last Updated on May 29, 2019 by Numinix Developer

The number of HTTP requests is the biggest factor effecting page load time. For each object downloaded, there is a lag time to request and serve the object, regardless of the actual size of the object. This page will highlight a few simple techniques to decrease the number of HTTP requests.

Google Minify

Another great, FREE, PHP5 script by Google will automatically “minify” your CSS and Javascript files into a single object, thus decreasing the number of HTTP requests to 1.

Minify works by first combining all of the stylesheets or scripts, it requires these to be done separately, and then compresses the contents by removing comments and whitespace. It then caches the newly created content to avoid unecessary PHP overhead.

This script takes only a few minutes to install and configure and is available for download from the Google Code website. Or, you can wait til later this week when we will be releasing our own version specifically for Zen Cart. Also, Rubik Integration has used a variant of our module for their own CJ Loader.

Page-Specific Stylesheets

If you are using the Google Minify script recommended above, then it may be more benefical to create a stylesheet for page-specific styles in addition to your site-wide stylesheet. Regardless of how many stylesheets you use, Minify will allow them all to be served as a single object.

So, how do page-specifc stylesheets reduce HTTP requests? Well, imagine you have a class that uses an image for a background. This is an additional object that the browser must get from the server. If this class is not used outside of a specific page, then it would be redundant to get the object for pages that do not use the object. By creating a page-specific stylesheet, that object will only be downloaded for that specific page thus decreasing your overall HTTP requests at the site-wide level.

If you are going to be using classes across a number of pages, but not all pages, you can create a secondary stylesheet and then use @import to add those styles to the top of your page-specific styleseet.

Creating page-specific stylesheets with Zen Cart is quick and painless. Simply create a new stylesheet using the page name, for example login.css, and upload it to the CSS folder of your custom template (includes/templates/YOUR_TEMPLATE/css/).

WARNING: Minify requires the @import rule to be at the top of the first stylesheet being minified.

CSS Sprites

For those with advanced knowledge of CSS, employing a method known as CSS sprites can greatly decrease the number of HTTP requests by combining multiple images into a single image and then using image coordinates to display a specific area of the image.

For a more in depth explanation of CSS sprites, as well as an example, please visit CSS Sprites: What They Are, Why They’re Cool, and How To Use Them.