Hi there, Yahoo and Google go to some effort to get frontend-performance in our heads. If you did not read about it before, here are some links to start: - a nice summary-presentation about what one can do http://www.slideshare.net/stoyan/high-performance-web-pages-20-new-best-practices - a collection of numbers on how big an impact performance has http://radar.oreilly.com/2009/06/bing-and-google-agree-slow-pag.html - google starts using performance as a ranking criteria (does so already for adwords) and shows performance in webmastertools http://googlewebmastercentral.blogspot.com/2009/12/how-fast-is-your-site.html
Form my point of view, HAML and SASS are a great place to optimise the frontend-performance for our rails-apps. Here are some ideas how to make haml/sass performance-aware and a great frontend-performance-booster: Minify CSS, Minify JavaScript, Minify HTML -> Improve HAML and SASS http://code.google.com/intl/de-DE/speed/page-speed/docs/payload.html#MinifyCSS http://code.google.com/intl/de-DE/speed/page-speed/docs/payload.html#MinifyJS http://code.google.com/intl/de-DE/speed/page-speed/docs/payload.html#MinifyHTML http://developer.yahoo.com/performance/rules.html#minify HAML and SASS already interpret all our code. So I dont see any reason why it should not minify it on the go. This will make a huge performance-boost for JS and CSS and probably HTML as well. The JS-Minification should also apply to inline-JS. Google gives some advice on which minification-librarys to use. Combine external CSS -> Improve SASS -> Give Recommendation/Warnings http://code.google.com/intl/de-DE/speed/page-speed/docs/rtt.html#CombineExternalCSS Rails ans SASS already do a good job to combine CSS in production. But there is one issue left: I use external CSS-files (like base- templates) that I include in my main-sass-file. Those are included as @import in the css-file instead of merged in the file itself. That's a problem from a performance point of view. @import file.css should be treated the same as @import file.sass in my opinion. Or at least there should be an option for that and a performance-warning in development- mode. Where to put you JS -> Give Recommendation/Warnings http://developer.yahoo.com/performance/rules.html#css_top http://developer.yahoo.com/performance/rules.html#js_bottom http://code.google.com/intl/de-DE/speed/page-speed/docs/rtt.html#CombineExternalJS There are some recommendation about where to put your JS-Files (footer or header in a specific order to maxifiy parallel downloads). HAML knows where we include our files so HAML could give us performance- recommendations in development mode about that… Avoid CSS expressions -> Give Recommendation/Warnings http://code.google.com/intl/de-DE/speed/page-speed/docs/rendering.html#AvoidCSSExpressions http://developer.yahoo.com/performance/rules.html#css_expressions http://developer.yahoo.com/performance/rules.html#no_filters SASS could write performance-tips in development mode in our log-files to make us aware that there are possible slow expressions in our code. Use efficient CSS selectors -> Give Recommendation/Warnings http://code.google.com/intl/de-DE/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectors This is similar to the css-expression-idea above but more important. Apparently browsers get slowed down by some expressions. Since SASS knows those it would be great to get a warning in development mode about those… Remove Duplicate Scripts -> Give Recommendation/Warnings http://developer.yahoo.com/performance/rules.html#js_dupes This is also similar to the idea above. Since SASS knows our css of all our sass-files, it would be great to get a warning whenever it notices the same css-definition in more than one class. The same goes for JS. Remove unused CSS -> Give Recommendation/Warnings http://code.google.com/intl/de-DE/speed/page-speed/docs/payload.html#RemoveUnusedCSS Since HAML knows our code and SASS our selectors it should be possible to analyse our HAML and give developers a list of unused SASS that can be removed from the files. Those recommendation will be much better than those that google page-speed can give. Those are some ideas based on the yahoo- and google-performance- guidelines. >From this list the first "Minify CSS, Minify JavaScript, Minify HTML" certainly will have the most impact and be the most helpful. What do you thinks? Regards Tobias -- You received this message because you are subscribed to the Google Groups "Haml" group. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/haml?hl=en.
