FIX NUMBER OF HTTP REQUESTS

Save to Favorites

WHAT'S WRONG

• This page has 14 external Javascript scripts. Try combining them into one. This page has 9 external stylesheets. Try combining them into one. This page has 10 external background images. Try combining them with CSS sprites.

KEY POINTS

Keeping components that do different things in different files in a good programming practice. For example, a slideshow may have a slideshow.js and slideshow.css completely separate from shoppingCart.js and shoppingCart.css. However if they're included like this on a webpage it means the user's web browser has to say to the web server 'give me slideshow.js', 'give me slideshow.css', 'give me shoppingCart.js' etc. generating four HTTP requests.

Components of the same type can be combined into a single file. For example we could combine slideshow.js and shoppingCart.js into combined.js. In our example this halves the number of HTTP requests from four to two. Each HTTP request has a small time overhead associated with it (where the browser says 'give me X' and the server responds 'here is X'), so reducing the number of HTTP requests reduces the time this conversation with the server takes.

HOW IT'S USED

• A HTTP request is simply a conversation between the web browser and server saying 'give me a script named X' and the server 'responding here is the script X'
• Web browsers can make more than one HTTP request at once, but this is limited to between two and six requests at once
• So web browsers may have to wait to start another request if there are too many on the page
• Plus it takes a little time to make the actual HTTP request itself

BEST PRACTICE

• Combine components of the same type together (Javascripts & CSS stylesheets are usually straightforward to tackle)
• Images can be combined using techniques like CSS sprites, image maps and inline images but they're more technically involved and if overused can cause the overall speed to degrade
• Separate Javascripts can interfere with each other if they use the same names for things (global variables and functions for example). If you have any custom Javascript make sure your developer is aware of this: ask them to 'encapsulate' their component.

FIX THIS YOURSELF It's likely that your website platform doesn't combine Javascript and CSS automatically, but you might be able to do it yourself.

Making this change incorrectly can break features of your shop, including add to basket, and break how your shop looks. You should be confident working with Javascript and CSS to continue

Due to how Javascript and CSS work the order of files you combine together can affect if the Javascripts will interfere with each other or the CSS styles don't appear as they do at the moment (overriding styles). Make sure you have backed up of all files you are changing and you know how to switch back to them

1. Find where your Javascript and CSS files are currently hosted. They may all be in a single folder on your main domain or scattered around folders and even websites
2. Javascripts and CSS with filenames ending in .js and .css can be combined into separate files like, say, combined.js and combined.css
3. Don't modify the .js and .css files directly: create a new combined file for each file type
   • Create a combined.js and combined.css
4. For each .js file paste its contents directly into combined.js, one after each other and make a note of the .js filename like slideshow.js
5. Likewise for each .css file paste its contents directly into combined.css, one after each other and make a note of the .css filename like slideshow.css
6. Now find where the files are included in your website code and replace all of the references with a single reference to the combined files
7. For each Javascript that is now included in combined.js, locate where this file is included in your website code
8. Remove all of the original file references like slideshow.js and replace with a single script reference like this: example.com/scripts/combined.js">
9. For each stylesheet (CSS) that is now included in combined.css, locate where this component is included in your website code
10. Remove all of the original file references like slideshow.css and replace with a single reference like this: example.com/styles/combined.js" rel="stylesheet">
11. Save and upload all of the files you've changed and check your site looks and works how it was before