search

fossasia / 2010.fossasia.org

FOSSASIA Summit 2010 Event Site http://2010.fossasia.org
1.53k stars 13 forks source link

CSS Files should be minified and optimized #66

Open tradzik opened 9 years ago

samarsault commented 9 years ago

@ty221, it'll make it difficult to read and edit and we should not do that atleast for now

tradzik commented 9 years ago

@samarjeet I made them easliy-readable, they look ok.

Mon Jan 26 2015 at 17:15:18 użytkownik Samarjeet notifications@github.com napisał:

@ty221 https://github.com/ty221, it'll make it difficult to read and we should not do that atleast for now

— Reply to this email directly or view it on GitHub https://github.com/fossasia/fossasia10/issues/66#issuecomment-71486502.

samarsault commented 9 years ago

@ty221, that's not the case, it needs to be indented properly for everyone to read and understand the code. You should revert the commit

samarsault commented 9 years ago

Also, try not to push directly and use pull requests. Also, wait for a mentor's clearance

namangoel1 commented 9 years ago

@ty221 Yeah... This sort of stuff is best left to a preprocessor. Saving a few bytes does not matter when humans can't read the file. I suggest you rollback.

tradzik commented 9 years ago

@samarjeet27 @namangoel1 Ok, I agree with you, however you should agree, that optimizing CSS is really important in fixing page speed (I cleaned 1100 lines...). Page speed is really important for SEO and user feelings. This is one of Google PageRank requirement. Do you have any idea how to implement that, to auto optimize CSS during jekyll build? Any rake script or something in Gemfile?

I will reopen this issue report, let us wait for mentor opinion. Currently not rollbacking my edit, because code is still user-readable and mentor could have other opinion.

namangoel1 commented 9 years ago

@ty221 Trust me when I say this, minifying CSS in this way will have very little impact on pagespeed. It will not matter at all, you will save less than a millisecond. The CSS file is already small and removing some bytes will not help. google.com itself doesn't get a perfect score. If you're chasing numbers by sacrificing programmer experience, it is a poor idea.

I believe that this sort of CSS is not readable at all. Since you have a vastly different opinion here, I'll present some factual points why this is not a good idea.

  1. This makes diffs hard to examine. A change in a property makes the whole line different.
  2. It exceeds the line length. Code will wrap depending on the style and the monitor window. I usually have my code editor on half the width of my 1080px wide screen, so I'm sure some lines will wrap. Wrapped lines are ugly to edit.
  3. You have removed comments which are essential for understand. Inline comments to describe a specific property will also not work since it will interrupt code.

Using SCSS is a solution, jekyll compiles it natively.

tradzik commented 9 years ago

@namangoel1 Ok, I agree let us rollback my commit. However I removed many kilobytes from files, it has impact on slower internet connections. We should implement SCSS/SASS as fast as possible.

tradzik commented 9 years ago

@samarjeet27 @namangoel1 Commit removed

namangoel1 commented 9 years ago

@ty221 I've got what you might say a slower connection. I load 100kb/s. I am looking at main.css, you removed 3kb from the file (14.605 kb -> 11.373 kb). 3kb will take me 0.03s to load on my connection, will not make the slightest difference.

tradzik commented 9 years ago

@namangoel1 My internet connection is 8 kbit/s on mobile, then my change optimizes this speed about 0.5 sec. This isn't small amount of time. Please count also for other files I improved.

Optimization is good thing. We should take care about it. I don't think my solution was the best. However, we should make something there

namangoel1 commented 9 years ago

@ty221 Compared to the vast changes that can be made, this indeed is a small amount of time. Optimization is a good thing, but premature optimization is not.

tradzik commented 9 years ago

@namangoel1 Me optimization was done with quite professional tool - YUI Compressor. I think it is used by some people.... Surely we can make bigger changes, use SASS, etc. However my edits have been made to satisfy Google.

namangoel1 commented 9 years ago

@ty221 Tool choice to compress CSS rarely matters... What I'm saying is that your optimization was very premature. You could've merged stylesheets into one, removed inline JS and CSS from the site, etc. These would've had more impact.

You don't need to satisfy a tool or rush for numbers.

tradzik commented 9 years ago

@namangoel1 That what I'm saying, is that was BASIC optimization to kick-start. It wasn't perfect, it could be improved in many ways and I agree with you, there many things could be changed... However I gave good base to work-on. Please help in finishing this issue.

We need to take care of Google Diagnostic Tools unless we don't want to be bad positioned...

namangoel1 commented 9 years ago

@ty221 What do you mean by bad positioned? Do you have an official source that says Google Diagnostic Tools is essential for a 'position'?

tradzik commented 9 years ago

@namangoel1 Google tells, user comfort while using website is very important for position and PageRank. We couldn't be sure of anything, because this algorithm is secret. Practise tells, faster and more user-friendly websites are higher in results.

namangoel1 commented 9 years ago

@ty221 Fair enough. Did you see how much the score changed after your optimizations?

tradzik commented 9 years ago

It has increased by 6 "points" in scale 1-100. However it is still very low. https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Ffossasia.github.io%2Ffossasia10

namangoel1 commented 9 years ago

@ty221 Let's work on the 'Should Fix:' first? We can't change the browser caching, that is controlled by GH. "Eliminate render-blocking JavaScript and CSS in above-the-fold content" should be something that is focused on. This is easy to do and can be done very quickly. Next will be lossless compression, which again is easy. Tymon what do you think of using gulp or a similar tool to automatically losslessly compress images?

tradzik commented 9 years ago

@namangoel1 I agree, let us start working on that. I like idea to use gulp, because it isn't comfortable to run optipng each time photo has been uploaded/changed. I can implement that.

As you told "Eliminate render-blocking JavaScript and CSS in above-the-fold content" is quite easy to fix, let us improve that. Can you try to make these changes?

I hope our cooperation can improve fossasia's websites :D

namangoel1 commented 9 years ago

@ty221 Sounds good, let's use gulp to handle that.

Sure, I'll get to this in the coming week. Unfortunately I've got a few exams so I am unable to dedicate much time :(

tradzik commented 9 years ago

@namangoel1 Ok, there should be any problem. We all have real-life, school, etc. We work there as the additional task.

I will implement gulp, you'll work on blocking elements. Let us improve that website :D

mariobehling commented 9 years ago

Hi guys, it is awesome how you get into details with CSS. It looks like you figured out a way to proceed together. Well-done!

tradzik commented 9 years ago

@namangoel1 Implemented Gulp with auto-image optimization: https://github.com/fossasia/fossasia10/commit/51051debca6410865b850c8c26b68e2b88a23d2f