DataTables are super slow with bigger tables (10+ sec load time) and super-slow on mobile

DataTables are super slow with bigger tables (10+ sec load time) and super-slow on mobile

KestutisITKestutisIT Posts: 2Questions: 1Answers: 0

I use JS Datatables integrated to newest TablePress plugin for newest 4.2.1 version of WordPress. I have around 700 rows and 8 cells, and website load super-slow (near 10 sec), and on mobile phone even slower (Windows Phone 8, Nokia Lumia 1020, HTML5 Internet Explorer 11 browser).

That Fancy Search is based on JS DataTables. Maybe this is due search function or due something else, but I would love to have an advices how to optimize it. Table is bellow the fold at http://www.ŽymiausiFotografai.lt .

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 63,680Questions: 1Answers: 10,498 Site admin
    Answer ✓

    Using the Chrome dev tools, it looks like the page is taking longer than 1 second just to be generated on the server, and it is almost 2 second before it is actually send to the client. There are then 131 additional requests for scripts, stylesheets and other resources.

    DataTables is requested at around 3.4 seconds into the page load, and prev.png (and other related images) are requested at 4.1 seconds, suggesting that the DataTable initialisation is actually quite fast.

    Doing a CPU trace appears to confirm this, the DataTables initialisation is around 700mS. That is still fairly slow, but not the slowest part of your site I'm sorry to say.

    I would suggest taking a look how to optimise WordPress sites in general (which is not in the scope of this forum). For DataTables, you might want to consider Ajax loading the data - FAQs.

    Allan

  • KestutisITKestutisIT Posts: 2Questions: 1Answers: 0

    No, you are not correct. I just tested that. When I've installed W3TC on the computer Web is fast enough, but even on great mobile (HTML5 Windows 8.1 Nokia Lumia 1020) it loads for 30 seconds, and on slower phone (HTML5, Samsung Galaxy Y Duos, Android OS) it newer loads at all.

    To ensure you the difference I used EXACTLY THE SAME PAGE, just home page is with 700 rows in Datatables, and this DEMO page is with 90 rows in DATATABLES.

    Homepage loads in 30 seconds on my phone (700 rows in DataTables):
    http://www.žymiausifotografai.lt/

    Demo page loads in 3 seconds (90 rows in DataTables):
    http://www.žymiausifotografai.lt/demo/

  • allanallan Posts: 63,680Questions: 1Answers: 10,498 Site admin

    For me the home page loads 2.5MB of data in 5.17 seconds. 2.5MB of data is a lot of data for a simple page view and I'm not surprised it takes a few seconds to load.

    The test page loads 2.4MB of data in 2.85 seconds, so it does appear that DataTables is taking a little while to initialise (1 second in a CPU trace).

    Given the amount of HTML it is reading in, I'm not too surprised by that. I would suggest using Ajax loaded data to speed things up, per the FAQs.

    Allan

This discussion has been closed.