Custom Fields
Re-Envisioned
Support General Taxonomy select_advanced select2 field is very slow

  • Creator
    Topic
  • #20891
    Resolved brandonjp
    Participant

    I’ve got users complaining that the drop-down/autosuggest for Taxonomy fields is very slow. Any tips on how I can optimize that? I’m guessing it is because of too many terms in the DB? (However, we’ve currently only entered about half of the terms we need)

    Here’s an example GIF:
    https://www.dropbox.com/s/fj5tboz2uko4vpt/CleanShot%202020-07-21%20at%2015.28.36.gif?dl=0

    And here’s a code sample we’re using to create the metaboxes:

                array(
                    'id'         => $prefix . 'job_customer_taxonomy',
                    'type'       => 'taxonomy',
                    'name'       => esc_html__('Customer', 'text-domain'),
                    'taxonomy'   => 'customer',
                    'field_type' => 'select_advanced',
                    'class'      => 'add-add-new-modal',
                ),
                array(
                    'id'         => $prefix . 'job_contact_taxonomy',
                    'type'       => 'taxonomy',
                    'name'       => esc_html__('Contact', 'text-domain'),
                    'taxonomy'   => 'contact',
                    'field_type' => 'select_advanced',
                    'class'      => 'add-add-new-modal',
                ),
    
Viewing 7 replies - 1 through 7 (of 7 total)
  • Author
    Replies
  • #20897
    Long Nguyen
    Moderator

    Hi Brandon,

    The field taxonomy get the taxonomy by the function get_terms of WordPress. Since version 5.2, Meta Box uses Ajax to increase the performance for the field select_advanced but too many terms might slow down the field query.

    You can try to limit the number of terms display to improve the loading time, please follow this documentation https://docs.metabox.io/fields/taxonomy/#limit-the-number-of-terms-for-pagination.

    #21002
    brandonjp
    Participant

    Thanks, Long. On the docs, it says

    When the field is loaded, Meta Box only queries for saved terms (which is usually not many). So the initial query is very minimal and doesn’t cause any performance problem.

    screenshot: https://cln.sh/mxnF3I

    What does saved terms mean?

    Right now we’ve got 150 tags and it takes usually 15 seconds to populate the dropdown, and it’s currently set to only query for 10 terms.

    • Is reducing the number of terms in the DB the only option?
    • Would our internet speed or anything else be contributing you could think of?
    • We’re using MB Custom DB Tables, would that make it slower?

    My next idea is I’m thinking about loading all terms as JSON into the browser on the page load. My users would be happier with extra time on page load, I think.

    #21003
    Long Nguyen
    Moderator

    Hi,

    When the field is loaded, Meta Box only queries for saved terms (which is usually not many). So the initial query is very minimal and doesn’t cause any performance problem.

    That means, there are 10 items (default) loaded and ready to show on the first choice without query. After scrolling down to the bottom of the select field, it will do the next query to show more taxonomies. See my screen record to make sense.

    I think the issue is the initial select2 (select advanced) when you click to the select field, please try to deactivate all plugins except Meta Box and MB extensions to check this issue again. If it still happens, I recommend using the field type select.

    #21020
    brandonjp
    Participant

    Hello- I have realized something… Even though the first 10 are loaded, I think it is still making a new AJAX request and waiting on request to finish before it shows the first 10 that were pre-loaded. https://cln.sh/xgwV9g

    Also in your screen recording it seems to take 2.5 seconds, which is a long time to load 10 items that are already in the page.

    #21022
    Long Nguyen
    Moderator

    Hi,

    Could you please deactivate all plugins except Meta Box and MB extensions then check the issue again? If it still happens, please share the admin site account via this form https://metabox.io/contact/, I will take a closer look and give a quick response.

    #21099
    brandonjp
    Participant

    I have an update!

    #1 – I’ve run over 50 tests and replicated my site onto 5 different server environments & found that the issue is with my server, DreamPress by DreamHost. Even on regular shared hosting from DreamHost (their non-DreamPress hosting), the site performs on average 5x better. I typically love DreamHost, but for this particular site we are switching to a different host. DreamPress explained to us that:

    “Reviewing the site further, it does perform better on our non-DreamPress services such as shared or VPS. What that tells me is that the way that your plugin is configured is it’s either not compatible with a proxy-based setup like we use on DreamPress as we use ngxcache to serve the site, which reverse proxies back to apache or the way it’s handling caching is causing the problem and needs to have a rewrite.”

    I don’t really understand exactly how that’s affecting our plugin, as our plugin is not very complicated (other than it uses MetaBox for lots of custom fields with MB Custom Table).

    Are you familiar with ngxcache & reverse proxies? Or have you had any other users where MetaBox.io plugin has performance issues because of caching?

    #2 – However, there is the secondary issue that select_advanced select2 fields are still waiting on an ajax query on first click, even though they are simply fetching the same terms that were already loaded into the page. I think this should probably be a separate bug report, as I don’t think this is how Metabox’s select2 is expected to behave.

    #21113
    Long Nguyen
    Moderator

    Hi,

    #1 – This issue is so weird, querying to show 10 items (even 100 items) from the database is fast to show the dropdown items in 0-1s. I’m not sure with Nginx cache and reverse proxies of that server affect the ajax request while other servers not happen.

    #2 – It seems an issue with the select2 library when it makes an ajax request when opening the dropdown. Refer https://github.com/select2/select2/issues/110#issuecomment-419255510.
    You can turn off the ajax request by adding this code to the field setting.
    'ajax' => false
    Or make a request only the user type something to the search box by following this documentation
    https://docs.metabox.io/fields/taxonomy/#searching-parameters.

    'js_options' => array(
            'minimumInputLength' => 1, // THIS
    ),
Viewing 7 replies - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.