On CSS sizes and performance budget

Authors: Ivan Smokrović, Silvestar Bistrović
Date: 2021-03-14

Comparison

In our first report, we looked at CSS file size and file count in Premier League sites. We felt we couldn’t get all the answers by analyzing just one league, so we decided to create a report of another one—this time, we choose Bundesliga.

The results were not surprising. Both leagues have about the same amount of CSS code – an excessive amount.

Performance Budget

To see what an excessive amount of CSS code means for the end-user, let’s make a Bundesliga performance budget test. Performance budget usually includes HTML, JS, Images, Video, and Fonts, but since this site is dedicated to CSS, we will focus on CSS alone.

Here's how web.dev defines the performance budget:

A performance budget is a set of limits imposed on metrics that affect site performance. This could be the total size of a page, the time it takes to load on a mobile network, or even the number of HTTP requests that are sent. Defining a budget helps get the web performance conversation started. It serves as a point of reference for making decisions about design, technology, and adding features.

Since we already analyzed the total CSS size and the number of CSS files, let's see how much time it usually takes to load the CSS code. We are going to use the average amount of external CSS code in Bundesliga sites, ~639KB, with a Performance budget app to determine how much time it takes to load this amount of CSS data. The results are shown in the following table.

Connection Type Time (secs)
FIOS (20Mbps) 0.26 secs
Cable (5Mbps) 1.02 secs
Mobile 3G - Fast (1.6 Mbps) 3.19 secs
DSL (1.5Mbps) 3.41 secs
Mobile 3G - Slow (780 Kbps) 6.66 secs
Mobile Edge (240 Kbps) 21.30 secs
Mobile 2G - Fast (150 Kbps) 34.08 secs
56K Dial-Up (49Kbps) 91.29 secs
Mobile 2G - Slow (35 Kbps) 146.06 secs

According to studies from Google, 3-5 seconds is the critical period when bounce rate starts to increase drastically, and that is for the whole page with all assets.

If we look at these results, we could see that it takes more than 6 seconds on slow 3G to load the average external CSS code in Bundesliga sites. Even DSL and fast 3G connections would take 3 seconds to load the CSS.

If we take into account the compressed size of the external CSS size, ~103KB, we get the following results:

Connection Type Time (secs)
FIOS (20Mbps) 0.04 secs
Cable (5Mbps) 0.16 secs
Mobile 3G - Fast (1.6 Mbps) 0.52 secs
DSL (1.5Mbps) 0.55 secs
Mobile 3G - Slow (780 Kbps) 1.07 secs
Mobile Edge (240 Kbps) 3.43 secs
Mobile 2G - Fast (150 Kbps) 5.49 secs
56K Dial-Up (49Kbps) 14.71 secs
Mobile 2G - Slow (35 Kbps) 23.54 secs

Everything below slow 3G takes more than 3 seconds. Backlinko's analysis shows that not all compression is good, and it may not achieve optimal and desired results. Although that analysis is out of the scope of this article, it is worth noting that “pages that compress 60%-80% of their files perform the worst”.

Making users wait because of CSS shouldn't be an option. Users leave sites for various reasons. The number one reason is slow loading. To limit the size of your CSS code, you could set the performance budget for your project. It could help developers write less CSS code that is reusable and maintainable.

The performance budget configuration is out of scope for this article, but you could learn more at the following links:

Data Usage and Cost

We thought it would be interesting to use the collected data to discover how much the CSS code would cost in various countries.

For reference, we are going to use data from Cable.co.uk site.

Let’s focus on distinct regions of the world. Northern America has the most expensive data plans, with almost $15 per GB. Oceania, the Caribbean, Sub-Sarahan Africa, and South America follow with more than $5 per GB. Northern Africa, CIS (former USSR), and Asia (ex. near east) are the cheapest regions.

Now let’s assume that we want to visit every Bundesliga site, including the site of Bundesliga itself. The sum of uncompressed CSS code for these sites is around ~12MB.

For users in Nothern America, that will cost around 15 cents. For users in Nothern Africa, that will cost about 3 cents.

Although these costs seem trivial, let’s use a different context here. 12MB is 1.17% of the 1GB, which means that you users will spend ~1% of their data plans to download CSS alone for these sites. We don’t think that is trivial.

If you are interested in how much a site costs you in some countries, you can check it out at whatdoesmysitecost.com.

The Conclusion

When thinking about kilobytes, it is easy to forget about costs and loading time. But every kilobyte counts. We should aspire to strip every single byte wherever possible. We are enthusiastic about CSS, and we would be happy to see more developers take more care about CSS code itself.

#RespectCSS

About the Authors

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.

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