css minification

[Andrei Alexandrescu via Digitalmars-d]

On 1/17/15 10:01 AM, Sebastiaan Koppe wrote:
> 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.

Fantastic.

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

Measurements contradict that. Anyhow my point was one line of code 
reduces all site traffic by 5% - they call that a good day.

> 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.

Great. You forgot to link to your pull request :o).

> 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.

I'm not an expert or an ideologist in the area. It was added by others 
who obviously have a different opinion from yours.

> 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.

I'm working with our webmaster to create accounts for a few folks. For 
now you may want to send me what needs to be done and I'll take it with 
him. N.B. I vaguely recall I've tried that once but it was not possible 
for obscure reasons.

> 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

Where should these be cached? I don't understand.

> 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.

Yah, we do a bunch of that stuff on facebook.com. It's significant work. 
Wanna have at it?

> 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.

Yah, the problem is everything on your list is hypothetical and not 
done, whereas css minimization is actual and done. Big difference. Very 
big difference.

> 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.

Then do it.

> 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.

Agreed.

> 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.

Then improve it.

> 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?

I wish.


Andrei