How do you improve editor page load performance?

How do you improve editor page load performance?

koniahinkoniahin Posts: 94Questions: 19Answers: 1

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: 55,865Questions: 1Answers: 8,830 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: 94Questions: 19Answers: 1

    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: 55,865Questions: 1Answers: 8,830 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: 55,865Questions: 1Answers: 8,830 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: 94Questions: 19Answers: 1
    edited March 31

    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: 14,193Questions: 1Answers: 2,405

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

    Cheers,

    Colin

  • allanallan Posts: 55,865Questions: 1Answers: 8,830 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: 94Questions: 19Answers: 1

    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: 55,865Questions: 1Answers: 8,830 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: 94Questions: 19Answers: 1

    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: 55,865Questions: 1Answers: 8,830 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: 94Questions: 19Answers: 1

    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: 55,865Questions: 1Answers: 8,830 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: 94Questions: 19Answers: 1

    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: 14,193Questions: 1Answers: 2,405

    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

Sign In or Register to comment.