How do you improve editor page load performance?

koniahin · March 2022

I have a number of forms varying in purpose and number of database fields from as little as 3 fields to over 100 fields, quite complex.

The forms with minimal fields load quickly, mostly < 3 seconds whereas those with many update field (100+) might take 12-13 seconds for the form to load. Even with 10-15 items in the table they take a long long time to load.

Is there anything that can be done to optimize the performance of the really big forms?

allan · March 2022

That is surprising, unless perhaps you have lots of dependent fields? Can you give me a link to your page so I can performance profile and see where we might be able to make improvements please?

Thanks,
Allan

koniahin · March 2022

It's hard to give you a link for something that is under development. The table in question is a users table which currently has 73 fields.

The user database table has 5 records (5 users).

The complete form has 2 sets of dependent fields:

1) pob (place of birth) country/region
2) residence country/region

When I disable these 2 in the html and controller forms it makes zero appreciable difference.

When I disable all but half a dozen common fields like

rowOrder
fname
lname
mname
username
password

it makes a world of difference, dropping the load time (20mbps internet) from about 6.5 seconds to under 3 seconds. This points to # fields.

Different situation: As for number of records in a table I have another form has limited fields but lots of table entries, > 1150. With this form it takes about 13-14 seconds to completely paint the DTE table. This is clearly a result of the #db entries. Not asking about this scenario.

allan · March 2022

I've just built a small test case with 100 fields and 50 rows in the table (all generated) and Editor seems to be performant for me - perhaps you could say how it performs for you: http://live.datatables.net/lovefanu/1/edit ?

Allan

allan · March 2022

p.s. Can I just check that we are talking about the time from when you click the "Edit" button to the form being displayed? That's what I understood from your post.

koniahin · March 2022

No. Loading the page. The page you pointed me to takes about 4 seconds to load, then reload.

Opening the editor is not a problem, probably a second or less. This page takes 6-7 seconds to load, reload or clear cache and reload. If I reduce the # fields for testing it will take under 3 seconds.

We are loading the DTE assets from the CDN site. The VPS server has 8GB RAM and is located at a DataCenter in Texas (I am in Colorado).

Other framework type assets like css and js are almost all local. Like this:

colin · March 2022

This section of the FAQ should help, it discusses various techniques to improve performance on that initial page load,

Cheers,

Colin

allan · March 2022

Oh - I'd misunderstood. If Colin's link doesn't help, I really would need a link to a page showing the issue to be able to performance profile it I'm afraid.

Allan

koniahin · April 2022

I started to set this up, creating a versatile form where you can select some form options to add between 0 and 10,000 records to a table, and switch back. What I have not gotten to yet is adding some dependent fields and complexities into the form. Here is what I have so far:

https://www.dottedi.xyz/bin/test.php

allan · April 2022

Thank you! It is Ajax loading from test.php, which (with 10'000 records) is 43MB! So that alone is going to take time to download (10 seconds for me).

Then it is creating and drawing every single row since you have paging disabled. Enable paging and you'll notice a significant difference in performance.

However, without question, if you are expecting files that large, I would suggest you switch to server-side processing, per the FAQ Colin linked to. 43MB download just to display some data is significant!

Allan

koniahin · April 2022

I understand about the paging and the huge quantity of records. However I have a couple form which even with minimal records (15) take 10-12 seconds to load the table view. I have not had time to make the test demo more complex adding some dependent fields, etc to more closely mimic these forms.

allan · April 2022

I wasn’t seeing that with the test page and just a handful of records - that was fairly quick for me. Is it not for you?

Allan

koniahin · April 2022

With this particular demo form due to the time to develop it I made the majority of the fields simple input with a few basic selects.

1) Fields types: With the real forms that have problems they are more complex and commonly include some select lists with maybe 30 options and also instances of ckeditorClassic and maybe one or two dependent fields.

2) Multitab: We also set up the editor with tabs (multitab) to keep the content organized and not scroll on forever.

3) Instances: The slowest loading form includes 5 instances of ckeditorClassic. Another really slow form has even more than 5, required for the purpose.

4) Broadband speed - Unlike many I choose to run with a slower broadband, 20mbps. I do this because although many business including home-businesses afford fast internet I have people I work with who don't, much slower than mine - this forces me to get the problems they experience. For many 10mbps is fast. What might seem acceptably fast to you is more painful to me.

We can't do anything about broadband speed for sure. If there is a way to improve performance caused by the other other issues including ckeditorClassic that would really help.

allan · April 2022

I dream of 20mbps! I've got 10 down and not quite 1 up in my office (its a little remote...).

With your example and 10 rows, it takes 215mS to get the Ajax response from the server and download it to my computer for display. The display time is less than that at 110mS.

Selecting a row and then pressing the edit button shows 100 fields with no appreciable delay for me.

ckEditor is always going to be the slowest field to initialise since it needs to convert DOM items (i.e. it uses an iframe). You example doesn't appear to show that so I can't profile that, but if CKEditor isn't starting up fast enough, you might need to contact their support.

Allan

koniahin · May 2022

Not in this example but with a couple other forms which make heavy use of ckeditor I tested by disabling it and found that it loads quickly when set to textarea or nothing at all. The slowest form is, thankfully, one that will be rarely used.

I also found that the performance seems to be directly related to the iterations of ckeditor - each seems to add about a second or so to the load time.

colin · May 2022

Would you be able to link to an example that does demonstrate the issue, please. We can then profile it and see where the issue lies,

Colin

koniahin · June 2022

This took some real time to set up and do some testing. We now have 2 versions of my test form.

https://www.dottedi.xyz/bin/dte-test.php
https://www.dottedi.xyz/bin/dte+ckeditor.php

For each data point I did 10 reloads to get an average result. I ran tests using simple page reload and also a clear cache reload (using a clear cache addon). We ran a set with 1 record in the table and a second set with 500 records. The kicker here is that I set up the form so that you could add ckeditorClassic to up to 4 fields and ran tests with each.

Simple framework means the framework you see when you view either test page. In our real administration system we have more features in the Admin framework and they slow the page down - considerably - and that is on us. That information is there for reference.

As expected the results show that it takes about 3 seconds more to load 500 records vs 1 record. No surprise.

We expected ckeditor to slow down page loads and it does.

The data is not perfect but good enough. Any time you are working with the internet there will be some ebbs and flows with traffic, so you may see a couple numbers that appear questionable.

I have several forms that run 3 instances of ckeditor. With the simple framework and 500 records it takes about 7.5 seconds to load, about 15 with the Admin framework.

allan · June 2022

Thank you!

I'm surprised by how slow each CKEditor instance is to load, but it is creating its context etc, so it will most certainly take time. I should note though that with 500 rows, your example takes around 2 seconds for me which is a lot faster than your numbers above.

There are really two things going on here:

The initial data load - the more rows in the table, the longer it takes to download and display. Perhaps even more importantly, since you have paging disabled and scrolling enabled, the more data there is the longer the column alignment calculations will take. I would recommending using paging to maximum responsiveness.
Increasing numbers of CKEditor instances. Editor will create the CKEditor instance when the field is constructed (in this case at page load):

This is the relevant code in the plugin:

            conf._input = $('<div id="'+id+'"></div>');
            ckType.create( conf._input[0], conf.opts )
                .then( function (editor) {
                    conf._ckeditor = editor;
                } );

One option here might be to move the ckType.create(...) initialisation into the set() function, or an open event handler. I used that technique for the CKEditor 4 plug-in, but it was no longer required for CKEditor 5.

The advantage of doing that is that it results in the processing required for the CKEditor initialisation being delegated away from the page load to the form being shown for the first time, making that initial load feel faster. That might be an option worth considering?

Regards,
Allan

How do you improve editor page load performance?

How do you improve editor page load performance?

Replies

Howdy, Stranger!

Categories

DataTables

How do you improve editor page load performance?

How do you improve editor page load performance?

Replies

Howdy, Stranger!

Quick Links

Categories

DataTables