Thursday, October 22nd, 2009

CKEditor load time performance

Category: Performance

Frederico Caldeira Knabben of CKEditor fame has replied to some of the comments to the CKEditor 3 article with a post about the load time performance of CKEditor 3.

He starts out by showing the perf that he gets from Poland:

As you can see, the entire sample weight is 105KB, loaded and rendered in only 2.67s. Of course, different countries and connections will give different results, but considering that I’m way far from Chicago those are amazing results.

The key for amazing download performance is not related to the size of the stuff we’re downloading, but instead the number of downloaded files. We kept a strong focus on this fact during the development of CKEditor and, as we can check above, the entire editor is loaded and is ready to use with only 7 files being downloaded. We can even reduce this number, but here we’re talking about the default editor distribution, with no additional performance hacks. That’s really amazing, compared to the 13 files we needed to download for each FCKeditor instance in the page (more details later in the article).

Just to give an example, still using the above Firebug results, note that the 81KB of the ckeditor.js file is loaded in only 1.2s, while the combined 24KB of the other 9 files is loaded in 1.5s.

He later talks about some optimizations:

There are a few optimizations that could be done to reduce the number of files being downloaded by CKEditor:

  • If you need the editor interface to be localized in a single language only, you can set the language configuration option to that language code, and simply copy the contents of the language file (localized in the “lang” folder) at the very end of the ckeditor.js file. This will avoid this file being downloaded.
  • It’s recommendable to set the editor configurations in-page, instead of using the config.js file. Other than making it easier to upgrade the editor, you can even avoid downloading that file, by simply setting customConfig to an empty string (”).
  • Standard configurations can be overridden by simply setting them into the CKEDITOR.config object directly, at the end of the ckeditor.js file, or even in-page, right after loading the editor file.

By doing the above optimizations, the editor download is reduced to only 5 files.

Posted by Dion Almaer at 6:54 am

3.1 rating from 55 votes


Comments feed TrackBack URI

I got closely the same load time on the example page but a quit different size and it does not rely to the page overhead…



Mac OS X 10.5.8
Safari 4

loaded page:

Comment by gabel — October 22, 2009

@gabel – that might be because Safari shows the size of objects after they have been decompressed – even though over the wire, by default, both Firefox and Safari try to fetch the gzip-compressed versions if available.

Comment by zzen — October 22, 2009

@zzen: That seems to be the answer. Takes the same time 2.67s to render in FF 3.5.3 in Firebug and shows the correct filesize.

@ALL So ignore my post.. ;)

Comment by gabel — October 22, 2009

I’d rather avoid ckeditor completely until they actually finish it (lots of ‘hard coding’ going on), and get some documentation..

Comment by meandmycode — October 22, 2009

@meandmycode, that’s definitely not true. CKEditor is quite a complete product, ready to be used and stable. No hard coding going on in any way. I may still miss some features available in FCKeditor 2, but those are definitely not critical for the majority of its usage cases. We’re working to include them on it anyway.

Comment by fredck2 — October 22, 2009

@fredck2 until you try and use the built in uploader… I have only found one page via google that explains how to make it work. (HINT: your backend PHP/ASP/ASP.NET/CF/JSP needs to return a JS snippet with expected parameters functionNum and url and the optional message)

Yes this is strictly a documentation issue, it’s a BIG one that completely hampers a great feature…. the very feature that made me choose this editor.

I also noticed a bug setting a simple editor at run time but worked around it by loading a custom config.

Comment by nobleach — October 22, 2009

This was a great product way back in times where there were no such availability of rich text editors.

During those years we used it quite extensively and managed to get around its coding and settings.

Yes, the upload(Browse server) was interesting to set up at first but then it was working without any problems.

Hope to hear some feedback from real life testing!

Comment by ajaxus — October 23, 2009

Sorry fred but I just don’t agree, after spending hours in the source (the only way to find out how to actually DO something), you see lots of weird dependencies.. and incomplete design.. for example, fakeobjects, the mock object is always an IMG tag.. and it has built in logic to specifically copy back the width and height properties to attributes.. errr ok?

Plenty of things like this, after 3 days I wasn’t getting anywhere near close to what I needed, I took a risk to move to tinymce and within 30 minutes I had converted my 3 days work.. how? their api works, and most importantly- documentation.

Comment by meandmycode — October 23, 2009

@meandmycode, I understand you may feel frustrated if you were not able to do something you wanted to do. Looking at the editor source code may be useful sometimes, but you can definitely find complex things that may look strange to you, but have a precise reason for being there. The fakeobjects things is one of them, and it’s this way because of the incredible flexibility we have with the data generation in CKEditor. It is complex really, but it is nothing anyone must deal with as this is part of the editor core. Please don’t assume it’s wrong just because it’s complex.

Anyway… these discussions are always going completely out of the article scope. I really hope you’re enjoying the performance improvements and the article we have written.

Comment by fredck2 — October 26, 2009

Leave a comment

You must be logged in to post a comment.