The CSS File Size and Count Report for Premier League sites

Author: Silvestar Bistrović
Date: 2021-02-17

In this report, we are going to focus on the size of CSS. The aim of the report is to understand how much CSS code is needed to build a site.

Sites audited in this report:

Note that we included all sites of the Premier League plus the Premier League official site.

The Tooling

To generate this 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 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 sizePremier League site2.47 MB
Sites with no External CSSBurnley FC
Average size of External CSS site616.28 KB
Site with the largest Style tag CSS sizeChelsea FC914.32 KB
Site with the smallest Style tag CSSEverton FC46 B
Average size of Style tag CSS site118.26 KB
Site with the largest Inline CSS sizeAston Villa FC7.11 KB
Site with the smallest Inline CSSEverton FC99 B
Average size of Inline CSS site2.54 KB

The Findings

An average homepage of the Premier League site loads ~737KB of CSS code. Around ~83.61% of the CSS code comes from external CSS files, around ~16,04% comes from the <style> tags, and only ~0.34% comes from the inline style attributes. It is not surprising that most of the CSS code comes from the external CSS files since that is the most recommended way to do it. With the recent Google updates about Web Vitals, like Cumulative Layout Shifts and Largest Contentful Paint, and the awareness of the importance of the “above the fold” code, it is also not surprising to see the percentage of the Style Tag CSS. The least popular, as it should be, is the Inline CSS code.

Web Almanac

According to Web Almanac, around 10% of all processed sites load more than 240KB of CSS code. According to this report, all Premier League sites but two, Burnley’s and Wolverhampton’s, load more than 240KB of CSS code overall.

While JavaScript far surpasses CSS in its share of page weight, CSS has certainly grown in size over the years, with the median desktop page loading 62 KB of CSS code, and one in ten pages loading more than 240 KB of CSS code.

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

Burnley’s and Chelsea’s sites do not load any external CSS file. The Premier League’s site loads more than 2MB of External CSS. Four other sites load more than 1MB of External CSS.

Everton’s, Leicester’s, and Newcastle’s sites don’t use the <style> tag. Chelsea’s site loads more than 900KB, and three other sites load more than 200KB.

Regarding the inline style attribute, all sites load less than 8KB of CSS code. Six sites load less than 1KB, and the lowest CSS code that comes from the inline style attribute is loaded on Everton’s site. Three sites load more than 6KB, where Aston Villa’s site loads the most, more than 7KB.

Wappalyzer

According to Wappalyzer, a tool for identifying technologies on websites, only three sites use UI frameworks: Leeds’s and West Ham’s sites use Bootstrap and WBA’s site uses the ZURB Foundation framework.

SiteUI Framework
Leeds UnitedBootstrap
West Bromwich AlbionZURB Foundation
West Ham United FCBootstrap

Let us compare the average size of the Premier League site to UI frameworks sizes. The full version of Materialize CSS is around ~142KB, Bootstrap is around ~160KB, Foundation is around 168KB, and Tachyons is around ~205KB. Premier League sites load CSS code that is more than five times bigger than the entire Materialize CSS, more than 4.5 times bigger than Bootstrap, almost 4.5 times bigger than Foundation, and more than 3.5 times bigger than Tachyons.

The CSS File Counts

Site with the largest number of External CSS filesWest Ham United FC28
Sites with no External CSSBurnley FC
Average number of External CSS files4
Site with the largest number of Style tag CSSSheffield United FC100
Site with the smallest number of Style tag CSSNewcastle United1
Average number of Style tag CSS19
Site with the largest number of Inline CSS occurrencesAston Villa FC62
Site with the smallest number of Inline CSS occurrencesLeicester City2
Average number of Inline CSS occurrences23

The Findings

The Premier League site’s average homepage loads 4 External CSS files, 19 <style> tags, and 23 style attributes.

Web Almanac

According to Web Almanac, 7% of all pages use a single External CSS file, while the average is 6.

All these kilobytes of code are typically distributed across multiple files and <style> elements; only about 7% of pages concentrate all their CSS code in one remote stylesheet, as we are often taught to do. In fact, the median page contains 3 <style> elements and 6 remote stylesheets, with 10% of them carrying over 14 <style> elements and over 20 remote CSS files! While this is suboptimal on desktop, it really kills performance on mobile, where round-trip latency is more important than raw download speed.

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

The only site that does not load any External CSS file is Burnley’s site. Six sites load only a single External CSS file, including Brighton’s, Chelsea’s, Everton’s, Manchester’s, Newcastle’s, and Tottenham’s site. On the other hand, West Ham’s site loads 28 External CSS files, while two other sites load more than 10 External CSS files, Aston Villa’s and Liverpool’s sites.

All sites use at least one <style> tag. Sheffield’s and Aston Villa’s sites use more than 90 <style> tags, while Arsenal’s, Leicester’s, and Newcastle’s sites load only one <style> tag.

All sites use inline style attribute. Everton’s and Leicester’s sites use only a couple of style attributes, while Aston Villa’s, Fulham’s, and Sheffield’s sites use more than 50 style attributes.

Top and Bottom Sites

Top three Premier League sites in terms of CSS file size are:

  • Burnley,

  • Wolves, and

  • Fulham.

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

  • Premier League

  • Southampton, and

  • Manchester United.

The Conclusion

An average homepage of the Premier League site is bloated with CSS. If we think of the best practices in the web industry, we cannot see many sites use the best practices. Only a few sites might be rated as optimal or performant in terms of CSS code. The architecture and the structure of these sites might not be straightforward, but that does not mean that CSS should be ignored, or worse, disrespected.

It is interesting to see different approaches to loading the CSS, where some sites use only Style Tag CSS or External CSS, while others use many <style> tags and external CSS files. Although the loading technique might depend on the technology used to build these sites, CSS should not be abused or neglected.

Combining all CSS files in a single one, moving code from <style> tags and style attributes might seem daunting tasks, but it could be done. All it is takes is some respect and love for CSS.

#RespectCSS

About the Author

Silvestar Bistrović

Silvestar Bistrović

Silvestar is a frontend UI developer who enjoys creating pixel-perfect, responsive, and modern websites. Making faster, lighter, and more secure sites using WordPress or Static Page Generators is his speciality. When he is not coding, Silvestar likes to write articles on his blog.

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

  • Arsenal
  • Total count of External CSS: 5
  • Total size of External CSS: 256.22 KB
  • Total gzipped size of External CSS: 36.09 KB
  • Percent of External CSS: 72
  • Arsenal
  • Total count of Style tag CSS: 1
  • Total size of Style tag CSS: 97.91 KB
  • Total gzipped size of Style tag CSS: 14.56 KB
  • Percent of Style tag CSS: 28
  • Arsenal
  • Total count of Inline CSS: 12
  • Total size of Inline CSS: 1.23 KB
  • Total gzipped size of Inline CSS: 434 B
  • Percent of Inline CSS: 0
  • Aston Villa FC
  • Total count of External CSS: 11
  • Total size of External CSS: 320.54 KB
  • Total gzipped size of External CSS: 57.95 KB
  • Percent of External CSS: 53
  • Aston Villa FC
  • Total count of Style tag CSS: 97
  • Total size of Style tag CSS: 273.25 KB
  • Total gzipped size of Style tag CSS: 34.54 KB
  • Percent of Style tag CSS: 45
  • Aston Villa FC
  • Total count of Inline CSS: 62
  • Total size of Inline CSS: 7.11 KB
  • Total gzipped size of Inline CSS: 1.1 KB
  • Percent of Inline CSS: 1
  • Brighton & Hove Albion
  • Total count of External CSS: 1
  • Total size of External CSS: 338.51 KB
  • Total gzipped size of External CSS: 46.98 KB
  • Percent of External CSS: 95
  • Brighton & Hove Albion
  • Total count of Style tag CSS: 5
  • Total size of Style tag CSS: 16.59 KB
  • Total gzipped size of Style tag CSS: 3.54 KB
  • Percent of Style tag CSS: 5
  • Brighton & Hove Albion
  • Total count of Inline CSS: 8
  • Total size of Inline CSS: 754 B
  • Total gzipped size of Inline CSS: 240 B
  • Percent of Inline CSS: 0
  • Burnley FC
  • Total count of Style tag CSS: 7
  • Total size of Style tag CSS: 46.97 KB
  • Total gzipped size of Style tag CSS: 10.27 KB
  • Percent of Style tag CSS: 97
  • Burnley FC
  • Total count of Inline CSS: 18
  • Total size of Inline CSS: 1.41 KB
  • Total gzipped size of Inline CSS: 419 B
  • Percent of Inline CSS: 3
  • Chelsea FC
  • Total count of External CSS: 1
  • Total size of External CSS: 43 B
  • Total gzipped size of External CSS: 52 B
  • Percent of External CSS: 0
  • Chelsea FC
  • Total count of Style tag CSS: 36
  • Total size of Style tag CSS: 914.32 KB
  • Total gzipped size of Style tag CSS: 80.8 KB
  • Percent of Style tag CSS: 100
  • Chelsea FC
  • Total count of Inline CSS: 24
  • Total size of Inline CSS: 3.34 KB
  • Total gzipped size of Inline CSS: 929 B
  • Percent of Inline CSS: 0
  • Crystal Palace FC
  • Total count of External CSS: 6
  • Total size of External CSS: 1.01 MB
  • Total gzipped size of External CSS: 134.77 KB
  • Percent of External CSS: 91
  • Crystal Palace FC
  • Total count of Style tag CSS: 3
  • Total size of Style tag CSS: 94.47 KB
  • Total gzipped size of Style tag CSS: 13.82 KB
  • Percent of Style tag CSS: 8
  • Crystal Palace FC
  • Total count of Inline CSS: 32
  • Total size of Inline CSS: 2.61 KB
  • Total gzipped size of Inline CSS: 655 B
  • Percent of Inline CSS: 0
  • Everton FC
  • Total count of External CSS: 1
  • Total size of External CSS: 381.95 KB
  • Total gzipped size of External CSS: 55.84 KB
  • Percent of External CSS: 100
  • Everton FC
  • Total count of Style tag CSS: 1
  • Total size of Style tag CSS: 46 B
  • Total gzipped size of Style tag CSS: 59 B
  • Percent of Style tag CSS: 0
  • Everton FC
  • Total count of Inline CSS: 2
  • Total size of Inline CSS: 99 B
  • Total gzipped size of Inline CSS: 61 B
  • Percent of Inline CSS: 0
  • Fulham FC
  • Total count of External CSS: 2
  • Total size of External CSS: 55.84 KB
  • Total gzipped size of External CSS: 25.58 KB
  • Percent of External CSS: 17
  • Fulham FC
  • Total count of Style tag CSS: 65
  • Total size of Style tag CSS: 272.18 KB
  • Total gzipped size of Style tag CSS: 29.62 KB
  • Percent of Style tag CSS: 81
  • Fulham FC
  • Total count of Inline CSS: 53
  • Total size of Inline CSS: 6.72 KB
  • Total gzipped size of Inline CSS: 983 B
  • Percent of Inline CSS: 2
  • Leicester City
  • Total count of External CSS: 2
  • Total size of External CSS: 550.3 KB
  • Total gzipped size of External CSS: 76.22 KB
  • Percent of External CSS: 100
  • Leicester City
  • Total count of Style tag CSS: 2
  • Total size of Style tag CSS: 248 B
  • Total gzipped size of Style tag CSS: 120 B
  • Percent of Style tag CSS: 0
  • Leicester City
  • Total count of Inline CSS: 2
  • Total size of Inline CSS: 157 B
  • Total gzipped size of Inline CSS: 87 B
  • Percent of Inline CSS: 0
  • Leeds United
  • Total count of External CSS: 5
  • Total size of External CSS: 398.99 KB
  • Total gzipped size of External CSS: 55.03 KB
  • Percent of External CSS: 91
  • Leeds United
  • Total count of Style tag CSS: 8
  • Total size of Style tag CSS: 35.75 KB
  • Total gzipped size of Style tag CSS: 6.64 KB
  • Percent of Style tag CSS: 8
  • Leeds United
  • Total count of Inline CSS: 22
  • Total size of Inline CSS: 2.19 KB
  • Total gzipped size of Inline CSS: 513 B
  • Percent of Inline CSS: 1
  • Liverpool FC
  • Total count of External CSS: 12
  • Total size of External CSS: 1.31 MB
  • Total gzipped size of External CSS: 181.84 KB
  • Percent of External CSS: 94
  • Liverpool FC
  • Total count of Style tag CSS: 11
  • Total size of Style tag CSS: 85.84 KB
  • Total gzipped size of Style tag CSS: 16.68 KB
  • Percent of Style tag CSS: 6
  • Liverpool FC
  • Total count of Inline CSS: 35
  • Total size of Inline CSS: 3.53 KB
  • Total gzipped size of Inline CSS: 633 B
  • Percent of Inline CSS: 0
  • Manchester City FC
  • Total count of External CSS: 2
  • Total size of External CSS: 552.78 KB
  • Total gzipped size of External CSS: 70.72 KB
  • Percent of External CSS: 95
  • Manchester City FC
  • Total count of Style tag CSS: 10
  • Total size of Style tag CSS: 25.81 KB
  • Total gzipped size of Style tag CSS: 4.54 KB
  • Percent of Style tag CSS: 4
  • Manchester City FC
  • Total count of Inline CSS: 7
  • Total size of Inline CSS: 497 B
  • Total gzipped size of Inline CSS: 146 B
  • Percent of Inline CSS: 0
  • Manchester United FC
  • Total count of External CSS: 1
  • Total size of External CSS: 1.47 MB
  • Total gzipped size of External CSS: 134.35 KB
  • Percent of External CSS: 95
  • Manchester United FC
  • Total count of Style tag CSS: 6
  • Total size of Style tag CSS: 73.33 KB
  • Total gzipped size of Style tag CSS: 16.32 KB
  • Percent of Style tag CSS: 5
  • Manchester United FC
  • Total count of Inline CSS: 30
  • Total size of Inline CSS: 2.59 KB
  • Total gzipped size of Inline CSS: 619 B
  • Percent of Inline CSS: 0
  • Newcastle United
  • Total count of External CSS: 1
  • Total size of External CSS: 456.2 KB
  • Total gzipped size of External CSS: 53.35 KB
  • Percent of External CSS: 100
  • Newcastle United
  • Total count of Style tag CSS: 1
  • Total size of Style tag CSS: 413 B
  • Total gzipped size of Style tag CSS: 206 B
  • Percent of Style tag CSS: 0
  • Newcastle United
  • Total count of Inline CSS: 8
  • Total size of Inline CSS: 394 B
  • Total gzipped size of Inline CSS: 122 B
  • Percent of Inline CSS: 0
  • Sheffield United FC
  • Total count of External CSS: 6
  • Total size of External CSS: 78.52 KB
  • Total gzipped size of External CSS: 27.45 KB
  • Percent of External CSS: 21
  • Sheffield United FC
  • Total count of Style tag CSS: 100
  • Total size of Style tag CSS: 289.71 KB
  • Total gzipped size of Style tag CSS: 37.11 KB
  • Percent of Style tag CSS: 77
  • Sheffield United FC
  • Total count of Inline CSS: 51
  • Total size of Inline CSS: 6.5 KB
  • Total gzipped size of Inline CSS: 1.02 KB
  • Percent of Inline CSS: 2
  • Southampton FC
  • Total count of External CSS: 4
  • Total size of External CSS: 1.54 MB
  • Total gzipped size of External CSS: 566.39 KB
  • Percent of External CSS: 98
  • Southampton FC
  • Total count of Style tag CSS: 10
  • Total size of Style tag CSS: 24.95 KB
  • Total gzipped size of Style tag CSS: 4.91 KB
  • Percent of Style tag CSS: 2
  • Southampton FC
  • Total count of Inline CSS: 27
  • Total size of Inline CSS: 2.86 KB
  • Total gzipped size of Inline CSS: 738 B
  • Percent of Inline CSS: 0
  • Tottenham Hotspurs
  • Total count of External CSS: 1
  • Total size of External CSS: 306.86 KB
  • Total gzipped size of External CSS: 55.01 KB
  • Percent of External CSS: 72
  • Tottenham Hotspurs
  • Total count of Style tag CSS: 10
  • Total size of Style tag CSS: 119.14 KB
  • Total gzipped size of Style tag CSS: 18.15 KB
  • Percent of Style tag CSS: 28
  • Tottenham Hotspurs
  • Total count of Inline CSS: 17
  • Total size of Inline CSS: 1.66 KB
  • Total gzipped size of Inline CSS: 513 B
  • Percent of Inline CSS: 0
  • West Bromwich Albion
  • Total count of External CSS: 4
  • Total size of External CSS: 392.51 KB
  • Total gzipped size of External CSS: 50.76 KB
  • Percent of External CSS: 97
  • West Bromwich Albion
  • Total count of Style tag CSS: 6
  • Total size of Style tag CSS: 11.95 KB
  • Total gzipped size of Style tag CSS: 6.77 KB
  • Percent of Style tag CSS: 3
  • West Bromwich Albion
  • Total count of Inline CSS: 21
  • Total size of Inline CSS: 1.93 KB
  • Total gzipped size of Inline CSS: 387 B
  • Percent of Inline CSS: 0
  • West Ham United FC
  • Total count of External CSS: 28
  • Total size of External CSS: 659.94 KB
  • Total gzipped size of External CSS: 98.25 KB
  • Percent of External CSS: 96
  • West Ham United FC
  • Total count of Style tag CSS: 10
  • Total size of Style tag CSS: 26.08 KB
  • Total gzipped size of Style tag CSS: 4.59 KB
  • Percent of Style tag CSS: 4
  • West Ham United FC
  • Total count of Inline CSS: 32
  • Total size of Inline CSS: 3.07 KB
  • Total gzipped size of Inline CSS: 616 B
  • Percent of Inline CSS: 0
  • Wolverhampton Wanderers FC
  • Total count of External CSS: 2
  • Total size of External CSS: 206.75 KB
  • Total gzipped size of External CSS: 33.86 KB
  • Percent of External CSS: 93
  • Wolverhampton Wanderers FC
  • Total count of Style tag CSS: 6
  • Total size of Style tag CSS: 12.12 KB
  • Total gzipped size of Style tag CSS: 6.81 KB
  • Percent of Style tag CSS: 5
  • Wolverhampton Wanderers FC
  • Total count of Inline CSS: 28
  • Total size of Inline CSS: 4.2 KB
  • Total gzipped size of Inline CSS: 1.94 KB
  • Percent of Inline CSS: 2
  • Premier League site
  • Total count of External CSS: 7
  • Total size of External CSS: 2.47 MB
  • Total gzipped size of External CSS: 403.43 KB
  • Percent of External CSS: 98
  • Premier League site
  • Total count of Style tag CSS: 4
  • Total size of Style tag CSS: 62.4 KB
  • Total gzipped size of Style tag CSS: 12.63 KB
  • Percent of Style tag CSS: 2
  • Premier League site
  • Total count of Inline CSS: 10
  • Total size of Inline CSS: 587 B
  • Total gzipped size of Inline CSS: 191 B
  • Percent of Inline CSS: 0