Replace loading.gif with text (maybe with css animation)

[captbaritone]

loading.gif is 23.5KB, which is 15% of our total payload. That seems kinda dumb. I think we load quickly enough that we should just have a text loading message.

[PAEz]

I think going with a css option is great, had a look around and saw cool things for 3k and less.
But did you try optimizing that gif? I got it down to 6.85k...
https://www.dropbox.com/sh/6hkfqdl8rcsghfg/AAAqgZNR2U-G-sFWBXtUwhNYa?dl=0
...in that folder is also two optimized versions of the default skin (didnt get around to testing them). The one with .png in its name has had all the files converted to png and then renamed to .bmp, winamp couldnt load it, but for this it saves another 10k something.
In windows I use FileOptimizer to do all the optimizing....
http://nikkhokkho.sourceforge.net/static.php?page=FileOptimizer
...its for windows but in the screenshots its got it running under wine.
I really like this app, knows lots of formats and its goal is to be lossless which is what I wanted.

[captbaritone]

The loading png had two problems. One was that it was stupidly huge (my bad!), the second was that the project loads too fast to use an external resource effectively. On my home internet (which is probably faster than some), the site loads in ~.8 seconds and images in the css file are not being requested until about a third of the way through that. Even if the loading.gif loads instantly (which it didn't when it was huge) that leaves ~500ms for the animation to actually play. For me, even the static text is essentially invisible.

I suppose the loading animation would probably be for people who's internet is much slower, but if a ~178KB site loads so slowly for you that you need an animated gif to amuse you, even a ~7KB loading gif might feel heavy. Disagree?

As for the optimized skin, you've made me realize I'm making a non-optimal technical choice for emotional reasons... but I don't think I'll change 😄

Part of what makes this project feel so cool to me is being able to say (and know) that "we use the original Winamp skin assets". I know that's not 100% true. We tweaked that one file with the strange encoding issue, and the original skin files are not actually distributed in a zip file.

Still, when I look at the app, my brain says "I'm looking at same bits I looked at as a kid". Obviously they would render exactly the same from .png files and the output would be identical, but for some emotional reason, I have to object.

All this talk of premature optimization (which I know is a sin, but I secretly love) made me realize that we could also save a bunch of space by removing the skin asset files we are not yet using. Even with the original bmp files, a quick test shows we could bring the file size down to 45KB.

But again, for illogical, emotional reasons, that doesn't feel right to me.

Hmmmmmmmmmmm.

[PAEz]

Doing things for emotional reasons is something Im all for. :)
But Id be a little less emotional on the initial skin, just for loading reasons.....but I get what your saying and stick with it for sure if it makes you smile.

Ive only recently got off dialup (im sooooo poor) and a 25k file, bad, an 8k file, meh, -3k css (less with gzip stuff), good.
I know people like to separate and all, but Id put that css loader in the html after what you just wrote, as soon as the html is ready its spinning. That was a good read by the way, made me think more about how the page is loaded. And dont forget winamp is loved the world over (its still used alot in odd countries) and some of them have crap net or are poor.
And yes a spinning thing on dialup helps.....whats that rule, 3 seconds or something. Make sOmEtHiNg happen ever 3 seconds at least or theyll leave. The spinning thing occupies the mind, its a subconscious thing.

By the way that 89.1k zip file is your zip file with the skinningsomething.txt file taken out and optimized. The optimizer can turn the normal zip from 100,127 bytes to 92,117 and 91,282 if you take out that skinning.txt file...every byte counts.

And I love premature optimizing, it gives me something to do when Im not up for coding.

[captbaritone]

Here are the things that I think would make a big(er) difference in page load time:

1. Find out how to get the skin file to start downloading before the javascript call is made. (I think this would cut load time in half)
2. Find out how to get Grunt to inline the minified css and Javascript. That will keep development sane, while giving a better page load as it would be one less set of http request handshakes we would have to wait for.
3. Find out how to get grunt to base64 encode the cursor images (and maybe a loading.gif)

Developer tools (like FireBug) are great at visualizing this information in a way that help you see where time is being spent:

[PAEz]

1
Offline cache is the only thing I can think of to start the download of the skin or a separate js at the beginning of the html maybe.
A css spinner is smaller and would be great in the html and the js if its after the main bits of the body so the spinner shows while its loading.
2
I inserted stuff where I wanted with grunt using a homemade script (its around here somewhere) and it was simple enough, just replace {{tag}} style stuff. But it was a while ago and Im having to relearn it again...which Im doing soon as well as browserify and a couple of other things to do those tag readers.
3
I still think a css spinner is better/smaller and base64 encoding makes things bigger by about a 3rd, so Id check that.

Ive got to use those tools more ;)

[PAEz]

Actually I just checked what the last thing I did in grunt was jonschlinkert/sublime-monokai-extended#35 and I ended up using handlebars to insert stuff...hehe, my memory really is shocking! :)

[Akamaozu]

To comment on loading and internet speeds:

I currently live in a third world country where most people access the internet via mobile devices. To assume your loading speed is a good benchmark might be folly, because there's an entire world of people who don't experience the internet as fast as you do.

[captbaritone]

@Akamaozu Thanks for adding that perspective.

Regarding the loading animation, it feels odd to help people with a slow connection by making the total download size larger. Maybe we could add a simple css animation to the "Loading..." text to give the impression that progress is being made.

I think it's worth considering that there are actually three problems here:

1. How much data are we downloading in total?
2. Are there other delays in fetching the data? (Waiting for multiple http requests to happen in serial)
3. How are we treating the perception of loading speed? Are we giving good feedback that progress is being made?

@Akamaozu Which of these do you think is most important for people in your area?

[captbaritone]

Also worth noting: The notoriously minimal Google home page is ~350KB, and we are offering a much more elaborate app in half that size.

Edit: Err.. I'm not claiming winamp2-js is more elaborate than the Google search engine. LOL.