Here at Pedago, we take a hard look at the performance of our applications so that our users don’t have to experience any troublesome hiccups (or “jank”) that might otherwise sour a sweet learning experience.

While “performance” can cover a wide array of metrics, we tend to be extremely critical of browser overhead (script execution, rendering layout, and painting). While others have covered optimization of these metrics in great detail, we came across an unlikely jank-vector that we thought was worth mentioning.

When analyzing CSS performance in relation to browser lifecycle, there are a few notorious styles (eg: border-radius, box-shadow, transform, backface-visibility, etc) that tend to slow down frame rate. Some of these are obvious as they dramatically influence the rendering process or add additional calculations for stylistic ooomph. One might be extremely likely to overlook the rather mundane text-transform while focusing on that list, though.

We had several elements each containing a finite number of additional elements that all were performing CSS-dictated uppercasing on their text content. Now, this might not be a significantly intensive operation in itself, but combined with some excessively spastic scrolling, it degraded the user experience somewhat significantly. After we updated the content to be rendered in uppercase without the need for CSS text transformation, the improvement was obvious.

Here’s how things looked on a common mobile platform, prior to the change (FPS is the key metric, with 60FPS as an ideal target):

with CSS text transform

As you can see, we were barely hitting the 30FPS threshold and often even missing that window. Here’s what we observed after we removed the relevant text-transform styles:

no CSS text transform

As you can see, we’re now closer to consistently hitting that golden 60FPS benchmark! Granted, we were probably abusing a CSS style that was intended for narrower application, and the DOM of this particular page meant that there were a lot of them, so your mileage may certainly vary. However, this might help serve others in the war against jank!


Leave a Reply

Related Posts

Careers

Three Strategies for Interviewing Candidates – Startup Recruiting Guide

Recruiting new employees is one of the most pivotal moments in an early startup’s lifecycle. Time and resources are scarce, so finding qualified candidates quickly becomes a top priority. For any startup leader, it’s necessary Read more…

Careers

Guide to Setting Up Recruiting at a Startup by Smartly Talent

It’s difficult for early stage startups to find talent when they need it. In fact, startups are often hiring for a role a month after they needed the person for the role. The last thing Read more…

Careers

Smartly Tips to Reduce Bias During the Hiring Process

Harvard Business Review cites that “fair hiring methods increase the level of productivity and innovation at your organization, and can even improve employee retention rates.” At Smartly, we believe that all candidates deserve a fair Read more…