How to make a Lister / ListerPro Lister load much faster on a site with both many fields and many filters

[Jonathan Lahijani]

My print-on-demand webapp is very complex.  It has:

• hundreds of fields
• tens of thousands of pages (let's focus on orders)
• listers (again, let's focus on my "Orders" lister)
• many filters on listers (my Orders lister has about 20 filters)

When you load a ListerPro lister page, it technically does 2 requests:

• first request is to build the interface
• second request (ajax) loads the results based on the filters, etc.

I noticed it became very slow over time, but I didn't look into it deeply until now.

Even though I have thousands of order pages, that's actually not the issue.

First, part of the issue is what type of page reference fields you are using, which I wrote a tutorial about, so make sure to view that as well. (also keep in mind TracyDebugger slows things down a lot here as well)

But even with that, it's still slow on the first request.  It would take 8-14 seconds to load a ListerPro page on the first request!

The issue?  Having too many filters (20 for example) combined with the fact my site has hundreds of fields means that generating that filters list is incredibly intensive.  That filters list is powered by the InputfieldSelector field.

I worked with DeepSeek and it came up with a simple solution: when rendering the field list (ie, the first dropdown in InputfieldSelector), don't show every single field as an option... instead only grab the fields that I have actually used.  This keeps the InputfieldSelector field working correctly, but eliminates a bunch of fields I wouldn't have wanted to use in my filters anyway.  So, we're sacrificing a little (unneeded) flexibility for extreme performance gain. Now my ListerPro page loads in less than a second!

Use this hook in ready.php:

if(wire('page')->process == 'ProcessPageListerPro' && !wire('config')->ajax && wire('input')->urlSegment1 !== 'config') {
  
    wire()->addHookBefore('InputfieldSelector::render', function($event) {
        $is = $event->object;
        
        // Don't interfere if limitFields was already explicitly configured
        $existing = $is->limitFields;
        if(!empty($existing)) return;
        
        // Parse field names from the current selector value
        $value = (string) $is->attr('value');
        if(!strlen($value)) return;
        
        $fieldNames = [];
        try {
            $selectors = wire(new \ProcessWire\Selectors($value));
            foreach($selectors as $s) {
                foreach($s->fields as $field) {
                    if(strpos($field, '.') !== false) {
                        list($field,) = explode('.', $field, 2);
                    }
                    $fieldNames[$field] = $field;
                }
            }
        } catch(\Exception $e) {
            return;
        }
        
        // Always include system fields (needed for the template row)
        foreach(['id','name','title','template','parent','status',
                 'created','modified','published','path','has_parent',
                 'created_users_id','modified_users_id','num_children',
                 'count','include','limit','sort','_custom'] as $f) {
            $fieldNames[$f] = $f;
        }
        
        if(count($fieldNames)) {
            $is->set('limitFields', array_values($fieldNames));
        }
    });
}