Theoretical css grouping on site web

From Ultracopier wiki
Jump to: navigation, search

Introduction

In case of grouping all css mentionned into the page. Then case if grouped css change with page template.

Algorithm

Case of grouped item:

Number of page with different template * Grouped css size / compression of grouped css size

Case of single items:

Global css size / compression of single css size + Number of page with different template * Specific css size / compression of single css size

Pratical

I use prestashop as base of reflexion:

  • I use Number of page with different template = 4, home page, categorie page, product page, payment page (more in lot of case)
  • Global css: 50KB
  • Specific css: 10KB
  • Grouped css size = 50KB + 10 KB = 60KB
  • Compression of grouped css size: 5
  • Compression of single css size: 4 (less possibility of grouping data)

Case of grouped item:

4 * 60KB / 5 = 48KB

Case of single items:

50KB / 4 + 4 * 10KB / 4 = 12.5 + 10 = 22.5KB

If you see only page by page your vision is wrong. The size will apreat better (but you site have not one page, your visitor visit your site, then it's wrong to do that's!):

Case of grouped item:

1 * 60KB / 5 = 12KB

Case of single items:

50 / 4 + 1 * 10 / 4 = 12.5 + 2.5 = 15KB

Conclusion

Without grouping the item, it's more than 2x of size that's you win. For just 4 page visited, and just few same item size load on all page. On real site, have lot of template, lot of same css and js on all the page (50KB of css, 150Ko of js for prestashop)

It's interesting when few different page (<3) and few same code loaded on all the page (global code = 1/4 of total code). But into all other case, grouping should be disabled.


You need size load on general navigation, not by page.