The CSS File Size and Count Report for Premier League sites

Author: Silvestar
Published:

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:

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 involuntary.

The CSS File Sizes

Site Size Gzip
Largest External CSS Premier League site 2.59 MB 413.04 kB
Site with no External CSS Burnley FC 0 0
Average size of External CSS - 631.07 kB 106.06 kB
Largest Style tag CSS Chelsea FC 936.26 kB 108.32 kB
Smallest Style tag CSS Everton FC 46 B 59 B
Average size of Style tag CSS - 121.1 kB 21.47 kB
Largest Inline CSS Aston Villa FC 7.29 kB 7.57 kB
Smallest Inline CSS Everton FC 99 B 139 B
Average size of Inline CSS - 2.6 kB 2.71 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.

CSS sizes
Site Size
ArsenalExternal CSS: 262.37 kBStyle tag CSS: 100.26 kBInline CSS: 1.26 kB
Aston Villa FCExternal CSS: 328.23 kBStyle tag CSS: 279.81 kBInline CSS: 7.29 kB
Brighton & Hove AlbionExternal CSS: 346.63 kBStyle tag CSS: 16.99 kBInline CSS: 754 B
Burnley FCStyle tag CSS: 48.1 kBInline CSS: 1.44 kB
Chelsea FCExternal CSS: 43 BStyle tag CSS: 936.26 kBInline CSS: 3.42 kB
Crystal Palace FCExternal CSS: 1.06 MBStyle tag CSS: 96.74 kBInline CSS: 2.68 kB
Everton FCExternal CSS: 391.12 kBStyle tag CSS: 46 BInline CSS: 99 B
Fulham FCExternal CSS: 57.18 kBStyle tag CSS: 278.71 kBInline CSS: 6.88 kB
Leicester CityExternal CSS: 563.51 kBStyle tag CSS: 248 BInline CSS: 157 B
Leeds UnitedExternal CSS: 408.57 kBStyle tag CSS: 36.61 kBInline CSS: 2.24 kB
Liverpool FCExternal CSS: 1.37 MBStyle tag CSS: 87.9 kBInline CSS: 3.61 kB
Manchester City FCExternal CSS: 566.04 kBStyle tag CSS: 26.43 kBInline CSS: 497 B
Manchester United FCExternal CSS: 1.54 MBStyle tag CSS: 75.09 kBInline CSS: 2.65 kB
Newcastle UnitedExternal CSS: 467.14 kBStyle tag CSS: 413 BInline CSS: 394 B
Sheffield United FCExternal CSS: 80.41 kBStyle tag CSS: 296.66 kBInline CSS: 6.65 kB
Southampton FCExternal CSS: 1.62 MBStyle tag CSS: 25.54 kBInline CSS: 2.92 kB
Tottenham HotspursExternal CSS: 314.22 kBStyle tag CSS: 122 kBInline CSS: 1.7 kB
West Bromwich AlbionExternal CSS: 401.94 kBStyle tag CSS: 12.24 kBInline CSS: 1.97 kB
West Ham United FCExternal CSS: 675.78 kBStyle tag CSS: 26.71 kBInline CSS: 3.15 kB
Wolverhampton Wanderers FCExternal CSS: 211.72 kBStyle tag CSS: 12.41 kBInline CSS: 4.3 kB
Premier League siteExternal CSS: 2.59 MBStyle tag CSS: 63.9 kBInline CSS: 587 B
    This graph is interactive. You could tap or hover over bars to see extra information.

    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.

    Site UI framework
    Leeds United Bootstrap
    West Bromwich Albion ZURB Foundation
    West Ham United FC Bootstrap

    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 Count
    Largest number of External CSS West Ham United FC 28
    Site with no External CSS Burnley FC 0
    Average size of External CSS - 4
    Largest Style tag CSS Sheffield United FC 100
    Smallest Style tag CSS Newcastle United 1
    Average size of Style tag CSS - 19
    Largest Inline CSS Aston Villa FC 62
    Smallest Inline CSS Leicester City 2
    Average size of Inline CSS - 23

    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.

    CSS count
    Site Count
    Arsenal External CSS: 5 Arsenal Style tag CSS: 1 Arsenal Inline CSS: 12
    Aston Villa FC External CSS: 11 Aston Villa FC Style tag CSS: 97 Aston Villa FC Inline CSS: 62
    Brighton & Hove Albion External CSS: 1 Brighton & Hove Albion Style tag CSS: 5 Brighton & Hove Albion Inline CSS: 8
    Burnley FC : 0 Burnley FC Style tag CSS: 7 Burnley FC Inline CSS: 18
    Chelsea FC External CSS: 1 Chelsea FC Style tag CSS: 36 Chelsea FC Inline CSS: 24
    Crystal Palace FC External CSS: 6 Crystal Palace FC Style tag CSS: 3 Crystal Palace FC Inline CSS: 32
    Everton FC External CSS: 1 Everton FC Style tag CSS: 1 Everton FC Inline CSS: 2
    Fulham FC External CSS: 2 Fulham FC Style tag CSS: 65 Fulham FC Inline CSS: 53
    Leicester City External CSS: 2 Leicester City Style tag CSS: 2 Leicester City Inline CSS: 2
    Leeds United External CSS: 5 Leeds United Style tag CSS: 8 Leeds United Inline CSS: 22
    Liverpool FC External CSS: 12 Liverpool FC Style tag CSS: 11 Liverpool FC Inline CSS: 35
    Manchester City FC External CSS: 2 Manchester City FC Style tag CSS: 10 Manchester City FC Inline CSS: 7
    Manchester United FC External CSS: 1 Manchester United FC Style tag CSS: 6 Manchester United FC Inline CSS: 30
    Newcastle United External CSS: 1 Newcastle United Style tag CSS: 1 Newcastle United Inline CSS: 8
    Sheffield United FC External CSS: 6 Sheffield United FC Style tag CSS: 100 Sheffield United FC Inline CSS: 51
    Southampton FC External CSS: 4 Southampton FC Style tag CSS: 10 Southampton FC Inline CSS: 27
    Tottenham Hotspurs External CSS: 1 Tottenham Hotspurs Style tag CSS: 10 Tottenham Hotspurs Inline CSS: 17
    West Bromwich Albion External CSS: 4 West Bromwich Albion Style tag CSS: 6 West Bromwich Albion Inline CSS: 21
    West Ham United FC External CSS: 28 West Ham United FC Style tag CSS: 10 West Ham United FC Inline CSS: 32
    Wolverhampton Wanderers FC External CSS: 2 Wolverhampton Wanderers FC Style tag CSS: 6 Wolverhampton Wanderers FC Inline CSS: 28
    Premier League site External CSS: 7 Premier League site Style tag CSS: 4 Premier League site Inline CSS: 10
    • External CSS
    • Style tag CSS
    • Inline CSS
    This graph is interactive. You could tap or hover over bars to see extra information.

    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:

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

    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

    Related resources

    Complete Report

    CountSize Gzip
    Arsenal
    External CSS5262.37 kB 37.8 kB
    Style tag CSS1100.26 kB 14.91 kB
    Inline CSS121.26 kB 1.35 kB
    Aston Villa FC
    External CSS11328.23 kB 60.61 kB
    Style tag CSS97279.81 kB 63.11 kB
    Inline CSS627.29 kB 7.57 kB
    Brighton & Hove Albion
    External CSS1346.63 kB 48.11 kB
    Style tag CSS516.99 kB 4.03 kB
    Inline CSS8754 B 799 B
    Burnley FC
    Style tag CSS748.1 kB 11.35 kB
    Inline CSS181.44 kB 1.63 kB
    Chelsea FC
    External CSS143 B 52 B
    Style tag CSS36936.26 kB 108.32 kB
    Inline CSS243.42 kB 3.19 kB
    Crystal Palace FC
    External CSS61.06 MB 139.6 kB
    Style tag CSS396.74 kB 14.2 kB
    Inline CSS322.68 kB 2.94 kB
    Everton FC
    External CSS1391.12 kB 57.18 kB
    Style tag CSS146 B 59 B
    Inline CSS299 B 139 B
    Fulham FC
    External CSS257.18 kB 26.16 kB
    Style tag CSS65278.71 kB 54.47 kB
    Inline CSS536.88 kB 7.06 kB
    Leicester City
    External CSS2563.51 kB 78.08 kB
    Style tag CSS2248 B 177 B
    Inline CSS2157 B 163 B
    Leeds United
    External CSS5408.57 kB 56.75 kB
    Style tag CSS836.61 kB 8.11 kB
    Inline CSS222.24 kB 2.4 kB
    Liverpool FC
    External CSS121.37 MB 187.65 kB
    Style tag CSS1187.9 kB 18.79 kB
    Inline CSS353.61 kB 3.51 kB
    Manchester City FC
    External CSS2566.04 kB 72.46 kB
    Style tag CSS1026.43 kB 6.99 kB
    Inline CSS7497 B 605 B
    Manchester United FC
    External CSS11.54 MB 137.57 kB
    Style tag CSS675.09 kB 18.01 kB
    Inline CSS302.65 kB 2.92 kB
    Newcastle United
    External CSS1467.14 kB 54.63 kB
    Style tag CSS1413 B 206 B
    Inline CSS8394 B 546 B
    Sheffield United FC
    External CSS680.41 kB 28.43 kB
    Style tag CSS100296.66 kB 66.85 kB
    Inline CSS516.65 kB 6.67 kB
    Southampton FC
    External CSS41.62 MB 580.46 kB
    Style tag CSS1025.54 kB 5.87 kB
    Inline CSS272.92 kB 3.04 kB
    Tottenham Hotspurs
    External CSS1314.22 kB 56.33 kB
    Style tag CSS10122 kB 20.13 kB
    Inline CSS171.7 kB 1.83 kB
    West Bromwich Albion
    External CSS4401.94 kB 52.92 kB
    Style tag CSS612.24 kB 7.19 kB
    Inline CSS211.97 kB 2.02 kB
    West Ham United FC
    External CSS28675.78 kB 104.32 kB
    Style tag CSS1026.71 kB 7.04 kB
    Inline CSS323.15 kB 3.5 kB
    Wolverhampton Wanderers FC
    External CSS2211.72 kB 35.14 kB
    Style tag CSS612.41 kB 7.36 kB
    Inline CSS284.3 kB 4.22 kB
    Premier League site
    External CSS72.59 MB 413.04 kB
    Style tag CSS463.9 kB 13.74 kB
    Inline CSS10587 B 776 B

    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.

    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