Site with the largest External CSS size | Premier League site | 2.47 MB |
Sites with no External CSS | Burnley FC | |
Average size of External CSS site | | 616.28 KB |
Site with the largest Style tag CSS size | Chelsea FC | 914.32 KB |
Site with the smallest Style tag CSS | Everton FC | 46 B |
Average size of Style tag CSS site | | 118.26 KB |
Site with the largest Inline CSS size | Aston Villa FC | 7.11 KB |
Site with the smallest Inline CSS | Everton FC | 99 B |
Average size of Inline CSS site | | 2.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 metrics by clicking on a label below the 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.
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.