Thursday, October 22nd, 2009
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