For the Almay/Facebook project I recently worked on, I had to create a Facebook app under their new set of rules, which was interesting.
This is an easier web development process and all the page content displays fine. But I’m in a headspace of creating page code that’s as optimized and as fast-loading as I can get it….my current “thinking mobile” process. That being said, there are two things about the Facebook app setup which, I think, could be made better from a page optimization standpoint.
1. CSS Expressions
background-color: expression( (new Date()).getHours()%2 ? “#B8D4FF” : “#F08A00″ );
Basically, this code updates the background color ever hour; however, it runs much more frequently then that. Simple things like scrolling and mouse movements can fire this code off, which slows down the page overall.
This sucks, but no where NEAR as bad as…
2. Render Tree Reflows
According to Safari’s Activity Monitor, the “all.js” dynamically adjusts lots of DOM properties when scrolling the page. One simple scroll changed the following DOM properties on the fly:
Changing properties like this triggers a render tree reflow, the recalculation of a web page’s layout and geometry. All of this takes time and browser resources, meaning all of this slows down a page…no good.
Paul Irish discusses this in his most-recent how-to video, “HTML5, CSS3, and DOM Performance” that’s listed below. He alludes to Stoyan Stefanov’s brilliant reflow/relayout article, which is the end-all-be-all discussion on the subject.
So Facebook apps are now easier to create but, I feel, still need improvement in terms of page optimization. Feel free to comment and agree or disagree.