Exporting multiple CSS documents as a single file

Each reference on a style sheet of a HTML page generates a HTTP request to the server. This costs time. This article is intended to show how one can summarize multiple CSS documents on the service-side into a single file.

Distribution over individual documents allows for clarity

A lot of stylesheet definitions for a web page are created in a very short amount of time and it becomes continuously more difficult to retain an overview of which part of the document the selector for a topic tag was defined.

That is one of the reasons we at the beyond content tend to compile multiple styelsheets under theme-based archives. One document generally only deals with styles such as topics and pagarphs and the next deals with styles such as headers and footers.

This process is particularly pleasant when processing a CSS document via the ZMI. Each time the file is saved one must scroll back to the same place one was before in the editor window. This is of course not as annoying when working with smaller documents.

The following screenshot shows how the documents were named and defined. The respective stylesheets are then integrated with the sourc code below:

HTTP requests cost time

Each request to the web server costs time. A large amount of the per request dedicated time is used up by the protocl. From the following graphs it is particularly obvious that each request up to a certain file size requires the same amount of time.

How exactly the page loading speed changes when using just one style.css file can be discerned from both of the following images. It is obvious that the page becomes 100% faster when a single file is loaded.

The image above illustrate clearly the response behavior when multiple CSS documents are requested

The request using a single CSS file saves a lot of time.

Combining the best of both worlds

In order to maintain clarity when working with multiple CSS documents, yet only wants to use a single documents, it is possible to compile the individual documents on the server side.

A simple PythonScript iterates over all DTML documents within a folder and compiles their content. The following code fragment with the ID style.css scans in a sub-folder with the ID css for DTML documents and methods and compiles their content.

The generated CSS documents is integrated in the usual manner. At the top as a static HTML Code and at the bottom dynamically with the assistance of the ZSMHelper syntax.

More science?

For the comparison above we generated a test script. With the assistance of certain parameters we could manipualte how the stylesheets are loaded.

The PythonScript style.css waits for a parameter mode of the integer type. Depending on its value, the script returns the following:

0: all CSS documents and their individual documents with the response content type "text/css"
1: the same document as text withina <style>..</style> tag
2: a refrence to the individual document (0) as <link/> tag
3: a list of <link /> tags to all CSS documents

The entire source code including the test scenario

## Script (Python) "style.css"
##bind container=container
##bind context=context
##bind namespace=
##bind script=script
##bind subpath=traverse_subpath
##parameters=mode=0
##title=
##
from string import replace
R = container.REQUEST

def serveStyleSheets(mode):
  mode = int(mode)
  if mode == 1:
    return getAsInlineStyle()
  if mode == 2:
    return getAsSingleLinkTag()
  if mode == 3:
    return getAsMultipleLinkTags()
  else:
    R.RESPONSE.setHeader('Content-Type', 'text/css')
    return getAsOneDocument()

def getAsOneDocument():
  txt = ""
  compressed = int(R.get('compressed',1))
  for doc in container.css.objectValues(['DTML Document','DTML Method']):
    txt += "/* #### %s #### */\n" % doc.id()
    txt += doc(context,R)
  if compressed > 0:
    txt = replace(txt,'\t','')
    txt = replace(txt,'\n','')
    txt = replace(txt,'    ',' ')
    txt = replace(txt,'  ',' ')
  return txt

def getAsInlineStyle():
  return "<style>%s</style>" % getAsOneDocument()

def getAsMultipleLinkTags():
  txt = ""
  for doc in container.css.objectValues(['DTML Document','DTML Method']):
    txt += getAsSingleLinkTag(doc)
  return txt

def getAsSingleLinkTag(doc=script):
  shortUrl = doc.absolute_url()[len(R.get('BASE0','')):]
  return """<link rel="stylesheet" type="text/css" href="%s" />\n""" % shortUrl

return serveStyleSheets(mode)

Conclusion

It definitely makes sense to compile documents on the service side. The CPU time for the compilation of the files is negligible, considering the time the sum total of the HTTP requests would take.

The process described herein is not only applicable to the complete implementation of CSS documents but can also be used for the request of JavaScript files.

The here compiled insights demonstrate: sometimes less is more. That also applies to the images integrated in a web page. The more invidiaul images are referenced, the longer the load times will be. Thus, when designing a page, one should ask: can we perchance render this logo on the background? This already saves one server request.