css minification

[Sebastiaan Koppe via Digitalmars-d]

On Friday, 16 January 2015 at 17:40:40 UTC, Andrei Alexandrescu 
wrote:
> I just added 
> https://github.com/D-Programming-Language/dlang.org/pull/770, 
> which generates minified css files. This is because in the near 
> future css files will become heftier (more documentation 
> comments, more detailed styles etc).
>
> The disadvantage is that now one needs to be online to generate 
> documentation. Thoughts?
>
>
> Andrei

I have taken a look at http://dlang.org and assessed some of the 
improvements to be made. I will probably step on someones toes, 
sorry, but that is just because I have big feet.

A lot of people have already said this, but minification is the 
last thing on the list.

My browser needs to parse 299kb to display the page. Javascript 
alone takes up 210kb of that. 131kb of that is uncompressed. 33kb 
is jQuery and 33kb is widget.js.

That widget.js thing is probably because of the twitter stream on 
the right. A seasoned JS programmer can rewrite that stuff in 
about 6kb, if not less.

jQuery is the enabler of all bad habits; best to remove it 
quickly, if only because of principles. If you really got 
addicted to that horse*@&#, try zepto.

But codemirror-compressed.js and run.js are by far the worst 
contenders and should be addressed as first. You can bring down 
loading times to half (yes, you read that correctly, you can cut 
150kb). Besides, do you really need 100+kb of codemirror JS? What 
is it even doing? Even if you really need it, why not compress 
the thing? It takes around 4 lines in apache conf to accomplish 
this. Give me SSH access and I'll do it in under 2 min.

Caching is the next trick in the list. Remember that ISP's, 
proxy, etc. may also cache your files, not just browsers.

These are the files that are referenced by http://dlang.org and 
are not using caching (nor compression!):
dlang.org/
codemirror.css
style.css
print.css
codemirror-compressed.js
run-main-website.js
run.js
search-left.gif
search-button.gif
dlogo.png
gradient-red.jpg
search-bg.gif

Next point on the list is bundling resources. The browser can 
only load some much stuff async. If you have too much, part of 
those resource are going to be blocked. Which basically means you 
have another round-trip + data that you have to wait for.

While there are some other optimizations to be made - like 
putting that twitter stream js at the bottom of the page - the 
point is this: If I wanted to optimize this website, minifying 
style.css would be the last thing on my list.

Besides, minimizing CSS is tantamount to removing comments and 
whitespace. Like Adam Ruppe said, a regex program in D can 
accomplish that; no need to use a online service. It probably 
takes you more time to integrate the online service than to write 
the D program including the regex.

At the end of the day, watching `mb-downloaded per resource per 
total` tells you nothing. What only matter is the time it takes 
for users to enter `http://dlang.org` in the browser, up until 
the time they get to see something they can click on.

Being among this group of knowledgeable programmers it amazes me 
this site is still pre 2000. I for one, am required to use Lynx 
just because my eyes can't stand the design.

OT:

And lets be honest here, why the hell do we even use apache+php 
and not D+vibe.d? I just rewrote my companies corporate website 
in under 4 hours. Granted, it is a simple one. But this community 
should be able to rewrite this site in D in under a week, right?