MAMA: CSS quantities and sizes

By Brian Wilson

• Previous article—MAMA: XML
• Next article—MAMA: CSS syntax
• Table of contents

Index:

1. Introduction
2. Quantities of CSS components
3. Venn diagram breakdown: CSS usage
4. Sizes: External CSS (LINK element)
5. Sizes: Embedded CSS (STYLE element)
6. Sizes: Inline CSS (Style attribute)

Introduction

CSS was detected in 2,821,141 of MAMA's URLs (80.39%). "Using CSS" was defined as having any sort of content from 1 or more of the following 3 sources:

• External CSS via the LINK element in the HEAD of the document
• Embedded CSS by way of STYLE element content
• Style attribute content

MAMA also detected CSS usage in XML using the "xml-stylesheet" processing instruction but discovered this in only 568 cases. We will ignore those cases for simplicity in the following discussion about quantities and sizes.

Looking at some of the URLs for extreme cases with External CSS (and @import CSS) pointed out some flaws in MAMA's analysis strategy. Some of these issues were even anticipated and workarounds were created, but developers on the Web find ways to create the most outlandish code. These shortcomings will all be addressed in the next version, but for now they help demonstrate that analyzing a Web page is always a more complex proposition than expected.

Quantities of CSS components in Web pages

MAMA detected CSS usage in 3 distinct ways: via the common Style attribute, external CSS using the LINK element, and embedded CSS from the STYLE element. The Style attribute was the most common method, barely exceeding the total for the external CSS construct (LINK element). The "times per page" values and other counters represent the number of occurrences for the specific syntax encountered for a URL. For example, the maximum number of LINKed style sheets discovered in any single page was 44; the maximum number of Style attributes found was 21,293. The average "per-page" numbers listed in the table below (Fig 2-1) details where the different types of CSS were used and does not cover the total MAMA URL space.

Maximum quantities of the CSS usage types

Venn diagram: CSS usage by type

The most popular combination of CSS methods is external CSS in conjunction with inline CSS. The least popular mixing is external CSS paired with embedded CSS. To get a clearer view of the uses and intersections of the different CSS methods, a Venn diagram is helpful:

Note: Region sizes are not to scale

Sizes: External CSS (LINK element)

Tracking external CSS generated some errors and exposed a few problems that will be changed in MAMA's next version. A number of cases (~30) had a total analyzed external CSS size of about 5 megabytes, but in the live version of those URLs, these sizes were not at all reproducible. Five megabytes is the maximum that MAMA allowed any downloadable component to reach before aborting, so it explains why there was so much clustering around that value. There may have been a runaway/race condition in any number of sources—the Web server, network conditions, the Perl LWP fetching code, etc. There is no way to be sure what happened—some of the remaining extreme size cases exhibit aberrant behavior; for example, one URL had an external CSS reference to an MP4 video! Another URL had a reasonably-sized external CSS file, but there were a large number of garbage characters at the very end (making the file size over a megabyte). Other instances demonstrated a weakness in MAMA's approach to serializing framed content for analysis; sometimes an external CSS was referenced in multiple frames and therefore added more than once to the overall size sums.

The largest case of external CSS use that was both realistic and verifiable at the time of writing was http://www.goldeneaglecoin.com/, which had 868,426 characters. The site http://www.skatteinform.dk/ (URL no longer active) had a high number of garbage characters, and http://www.vanderlande.com was the case where MAMA repeatedly added the external CSS references in all IFRAMEs to the overall sizes. Trying to offset these problems a little, all cases above 900,000 characters were tossed out to find an average of 8387.1 characters for external style sheets. MAMA attempted to filter out Web servers silently redirecting to non-CSS content, but more could be done—there are probably a number of cases where external CSS redirects to the URL's home page or other HTML pages. An example that demonstrates the effects of failing to do this is http://www.dmc.tv/, in which 5 of the 13 detected external CSS references silently pointed to HTML pages.

Size distribution of external CSS (LINK element)

Maximum sizes of external CSS (LINK element)

Sizes: Embedded CSS (STYLE element)

MAMA detected a URL with embedded CSS sections totalling 1,572,504, but that points out a potential problem with this kind of tally: whitespace. The huge sizes reported for the top 3 of the URLs listed below is the result of EXCESSIVE use of extra whitespace. Such situations are probably the result of misconfigured Web servers and large amounts of code from pre-processed languages (such as PHP or ASP). The pre-processed code itself is not present in the rendered document, but extra whitespace is added for every line of the code resulting in an astronomical amount of spaces that dominate a document's downloaded size. With that in mind, MAMA's average embedded CSS size was 953.6 characters.

Size distribution of embedded CSS (STYLE element)

Maximum sizes of embedded CSS (STYLE element)

Sizes: Inline CSS (Style attribute)

The maximum recorded aggregate size of inline CSS was an enormous 2,589,039 characters (the total size for the main document size at that URL was over 3.5 Megabytes, so over 70% of this big document's size was Inline CSS! Excessive!). The average inline size was 1,006.8 characters. All the highest inline CSS size URL cases listed below were created by Microsoft Office and make heavy use of its "mso-" CSS extensions. In the future, it could be interesting to look deeper at the relative sizes of Microsoft Office document inline CSS versus non-MSOffice pages.

Size distribution of inline CSS (Style attribute)

Maximum sizes of inline CSS (Style attribute)

• Previous article—MAMA: XML
• Next article—MAMA: CSS syntax
• Table of contents

This article is licensed under a Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.