How do you improve editor page load performance?

How do you improve editor page load performance?

koniahinkoniahin Posts: 186Questions: 39Answers: 7

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?

Replies

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin

    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

  • koniahinkoniahin Posts: 186Questions: 39Answers: 7

    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.

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin

    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

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin

    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.

  • koniahinkoniahin Posts: 186Questions: 39Answers: 7
    edited 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:

    <link rel='stylesheet' type='text/css' href='https://www.dottedi.xyz/devel/assets/bootstrap/bootstrap4/css/bootstrap.css' media='screen' />

    <link rel='stylesheet' type='text/css' href='https://www.dottedi.xyz/devel/bin/css/dropdown.css?' media='screen'/>

    <link rel='stylesheet' type='text/css' href='https://www.dottedi.xyz/devel/bin/css/stylesheet.css?' media='screen' />

    <link rel='stylesheet' type='text/css' href='https://www.dottedi.xyz/devel/assets/bootstrap/bootstrap4/css/navbar-themes/deeppink.css?' media='screen' />

    <link rel='stylesheet' type='text/css' href='https://www.dottedi.xyz/devel/bin/css/navbar.css?' media='screen' />

    <link rel='stylesheet' type='text/css' href='https://www.dottedi.xyz/devel/bin/assets/DataTables/datatables.min.css'/>

    <link rel='stylesheet' type='text/css' href='https://www.dottedi.xyz/devel/bin/css/datatables.css' media='screen' comment='Custom styles' />

    <link rel='stylesheet' type='text/css' href='https://www.dottedi.xyz/devel/bin/css/dte-buttons.css' media='screen' comment='Custom styles' />

    <link rel='stylesheet' type='text/css' href='https://www.dottedi.xyz/devel/bin/css/nav.css' media='screen' />

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

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

    Cheers,

    Colin

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin

    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

  • koniahinkoniahin Posts: 186Questions: 39Answers: 7

    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

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin

    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

  • koniahinkoniahin Posts: 186Questions: 39Answers: 7

    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.

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin

    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

  • koniahinkoniahin Posts: 186Questions: 39Answers: 7

    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.

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin

    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

  • koniahinkoniahin Posts: 186Questions: 39Answers: 7

    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.

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    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

  • koniahinkoniahin Posts: 186Questions: 39Answers: 7

    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.

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin

    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:

    1. 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.
    2. 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

Sign In or Register to comment.