Combine JavaScript and CSS Requests

Introduction

Multiple requests for separate files of the same type can slow the loading of a page. Whenever possible, files of the same type, such as JavaScript and CSS, should be combined into as few files as is practical for your app.

This Best Practice Deep Dive provides some background on JavaScript and CSS, looks at the issues involved with combining files, shows you how AT&T Video Optimizer can identify multiple requests for similar file types, and provides a recommendation for combining files of the same type.

Background

The number one way to speed up the loading of content from the web is to reduce the number of requests. If your mobile app has multiple requests for many CSS files, consider combining these CSS files to reduce the number of requests. The same holds for JavaScript files.

In the June 15, 2013 run of HTTPArchive on mobile sites, the median number of JavaScript files was 7 (75th percentile is 15 and 90th percentile is 22). For CSS, the median number of requests was 2 (75th percentile is 4, and 90th percentile is 60).

By reducing the number of requests, you will speed up your mobile app or website.

The Issue

If an app depends on multiple external CSS files and multiple external JavaScript files it will incur multiple Round Trip Transfers (RTT) to download the files. Not only is this inefficient, but it can cause delays in downloading other resources that the app needs.

To speed up the loading of resources, multiple JS files can be combined into a single file and multiple CSS files can be combined into a single file. This can be done manually or programmatically.

However, combining files can create some issues:

• Combined files can cause namespace conflicts with other scripts and create unpredictable bugs.
• Combined files can become large and unwieldy.
• One change to any part of a combined file invalidates the whole file in the browser's cache and requires a slow re-download.
• Combined JavaScript files can lose the benefits of cross-site JavaScript CDNs which effectively pre-load common scripts into the visitor's cache in transit.

Best Practice Recommendation

The Best Practice Recommendation is to reduce the number of external JavaScript and CSS files to as few as possible. This will cut down on the number of file requests and RTTs that can slow your app and can cause delays in downloading other resources.

The AT&T Video Optimizer tool runs a test on trace data from your app that checks for multiple CSS files which could be combined together, and separately checks for multiple JavaScript files which could be combined together.

When Video Optimizer detects 2 separate CSS requests in less than 2 seconds or 2 separate JavaScript requests in less than 2 seconds, it flags a warning.

If you get a CSS warning, consider combining your multiple CSS files together, and if you receive a JavaScript warning, consider combining your multiple JavaScript files together.