6 months ago

How to replace Highcharts to reduce the number of DOM nodes?

Posted 6 months ago by Javvi

Hello, At http://www.pricearchive.org we use Highcharts to show price history charts for millions of goods. Everything works fine as long as the product has little data. When a product has a lot of data, it still works well but we have an issue with DOM size according to PageSpeed Insights. You can see this page as an example - https://developers.google.com/speed/pagespeed/insights/?hl=en&url=https%3A%2F%2Fwww.pricearchive.org%2Faliexpress.com%2Fitem%2F32829165465. This is the analysis for this item - https://www.pricearchive.org/aliexpress.com/item/32829165465.

In the Diagnostics section see the second recommendation 'Avoid an excessive DOM size' - 2,599 nodes. 'Browser engineers recommend pages contain fewer than ~1,500 DOM nodes. The sweet spot is a tree depth < 32 elements and fewer than 60 children/parent element. A large DOM can increase memory usage, cause longer style calculations, and produce costly layout reflows.' For the same reason, two more issues appear.

  1. Minimize main-thread work - Consider reducing the time spent parsing, compiling and executing JS. You may find delivering smaller JS payloads helps with this.
  2. Reduce JavaScript execution time - /js/highstock.js Total - 1,484 ms; Script Evaluation - 1,386 ms.

Every day adds new data and the number of DOM nodes is constantly increasing. Is there a way to get rid of these issues?

Please sign in or create an account to participate in this conversation.