Search code examples
jqueryajaxperformancedatatablescoldfusion

Is it possible to speed up this Ajax JSON call for use with datatables?


My website is https://usedlens.co.uk/

Google Dev Tools - XHR header details you can see it makes a call to https://usedlens.co.uk/data.cfc?method=getData

  • On production it takes ~12 seconds to load 3.6MB
  • On development it takes <1 second to load 22.9MB

Development and production have roughly the same amount of data and the code is the same.

I've experimented with using server side processing, and it loads the data quicker 3-4 seconds, but pagination/search/sorting all have the same 3-4 second response time. So I have stuck with the ajax option.

My datatables initialisation

var resultsTable = $('#resultsTable').DataTable(
    {
        'serverSide': false,
        'deferRender': true,
         'ajax': {
            'url': 'data.cfc?method=getData'
         },
         'columns': [            
            { 'data': 'productname' },
            { 'data': 'price' },
            { 'data': 'retailersite' }
         ],
        'columnDefs': [
           { "targets": [1,2], "searchable": false },
           { "width":"10%","targets": [1]},
           { "width":"20%","targets": [2]}
         ]
    }
);

I replaced my CFC source with a JSON text file, it still takes 8-11 seconds.

Is there anything more I can do to speed this up?


Solution

  • I switched to server-side processing

    https://datatables.net/examples/server_side/

    So that I only passed through the current records in view (10/25/50/100) instead of all 50,000.

    It wasn't the first time I tried it, but this time I fixed errors in my code causing it to run slow.

    Properly implemented it works well.