Combine Multiple CSS Files

Part One Chapter 09

CSS

It is very common that a mobile web page uses multiple external CSS files.

Single CSS File

The most common way to use CSS is to place your CSS in an external file and then include this external CSS file in the head section of your web page. For example, your external CSS file is named “main.css”. 

<head>
<link rel="stylesheet" href="main.css" />
</head>

Multiple CSS Files

In most cases, you may have multiple external CSS files in the head section of a single mobile web page. This is not a good practice as downloading each external CSS file adds another unnecessary http request to slow down the loading of your page.

For example, your mobile web page has 6 CSS external files in the head section. 

<head>
<link rel="stylesheet" href="main.css" />
<link rel="stylesheet" href="style2.css" />
<link rel="stylesheet" href="style3.css" />
<link rel="stylesheet" href="style4.css" />
<link rel="stylesheet" href="style5.css" />
<link rel="stylesheet" href="style6.css" />
</head>

Reduce HTTP Requests

The fewer external resources your page requires the web browser to download, the faster the page load speed.

Your mobile web page should load faster when the web browser has to download fewer external CSS files. To achieve this, you should combine multiple CSS files into fewer files or even a single file. This will reduce the number of http requests. Assume you are able to merge all the external CSS files into a single file (e.g. “combined.css”). 

<head>
<link rel="stylesheet" href="combined.css" />
</head>

Combine Multiple CSS Files into One File

To combine all your CSS into a single file:

  • Open all 6 CSS files. i.e. “main.css”, “style2.css”, “style3.css”, “style4.css”, “style5.css”, and “style6.css”.
  • Copy and paste all the content of the 6 CSS files onto a new file, such as “combined.css”.
  • Update the “link” tag in the head section to request the new file “combined.css”.
  • Remove all the “link” tag that used to request the other 5 CSS files.

Gordon Choi's Mobile Website Book has been available since November 2016.






Content on Gordon Choi's Mobile Website Book is licensed under the CC Attribution-Noncommercial 4.0 International license.

Gordon Choi's Mobile Website Book

Gordon Choi’s Other Websites:
SEO Expert in Hong Kong (Gordon Choi’s Blog)
Analytics Book