Display generated file sizes via gulp when generating?

sage
,
1

How could i add more info to the below when gulp generates files?

I’m trying to get my css files down and as the list folder is deleted each time - its a bit of a pain to compare.

My css file is pretty big and if there’s anyway to calculate the size each sass file adds to the final css it would be amazing. Though just the total would be a great start.

[17:23:29] Finished 'wiredep' after 7.34 ms
[17:23:29] Starting 'styles'...
[17:23:36] Starting 'wiredep'...
[17:23:36] Finished 'wiredep' after 6.02 ms, **NEW:css file = 500k, js = 200k...**
2

Hey @dpc - looks like you might be able to use a package like one of these three to accomplish what you’re looking for:

Not sure if any will show the sizes of each source component or just the total size of each compiled file.

– Matt

1 Like
3

Thanks - tried those but don’t really give me the details i need to see what scss files are adding the most weight to the final file.

I’ve also be trying to create a css file for each scss file as at least then i can see which one is the biggest and will give me some indication.

Is 600kb too big these days? Its quite a big site…

4

If you know there’s dead weight in your CSS (e.g.,if you’re loading large parts of Bootstrap that you’re not using), go ahead and trim that out, but if all of your CSS is being used, I wouldn’t look at 600kb and decide to spend time optimizing, just because that doesn’t give enough information. A better approach would be to look at your final load time from a production build of the site on your actual host, ideally simulating some factors you may know about your audience. If that total size / load time is too slow, then you should start to optimize. Even then, you may find that the size of your CSS isn’t one of the top factors driving the speed of your site.

You also have to consider that the CSS should be gripped by your site when it’s distributed to your visitors, and the size after compression is what’s relevant.

5

Thanks mmirus. Already trimmed bootstrap down a lot.

The css is the biggest file on the site by a factor of 5. Non retina images are around ~120kb. That’s the main reason why I’m targeting it for optimising. I understand it may not be possible or even be much of an issue.

Compression is setup on the server. Is it safe to consider the compressed size the actual file size?

fullsizeoutput_1f54
fullsizeoutput_1f54704×696 76.1 KB

I’ve been playing with gulp-uncss a bit but its quite buggy. The css used on the homepage only comes to 40kb and its the most complicated page. Would love to know where all the bulk is coming from.

D.

6

Yep, in terms of download size for your page, the compressed size is what matters.

Seeing 600kb, my first guess would definitely have been Bootstrap or other third-party libraries being included. My second guess might be heavy use of @extend in your SCSS, which can blow things up under certain circumstances.

Unfortunately, without being able to dig into your theme myself I’m not sure how much more help I can be.

1 Like