https://css-auditors.com/reports/bundesliga-2021-03/

Skip to the main content

  * CSS Auditors
  * Reports
  * Articles
  * About
  * Subscribe

The CSS File Size and Count Report for Bundesliga sites

Author: Ivan Smokrovic
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:

  * Bayer 04 Leverkusen
  * Borussia Dortmund GmbH
  * Borussia Monchengladbach
  * DSC Arminia Bielefeld
  * Eintracht Frankfurt
  * FC Augsburg
  * FC Bayern Munchen
  * FC Koln
  * FC Schalke 04
  * FC Union Berlin
  * FSV Mainz 05
  * Hertha Berlin
  * RB Leipzig
  * Sport-Club Freiburg
  * SV Werder Bremen
  * TSG Hoffenheim
  * VfB Stuttgart
  * VfL Wolfsburg
  * Bundesliga site

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:

  * wappalyzer

  * extract-css-core

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 size  Eintracht Frankfurt 1.43 MB
  Site with the smallest External CSS    FC Koln             91.97 KB
   Average size of External CSS site                         639 KB
Site with the largest Style tag CSS size FC Bayern Munchen   287 KB
  Site with the smallest Style tag CSS   VfB Stuttgart       29 B
   Average size of Style tag CSS site                        71.24 KB
 Site with the largest Inline CSS size   FC Union Berlin     9.84 KB
   Site with the smallest Inline CSS     FC Koln             422 B
    Average size of Inline CSS site                          2.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 Monchengladbach, FC Bayern Munchen and Schalke
04 use about ~ 1MB.

Every Bundesliga site uses the <style> tag. FC Bayern Munchen loads
the most CSS, 287KB. Following are Schalke 04 with 230.07KB,
Hoffenheim with 229.08KB, and FC Koln 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 Koln 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.

         Site           UI Framework
Borussia Dortmund GmbH Materialize CSS
TSG Hoffenheim         Bootstrap
Sport-Club Freiburg    Bootstrap
Hertha Berlin          Bootstrap
FC Schalke 04          Bootstrap
FSV Mainz 05           Bootstrap

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 files Bundesliga     40
                                                   site
  Site with the smallest number of External CSS    FC Augsburg    1
                      files
       Average number of External CSS files                       8
  Site with the largest number of Style tag CSS    Bundesliga     39
                                                   site
  Site with the smallest number of Style tag CSS   Hertha Berlin  1
         Average number of Style tag CSS                          5
    Site with the largest number of Inline CSS     FC Union       154
                   occurrences                     Berlin
   Site with the smallest number of Inline CSS     VfL Wolfsburg  5
                   occurrences
     Average number of Inline CSS occurrences                     30

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
Monchengladbach, 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 Munchen with 16 <style>
tags. Other clubs range from 2 to 8 <style> tags.

Every Bundesliga site uses inline style attributes, too. Koln,
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

  * Koln.

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

  * Eintracht Frankfurt,

  * FC Bayern Munchen, 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

Related resources

  * Article: On CSS sizes and performance budget

  * Report: The CSS File Size and Count Report for Premier League
    sites

About the Author

Ivan Smokrovic

Ivan Smokrovic

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.

  * Twitter
  * LinkedIn
  * GitHub
  * Website
  * Email

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

Share on Social Networks

  * Twitter
  * Facebook
  * Reddit

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!

---------------------------------------------------------------------
Your Email: [                    ] Subscribe

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 Monchengladbach
  * 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 Monchengladbach
  * 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 Monchengladbach
  * 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 Munchen
  * 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 Munchen
  * 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 Munchen
  * 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 Koln
  * 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 Koln
  * 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 Koln
  * 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

CSS Auditors

(c) 2021 CSS Auditors

  * Twitter
  * Github
  * Medium
  * Dev.to

Made with    for CSS by Silvestar Bistrovic and Ivan Smokrovic.