The CSS File Size and Count Report for Bundesliga sites

Author: Ivan Smokrović
Date: 2021-02-17

This report, like the previous one, will focus on the size of CSS. We are going to find out how much CSS is needed to create a site.

Sites audited in this report:

Note that we included the Bundesliga official site and all its clubs.

The Tooling

Just like in the previous report, we used the following tools:

Using these tools, we extracted information about UI frameworks and the size of External CSS, Style tag CSS, and Inline CSS, where:

  • External CSS refers to CSS code that comes from external CSS files,

  • Style Tag CSS refers to CSS code that comes from the <style> tags, and

  • Inline CSS refers to CSS code that comes from the inline style attributes.

Since we stumbled upon some errors while extracting the CSS code from these sites, like repetitive CSS files or <style> tags, we removed it from the report. The data collected might slightly differ from the actual data, but it is still close enough to get the “big picture” about CSS sizes.

To make the text more readable, the terms “site” and “homepage” refer to the same thing: the site’s homepage.

⚠️ Any errors in the report that might be caused by invalid software are not deliberate and should be considered as such.

The CSS File Sizes

Site with the largest External CSS sizeEintracht Frankfurt1.43 MB
Site with the smallest External CSSFC Köln91.97 KB
Average size of External CSS site639 KB
Site with the largest Style tag CSS sizeFC Bayern München287 KB
Site with the smallest Style tag CSSVfB Stuttgart29 B
Average size of Style tag CSS site71.24 KB
Site with the largest Inline CSS sizeFC Union Berlin9.84 KB
Site with the smallest Inline CSSFC Köln422 B
Average size of Inline CSS site2.45 KB

The Findings

An average page of the Bundesliga site loads ~712.69KB of CSS code. Compared to the Premier League report, that is 3.30% less CSS code. ~89.66% of the CSS code comes from the External CSS file, ~10% comes from the <style> tags, and ~0.34% comes from the inline style attributes. Compared to the Premier League report, an average Bundesliga site uses ~3.56% more External CSS, ~39.76% less CSS coming from the <style> tags, and ~3.54% less from inline style attributes.

This graph is interactive. You could hover or tap regions to see extra information and enable or disable specific metrics by clicking on a label below the graph.

All Bundesliga sites use External CSS. Eintracht Frankfurt loads almost 1.5MB, Borussia Mönchengladbach, FC Bayern München and Schalke 04 use about ~ 1MB.

Every Bundesliga site uses the <style> tag. FC Bayern München loads the most CSS, 287KB. Following are Schalke 04 with 230.07KB, Hoffenheim with 229.08KB, and FC Köln with 229.01KB. Sites with the least <style> tag CSS code count only a few bytes, like Mainz 05 and Hertha.

As for the inline style attribute, everyone uses it too. Union Berlin uses the most with 9.84KB, Arminia Bielefeld and SV Werder Bremen use half of that, and Köln uses the least, only 422B.

Wappalyzer

According to Wappalyzer, six sites use UI frameworks. Borussia Dortmund uses Materialize CSS. Hoffenheim, Freiburg, Hertha, Schalke 04, and Mainz 05 use Bootstrap.

SiteUI Framework
Borussia Dortmund GmbHMaterialize CSS
TSG HoffenheimBootstrap
Sport-Club FreiburgBootstrap
Hertha BerlinBootstrap
FC Schalke 04Bootstrap
FSV Mainz 05Bootstrap

According to research conducted by the State Of CSS, satisfaction with Bootstrap is declining. In 2019, 52% of respondents claimed they are satisfied, while the following year, the satisfaction dropped to 48%. Interest in Bootstrap in both years is held by 17% of all respondents. Usage fell from 87% to 86% within one year, and awareness ratio rankings for both years are 100%.

For Materialize CSS, satisfaction fell from 57% to 53%, just like the interest fell from 37% to 29%. The usage has increased from 30% to 33%, just like the awareness increased from 72% to 76%.

Bootstrap and Materialize CSS are the two most used frameworks, and Bundesliga sites follow the statistics here.

In comparison to six Bundesliga sites that use UI frameworks, only three Premier League sites use them. Since there are 19 sites in the Bundesliga report compared to 21 Premier League sites, we could see that Bundesliga sites rely on UI frameworks more heavily.

The CSS File Counts

Site with the largest number of External CSS filesBundesliga site40
Site with the smallest number of External CSS filesFC Augsburg1
Average number of External CSS files8
Site with the largest number of Style tag CSSBundesliga site39
Site with the smallest number of Style tag CSSHertha Berlin1
Average number of Style tag CSS5
Site with the largest number of Inline CSS occurrencesFC Union Berlin154
Site with the smallest number of Inline CSS occurrencesVfL Wolfsburg5
Average number of Inline CSS occurrences30

The Findings

The average Bundesliga site’s homepage loads 8 External CSS files, 5 <style> tags, and 30 style attributes.

This graph is interactive. You could hover or tap regions to see extra information and enable or disable specific metrics by clicking on a label below the graph.

Augsburg loads only one, Bayer Leverkusen and Union Berlin load two, while the Bundesliga site loads 40 External CSS files.

All Bundesliga sites use <style> tags. Bayer Leverkusen, Borussia Mönchengladbach, Eintracht Frankfurt, Mainz 05 and Hertha use a single <style> tag. The Bundesliga site loads 39 <style> tags, and the second largest in the group is FC Bayern München with 16 <style> tags. Other clubs range from 2 to 8 <style> tags.

Every Bundesliga site uses inline style attributes, too. Köln, Stuttgart, and Wolfsburg use only a few style attributes, Arminia Bielefeld and SV Werder Bremen use about 60 style attributes, while Union Berlin uses as many as 154 style attributes.

Top and Bottom Sites

Top three Bundesliga sites in terms of CSS file size are:

  • Arminia Bielefeld,

  • Union Berlin, and

  • Köln.

On the other side, the bottom three sites in terms of CSS file size are:

  • Eintracht Frankfurt,

  • FC Bayern München, and

  • FC Schalke 04.

The Conclusion

Even though the average Bundesliga's homepage CSS size is slightly lighter than the average Premier League's homepage CSS size, it is still too big.

According to the httparhive report, the sum of transfer size kilobytes of all external stylesheets requested by the page for median desktop is 73.3KB, while the median mobile is 68.7KB. If we look at the last three years, CSS file size increased more than 30%.

The trend of loading more CSS code every year is continuing. With modern technologies like CSS Grid and CSS Variables that should take over CSS frameworks, one might expect a different outcome. We certainly hope that will be the case in the following years.

#RespectCSS

About the Author

Ivan Smokrović

Ivan Smokrović

Ivan is an interactive designer and developer who loves to create modern websites that run across platforms and devices. His passion is an animation that he tries to bring to the web. In his free time, he does outdoor activities like hiking and nature photography.

If you would like to write, analyze and audit more sites with us, contact us.

Share on Social Networks

Subscribe

We are working hard to publish new reports and blog posts as soon as possible.

If you would like to get recent reports in your inbox, subscribe here!


Powered by TinyLetter

Single Reports

  • Bayer 04 Leverkusen
  • Total count of External CSS: 2
  • Total size of External CSS: 582.9 KB
  • Total gzipped size of External CSS: 99.12 KB
  • Percent of External CSS: 100
  • Bayer 04 Leverkusen
  • Total count of Style tag CSS: 1
  • Total size of Style tag CSS: 245 B
  • Total gzipped size of Style tag CSS: 161 B
  • Percent of Style tag CSS: 0
  • Bayer 04 Leverkusen
  • Total count of Inline CSS: 11
  • Total size of Inline CSS: 977 B
  • Total gzipped size of Inline CSS: 303 B
  • Percent of Inline CSS: 0
  • Borussia Dortmund GmbH
  • Total count of External CSS: 17
  • Total size of External CSS: 707 KB
  • Total gzipped size of External CSS: 111.13 KB
  • Percent of External CSS: 95
  • Borussia Dortmund GmbH
  • Total count of Style tag CSS: 3
  • Total size of Style tag CSS: 37.56 KB
  • Total gzipped size of Style tag CSS: 6.34 KB
  • Percent of Style tag CSS: 5
  • Borussia Dortmund GmbH
  • Total count of Inline CSS: 20
  • Total size of Inline CSS: 1.42 KB
  • Total gzipped size of Inline CSS: 374 B
  • Percent of Inline CSS: 0
  • Borussia Mönchengladbach
  • Total count of External CSS: 6
  • Total size of External CSS: 1.03 MB
  • Total gzipped size of External CSS: 189.9 KB
  • Percent of External CSS: 98
  • Borussia Mönchengladbach
  • Total count of Style tag CSS: 1
  • Total size of Style tag CSS: 18.36 KB
  • Total gzipped size of Style tag CSS: 3.37 KB
  • Percent of Style tag CSS: 2
  • Borussia Mönchengladbach
  • Total count of Inline CSS: 14
  • Total size of Inline CSS: 2.34 KB
  • Total gzipped size of Inline CSS: 458 B
  • Percent of Inline CSS: 0
  • DSC Arminia Bielefeld
  • Total count of External CSS: 15
  • Total size of External CSS: 205.69 KB
  • Total gzipped size of External CSS: 44.88 KB
  • Percent of External CSS: 95
  • DSC Arminia Bielefeld
  • Total count of Style tag CSS: 3
  • Total size of Style tag CSS: 6.83 KB
  • Total gzipped size of Style tag CSS: 1.8 KB
  • Percent of Style tag CSS: 3
  • DSC Arminia Bielefeld
  • Total count of Inline CSS: 65
  • Total size of Inline CSS: 4.64 KB
  • Total gzipped size of Inline CSS: 737 B
  • Percent of Inline CSS: 2
  • Eintracht Frankfurt
  • Total count of External CSS: 6
  • Total size of External CSS: 1.43 MB
  • Total gzipped size of External CSS: 164.07 KB
  • Percent of External CSS: 100
  • Eintracht Frankfurt
  • Total count of Style tag CSS: 1
  • Total size of Style tag CSS: 5.02 KB
  • Total gzipped size of Style tag CSS: 1.4 KB
  • Percent of Style tag CSS: 0
  • Eintracht Frankfurt
  • Total count of Inline CSS: 25
  • Total size of Inline CSS: 2.13 KB
  • Total gzipped size of Inline CSS: 455 B
  • Percent of Inline CSS: 0
  • FC Augsburg
  • Total count of External CSS: 1
  • Total size of External CSS: 394.27 KB
  • Total gzipped size of External CSS: 58.76 KB
  • Percent of External CSS: 91
  • FC Augsburg
  • Total count of Style tag CSS: 3
  • Total size of Style tag CSS: 38.75 KB
  • Total gzipped size of Style tag CSS: 6.5 KB
  • Percent of Style tag CSS: 9
  • FC Augsburg
  • Total count of Inline CSS: 25
  • Total size of Inline CSS: 1.98 KB
  • Total gzipped size of Inline CSS: 427 B
  • Percent of Inline CSS: 0
  • FC Bayern München
  • Total count of External CSS: 3
  • Total size of External CSS: 1023.09 KB
  • Total gzipped size of External CSS: 109.12 KB
  • Percent of External CSS: 78
  • FC Bayern München
  • Total count of Style tag CSS: 16
  • Total size of Style tag CSS: 287 KB
  • Total gzipped size of Style tag CSS: 32.34 KB
  • Percent of Style tag CSS: 22
  • FC Bayern München
  • Total count of Inline CSS: 36
  • Total size of Inline CSS: 2.2 KB
  • Total gzipped size of Inline CSS: 464 B
  • Percent of Inline CSS: 0
  • FC Köln
  • Total count of External CSS: 4
  • Total size of External CSS: 91.97 KB
  • Total gzipped size of External CSS: 14.49 KB
  • Percent of External CSS: 29
  • FC Köln
  • Total count of Style tag CSS: 4
  • Total size of Style tag CSS: 229.01 KB
  • Total gzipped size of Style tag CSS: 23.04 KB
  • Percent of Style tag CSS: 71
  • FC Köln
  • Total count of Inline CSS: 6
  • Total size of Inline CSS: 422 B
  • Total gzipped size of Inline CSS: 168 B
  • Percent of Inline CSS: 0
  • FC Schalke 04
  • Total count of External CSS: 10
  • Total size of External CSS: 977.07 KB
  • Total gzipped size of External CSS: 105.62 KB
  • Percent of External CSS: 81
  • FC Schalke 04
  • Total count of Style tag CSS: 8
  • Total size of Style tag CSS: 230.07 KB
  • Total gzipped size of Style tag CSS: 23.36 KB
  • Percent of Style tag CSS: 19
  • FC Schalke 04
  • Total count of Inline CSS: 38
  • Total size of Inline CSS: 3.57 KB
  • Total gzipped size of Inline CSS: 684 B
  • Percent of Inline CSS: 0
  • FC Union Berlin
  • Total count of External CSS: 2
  • Total size of External CSS: 255.24 KB
  • Total gzipped size of External CSS: 38.16 KB
  • Percent of External CSS: 96
  • FC Union Berlin
  • Total count of Style tag CSS: 3
  • Total size of Style tag CSS: 525 B
  • Total gzipped size of Style tag CSS: 234 B
  • Percent of Style tag CSS: 0
  • FC Union Berlin
  • Total count of Inline CSS: 154
  • Total size of Inline CSS: 9.84 KB
  • Total gzipped size of Inline CSS: 1.25 KB
  • Percent of Inline CSS: 4
  • FSV Mainz 05
  • Total count of External CSS: 4
  • Total size of External CSS: 752.26 KB
  • Total gzipped size of External CSS: 263.48 KB
  • Percent of External CSS: 100
  • FSV Mainz 05
  • Total count of Style tag CSS: 1
  • Total size of Style tag CSS: 39 B
  • Total gzipped size of Style tag CSS: 54 B
  • Percent of Style tag CSS: 0
  • FSV Mainz 05
  • Total count of Inline CSS: 23
  • Total size of Inline CSS: 1.74 KB
  • Total gzipped size of Inline CSS: 447 B
  • Percent of Inline CSS: 0
  • Hertha Berlin
  • Total count of External CSS: 15
  • Total size of External CSS: 503.48 KB
  • Total gzipped size of External CSS: 72.93 KB
  • Percent of External CSS: 100
  • Hertha Berlin
  • Total count of Style tag CSS: 1
  • Total size of Style tag CSS: 39 B
  • Total gzipped size of Style tag CSS: 54 B
  • Percent of Style tag CSS: 0
  • Hertha Berlin
  • Total count of Inline CSS: 22
  • Total size of Inline CSS: 2.31 KB
  • Total gzipped size of Inline CSS: 394 B
  • Percent of Inline CSS: 0
  • RB Leipzig
  • Total count of External CSS: 5
  • Total size of External CSS: 875.47 KB
  • Total gzipped size of External CSS: 126.1 KB
  • Percent of External CSS: 100
  • RB Leipzig
  • Total count of Style tag CSS: 3
  • Total size of Style tag CSS: 582 B
  • Total gzipped size of Style tag CSS: 248 B
  • Percent of Style tag CSS: 0
  • RB Leipzig
  • Total count of Inline CSS: 9
  • Total size of Inline CSS: 591 B
  • Total gzipped size of Inline CSS: 160 B
  • Percent of Inline CSS: 0
  • Sport-Club Freiburg
  • Total count of External CSS: 17
  • Total size of External CSS: 427.6 KB
  • Total gzipped size of External CSS: 72.52 KB
  • Percent of External CSS: 91
  • Sport-Club Freiburg
  • Total count of Style tag CSS: 6
  • Total size of Style tag CSS: 38.96 KB
  • Total gzipped size of Style tag CSS: 6.57 KB
  • Percent of Style tag CSS: 8
  • Sport-Club Freiburg
  • Total count of Inline CSS: 17
  • Total size of Inline CSS: 1.6 KB
  • Total gzipped size of Inline CSS: 383 B
  • Percent of Inline CSS: 0
  • SV Werder Bremen
  • Total count of External CSS: 3
  • Total size of External CSS: 816.23 KB
  • Total gzipped size of External CSS: 121.41 KB
  • Percent of External CSS: 96
  • SV Werder Bremen
  • Total count of Style tag CSS: 2
  • Total size of Style tag CSS: 33.29 KB
  • Total gzipped size of Style tag CSS: 5.9 KB
  • Percent of Style tag CSS: 4
  • SV Werder Bremen
  • Total count of Inline CSS: 51
  • Total size of Inline CSS: 4.85 KB
  • Total gzipped size of Inline CSS: 521 B
  • Percent of Inline CSS: 1
  • TSG Hoffenheim
  • Total count of External CSS: 6
  • Total size of External CSS: 776.27 KB
  • Total gzipped size of External CSS: 111.06 KB
  • Percent of External CSS: 77
  • TSG Hoffenheim
  • Total count of Style tag CSS: 5
  • Total size of Style tag CSS: 229.08 KB
  • Total gzipped size of Style tag CSS: 23.07 KB
  • Percent of Style tag CSS: 23
  • TSG Hoffenheim
  • Total count of Inline CSS: 30
  • Total size of Inline CSS: 2.3 KB
  • Total gzipped size of Inline CSS: 659 B
  • Percent of Inline CSS: 0
  • VfB Stuttgart
  • Total count of External CSS: 3
  • Total size of External CSS: 562.32 KB
  • Total gzipped size of External CSS: 80.73 KB
  • Percent of External CSS: 100
  • VfB Stuttgart
  • Total count of Style tag CSS: 2
  • Total size of Style tag CSS: 29 B
  • Total gzipped size of Style tag CSS: 49 B
  • Percent of Style tag CSS: 0
  • VfB Stuttgart
  • Total count of Inline CSS: 5
  • Total size of Inline CSS: 507 B
  • Total gzipped size of Inline CSS: 250 B
  • Percent of Inline CSS: 0
  • VfL Wolfsburg
  • Total count of External CSS: 4
  • Total size of External CSS: 530.41 KB
  • Total gzipped size of External CSS: 107.54 KB
  • Percent of External CSS: 99
  • VfL Wolfsburg
  • Total count of Style tag CSS: 2
  • Total size of Style tag CSS: 2.49 KB
  • Total gzipped size of Style tag CSS: 712 B
  • Percent of Style tag CSS: 0
  • VfL Wolfsburg
  • Total count of Inline CSS: 5
  • Total size of Inline CSS: 484 B
  • Total gzipped size of Inline CSS: 180 B
  • Percent of Inline CSS: 0
  • Bundesliga site
  • Total count of External CSS: 40
  • Total size of External CSS: 146.03 KB
  • Total gzipped size of External CSS: 22.69 KB
  • Percent of External CSS: 42
  • Bundesliga site
  • Total count of Style tag CSS: 39
  • Total size of Style tag CSS: 195.66 KB
  • Total gzipped size of Style tag CSS: 28.73 KB
  • Percent of Style tag CSS: 57
  • Bundesliga site
  • Total count of Inline CSS: 31
  • Total size of Inline CSS: 2.76 KB
  • Total gzipped size of Inline CSS: 613 B
  • Percent of Inline CSS: 1