The use of dozens of CSS and JS files in web products greatly increases the time that these sites take to load. The further a client is from the hosting server the longer the initial connection time is for each of these small files. When a server is located in the US and a client is located in Europe or Asia that initial connection time can become larger than the actual time the content takes to download. By reducing the number of JS and CSS files in a web site you can provide the same functionality, but reduce the time these sites take to load, without additional operational costs.
For this load time breakdown I will use a sample site: “Product XYZ”. The site is a modern web property, relying heavily on multiple CSS and JS files to provide an highly stylized interface. Product XYZ utilizes a content delivery network (Akamai Web Application Accelerator aka Akamai WAA) to locate these static CSS and JS files closer to customers.
CSS / JS files in Product XYZ: 42 files total
- 9 CSS files
- 33 JS files
Load Impact of a Single File in Product XYZ:
A single static JS or CSS file cached by Akamai WAA and retrieved close to the customer site has an average first byte connection time of .003 seconds. Without Akamai WAA that average time jumps to .267 seconds per file.
Total First Byte Time for Product XYZ
- 0.021 seconds with Akamai
- 2.326 seconds without Akamai
- 0.105 seconds with Akamai
- 8.356 seconds without Akamai
Potential Improvement by Reducing File Count
If Product XYZ was to be optimized to a single JS and a single CSS file it could reduce the initial connection time within Product XYZ by .12 seconds (1.2%) when using Akamai WAA and 10.148 seconds (46%) without Akamai WAA. The real benefit to this reduction is the potential to eliminate the need for Akamai WAA caching entirely and thus greatly reduce operational costs. A non-cached Product XYZ with a single JS and CSS file would load in an estimated 11.852 seconds compared to approximately 10 seconds when using Akamai WAA caching. As Akamai bills based on data transfer this could reduce costs significantly by removing WAA caching.