ImageMaps plugin for uCKeditor performance problems
We have been using the uCKeditor plugin for umbraco for a few months now.
We also installed a plugin for it called Image Maps:
http://ckeditor.com/addon/imagemaps
Recently, one of our content editors noticed a sharp drop in performance while editing some pages. After testing it for a while I noticed that removing all image maps from the source completely solved the performance problem, the editor was responsive lightning fast again.
In reality, the plugin simply adds a few lines of HTML to the image, so I couldn't understand why it would affect performance so severely.
Therefore, I decided to check where the breakpoint would be for adding imagemaps. In a page with 5 images, I started adding imagemaps to those images via the plugin.
The first imagemap showed no performance drop.
After the second image map, a slight delay started to manifest with every user action.
Every imagemap afterwards made the delay progressively worse to the point where at 5 images with 5 imagemaps, the editor takes over 4-5sec to just move the cursor 1 character distance left/right. This is what my content editor colleague experienced.
Any ideas what could be causing that performance problem?
Is there anything we can do about it?
I will also contact the creator of the Image Maps plugin and report any findings.
I have no idea of what could be causing that perfomance issue.
Are you using uCKEditor as property editor (Umbraco backoffice) or as a front-end inline editor?
Have you tried to add the imagemaps (without the 'imagempas' addon installed), by manually copying the imagemaps html markup (using CKEditor button) and check if there are performance issues?
To discard any conflict with Umbraco or UCKEditor, you could try to add those imagemaps to the official demo page (http://ckeditor.com/demo) and check if there are performance issues.
Tools like Firefox Firebug and Chrome dev tools (Network, Timeline, ...) could give you more insights about what is happening.
The dev tools were the first thing I checked, nothing seems out of the ordinary.
We are using uCKEditor as a property editor of Umbraco. The pages created with it have no performance issues, but the editor itself struggles when it contains multiple imagemaps.
It seems imagemaps are somehow excluded in the official demo page of CKeditor. When I paste it in the source then cancel source view, then check source again -> the imagemaps get removed.
I tried adding the imagemaps manually(without the plugin) and I noticed that we still get the performance issues. However, the editor seems to run fine in <>Source view, but as soon as we switch back to default the performance drops dramatically. It seems that the editor is having problems rendering the imagemaps on top of the images.
I guess the next step would be to ask the creators of CKEditor itself...
I will report any findings.
By your findings it seems that indeed the problem comes from CKEditor itself. But I would contact the creator of the plugin too, since maybe they can help to fix the problem and submit a PR for CKEditor.
The first thing I noticed was that locally, uCKEditor draws borders on the lines specified in the imagemaps for a specific image. I took a screenshot to illustrate:
While on the remote test server, there were no borders and no performance problems.
So I inserted the full domain path for the images into our uCKEditor and this solved the performance problems (and removed the imagemap borders for some reason).
It looks like uCKEditor and probably CKEditor in general doesn't like the combination of relative file paths and imagemaps for the same image.
I will discuss this with our content editor, at least we know how to work around the issue now.
ImageMaps plugin for uCKeditor performance problems
We have been using the uCKeditor plugin for umbraco for a few months now. We also installed a plugin for it called Image Maps: http://ckeditor.com/addon/imagemaps
Recently, one of our content editors noticed a sharp drop in performance while editing some pages. After testing it for a while I noticed that removing all image maps from the source completely solved the performance problem, the editor was responsive lightning fast again.
An example of an imagemap added by the plugin:
In reality, the plugin simply adds a few lines of HTML to the image, so I couldn't understand why it would affect performance so severely.
Therefore, I decided to check where the breakpoint would be for adding imagemaps. In a page with 5 images, I started adding imagemaps to those images via the plugin.
The first imagemap showed no performance drop. After the second image map, a slight delay started to manifest with every user action. Every imagemap afterwards made the delay progressively worse to the point where at 5 images with 5 imagemaps, the editor takes over 4-5sec to just move the cursor 1 character distance left/right. This is what my content editor colleague experienced.
Any ideas what could be causing that performance problem? Is there anything we can do about it? I will also contact the creator of the Image Maps plugin and report any findings.
Hi George,
I have no idea of what could be causing that perfomance issue.
Are you using uCKEditor as property editor (Umbraco backoffice) or as a front-end inline editor?
Have you tried to add the imagemaps (without the 'imagempas' addon installed), by manually copying the imagemaps html markup (using CKEditor button) and check if there are performance issues?
To discard any conflict with Umbraco or UCKEditor, you could try to add those imagemaps to the official demo page (http://ckeditor.com/demo) and check if there are performance issues.
Tools like Firefox Firebug and Chrome dev tools (Network, Timeline, ...) could give you more insights about what is happening.
Hope that helps.
Alain
Hi Alain
The dev tools were the first thing I checked, nothing seems out of the ordinary.
We are using uCKEditor as a property editor of Umbraco. The pages created with it have no performance issues, but the editor itself struggles when it contains multiple imagemaps.
It seems imagemaps are somehow excluded in the official demo page of CKeditor. When I paste it in the source then cancel source view, then check source again -> the imagemaps get removed.
I tried adding the imagemaps manually(without the plugin) and I noticed that we still get the performance issues. However, the editor seems to run fine in <>Source view, but as soon as we switch back to default the performance drops dramatically. It seems that the editor is having problems rendering the imagemaps on top of the images.
I guess the next step would be to ask the creators of CKEditor itself... I will report any findings.
The imagemaps are excluded in the official demo page of CKeditor because of the ACF (CKEditor Advanced Content Filter), but it was worth to try it.
By your findings it seems that indeed the problem comes from CKEditor itself. But I would contact the creator of the plugin too, since maybe they can help to fix the problem and submit a PR for CKEditor.
I discovered what was causing the problem!
While communicating with the creator of the imagemaps plugin, he referred me to his test page: http://www.martinezdelizarrondo.com/ckplugins/imagemaps.demo4/
When we are working locally in uCKEditor and we insert an image from the media picker, the image gets inserted using a relative local path like:
Then I tried to paste the same html to the remote test page, and naturally, I had to include the full domain path to the image:
The first thing I noticed was that locally, uCKEditor draws borders on the lines specified in the imagemaps for a specific image. I took a screenshot to illustrate:
http://imgur.com/dUJMzWn
While on the remote test server, there were no borders and no performance problems. So I inserted the full domain path for the images into our uCKEditor and this solved the performance problems (and removed the imagemap borders for some reason).
It looks like uCKEditor and probably CKEditor in general doesn't like the combination of relative file paths and imagemaps for the same image.
I will discuss this with our content editor, at least we know how to work around the issue now.
Glad that you could solve the problem and thanks for sharing!
is working on a reply...