TehNrd

To be honest I sort of feel bad about writing this post. I have already reviewed, ranted about, and tweaked the new salesforce.com UI, but here comes my third consecutive post related to this. I promise my next post will be about something super cool and radtaculous you can do with salesforce!

We hoped to enable the new UI in the next few weeks and like any good admin or developer I checked all of our custom Visualforce pages to make sure everything still looked and worked correctly. Everything started out so smooth. Everything was looking good. My basic, and for the most part, static Visualforce pages seem to work fine.

I then started to test what is most likely the coolest and perhaps most “complicated” Visualforce page I have ever created. It is a drag and drop pricing and configuration tool that uses jQueryUI for all sorts of magic (If Apple can use the word magical to describe a giant iPhones so can I). As I began to drag elements around the page something just didn’t feel right. The UI felt slow and clunky. What the crazy, I swear this app was smooth like butter with the old UI. I switched back to the old UI and sure enough performance was great. With the new UI CPU usage was three times higher when performing drag and drop operations! At first I thought there was some new JavaScript related to the new UI that was severely slowing down my custom JavaScript. This didn’t make a lot of sense in my head but this related issue sent my brain down that path, New UI + many items in a dataTable = horrible highlighting performance .

At this point I posted to the force.com developer boards which are usually monitored by the people that really understand how salesforce works such as the salesforce.com developers and product management. You can see that post here: Major javascript performance issues with the new UI. Someone named Stephan responded, who I now know is the new PM for Visualforce, said there are some known performance issues with the new salesforce.com UI and these are actually related to CSS and not JavaScript. Interesting, as I had never seen CSS have such a negative impact on JavaScript applications. Now that I had some guidance it was time to go Inspector Gadget on this issue…… DUN DUN DUN DUN DUN DUN DUN DUN DUH DUNNNNNNNNN (Inpector Gadget music…..obviously )

What I did was create a very simple Visualforce page that has drag and drop functionality and then monitored CPU usage with the old and new UI while dragging components around the screen. Yes, this is a ridiculously unscientific method but we are doing things Inspector Gadget style so it will have to work. The first video below shows CPU usage with the old, and then new UI.

OLD UI: http://f5-developer-edition.na4.force.com/sortabletestold
NEW UI: http://tehnrddemos-developer-edition.na7.force.com/sortabletest

With the old UI CPU utilization peaks at 15% but is commonly below 10%. With the new UI it peaks at 42% but is commonly in the mid 30s! There is clearly some CPU performance issues. While visually the pages may perform okay keep in mind this is a very simple example. On more complicated pages there can be a visible and noticeable decline in performance. Going off Stephan comments about this being a CSS issue I created another page with the old and new UI with the showHeader and standardStyleSheets set to false. This ensures no salesforce.com CSS will be included on the page. The video below shows the results of this test.

New Salesforce UI CSS / Javascript Performance No Standard CSS from TehNrd on Vimeo.

OLD UI no css: http://f5-developer-edition.na4.force.com/sortabletestoldnocss
NEW UI no css: http://tehnrddemos-developer-edition.na7.force.com/sortabletestnocss

There is no performance difference between the two pages! This means one thing….

There are serious performance issues with the CSS of the new salesforce.com UI.

So if you have Visualforce pages that use advanced JavaScript to manipulate the DOM, add styles, or provide advanced interactive behavior there is a good chance the new UI will slow down these pages considerably. This doesn’t affect all browsers the same and whether this performance issue slows down your pages enough to be noticed is something you will need to test yourself. In reality I’m guessing this will affect a very small number of people but for those that it does affect, it can be a major problem.

The good news is that salesforce.com is aware of this performance issue and is working on a fix. Some of the issues they may be able to fix with ninja patches but there are also some long term fixes that may take longer. The bad news is this issue will most likely prevent us from updating to the new UI until it is resolved.