TinyMCE increases its render speed by up to 20%

Did you know that the TinyMCE rich text editor loading speed is now faster? 

All web browser applications have different load speeds. And the speed a website takes to load, can make or break its potential to reach customers. Slower loading websites, or even parts of the websites that load slowly, cost your customers time, and try their patience. And an impatient customer is less likely to sing your praises.

When your customers or end users load up TinyMCE to edit some content, it will load noticeably more quickly compared to earlier iterations. This saves your customers time, and helps them get their work done faster. An application that loads faster, without an efficient looping, provides a quicker UI performance. And users do appreciate quicker UI performance. Hubspot has several metrics that indicate the positive and beneficial effects of quick UI performance. Portent found in their user research on loading time that 0 - 4 seconds was ideal for customer conversions.

To make sure TinyMCE delivers the best possible rich text editor service, we’ve been working on adjustments to the TinyMCE rich text editor such that it now loads 20% faster.

Here’s how we did it.

Render speed and load speed – there’s a difference

Load time is the number of seconds that pass between you clicking on a website URL, and the images, text, and other digital components moving through to your local browser.

Render time is similar, but it has a different measurement point than a visual cue. The render speed represents the time it takes for any interactive element to become usable. For a rich text editor, the render speed is paramount.

There is a third factor as well, not related to time, but that affects it. Initialization (init) assigns values to objects. All programming languages do it, and it’s either done when applications are compiled (translated into code computers understand, like zeroes and ones) or at run time (when an application is working such that a person can start doing something with it).

Initialization time varies depending on the size of the web application, the browser viewing the application, and the physical computer hardware. Results may vary. However, we aim to provide a fast, average load and render speed based on init speed.

We improved our Initialization time by making adjustments to Tiny’s internal checking libraries. These libraries can be found in our GitHub repository: The JavaScript validator Boulder.  

Working on Boulder improved TinyMCE

TinyMCE uses Boulder behind the scenes – it’s a JavaScript validator that's easily human-readable.

It takes a JavaScript object, and validates it to make sure it won’t cause any annoying errors as TinyMCE renders. It then reports back on what it found – for instance, if an object’s type was expected to be a string of characters, but for some reason it was actually a number.

What our developers did was a series of tests, looking closely at each Boulder validation, and the large number of Garbage Collection (GC) sweeps taking place. The key discovery - A lot of ineffective looping and cloning objects far too often. Taking down the number of loops and cloning less objects reduced the processing time and GC workload.

Removing several loops and object creation steps resulted in a speed increase.

“We did some profiling as we knew the UI was a slow part of the TinyMCE init sequence from previous investigations. As part of this, we found a chunk of code that was responsible for doing schema validation and setting defaults that were inefficient due to it's looping and cloning behaviours. We rewrote this logic to cut down on the amount of times we looped over object properties and reduced the objects cloned. This provided the UI performance improvement in TinyMCE 5.9 due to having to do less operations and in preventing the garbage collector from having to run as often.”

- Lee Newson, software developer

The testing conditions were a smaller sample size, but they show an overall improvement:

Testing conditions: Google Chrome, Macbook Pro, 2018

Average results: 411.7ms on the 5-stable channel, and 302.1ms on the 5-dev cloud channel (two cloud channels for TinyMCE). The 5-dev channel represents the newest versions of TinyMCE, which includes the changes and improvements to Boulder’s behavior.

TinyMCE states: a range of menu items 4,000 separate menu items, with the capacity to expand to 10,000 separate menu items installed.

Result: Overall, an average speed increase of up to 20%, or a 100ms init time improvement – comparing the initializer speed from before adding the change, to after adding the change.

How you can participate in improving TinyMCE

How inspired are you feeling right now? If the adjustments and changes have sparked your interest, you can get involved in our GitHub community.

If instead you want to get started using a faster and more effective version of TinyMCE right now, sign up for an API rich text editor key – it’s free, and gives you trial access to our premium plugins for 14 days, and lifetime access to our open source plugins.