Slow page load time (Lighthouse report)

[eram]

A clear and concise description of what the bug is.

How to reproduce the bug

1. Open chrome
2. Go to a superset dashboard that has a few charts
3. F12 for dev-tools and choose Lighthouse
4. Start an analysis
5. See report (see attached report from my run)

Expected results

all parts of the analysis report should be green.

Actual results

Performance score 34 (RED!)

Screenshots

Environment

(please complete the following information):

• browser type and version: chrome 120
• superset version: 3.0
• python version: python --version
• node.js version: node -v
• any feature flags active: EMBEDDING

Checklist

Make sure to follow these steps before submitting your issue - thank you!

• [ x ] I have checked the superset logs for python stacktraces and included it here as text if there are any.
• [ ] I have reproduced the issue with at least the latest released version of superset.
• [ x ] I have checked the issue tracker for the same issue and I haven't found one similar.

Additional context

Add any other context about the problem here.

[rusackas]

This isn't necessarily a bug, but probably represents a whole gigantic pile of tasks and tech debt. Are you able to dig any deeper to enumerate some low-hanging fruit or highest-impact issues? A little further debugging would make this more actionable.

FWIW, My stats are better but I suspect that a lot of this has to do with the infra that Superset is running on top of, the queries/databases in play, and of course the payloads of the various charts and things in the dashboard.

[iercan]

We are currently on version 2.1.1. We've tested versions 3.1.1 and 4.0.0 but experienced significant slowdowns in dashboard loading times, tab switches and even scrolling, especially if it has multiple charts. This has prevented us from upgrading.

[rusackas]

@iercan do you have any insight on what's slower? Are there slower or extra API calls, perhaps? Any specifics can help us fix things.

[iercan]

@rusackas After some testing, we noticed that dashboards with custom CSS and additional native filters are experiencing decreased speed much more than others. Sometimes even crash. I believe this issue is frontend-related. Because while monitoring backend logs concurrently with dashboard viewing, stalls occurs before requests reach the backend.

[rusackas]

Interesting! I assume you mean Dashboard CSS templates, rather than custom CSS on a fork as part of the codebase?

Filters can indeed slow down a dashboard, particularly when they're fetching options dynamically and such.

I wonder if you can find the least performant dashboards and narrow it down to a (potentially sharable) CSS template and/or a configuration of filters that might be causing the most trouble.

[iercan]

This is a sample CSS template for a dashboard, which includes only three native filters yet suffers from poor performance. It features several tabs and charts that require extensive scrolling. Cleaning up the CSS template enhances performance, but it remains significantly slower than version 2.1.1.

/*scale datatables to the right*/
.dataTables_scroll,
.dataTables_scrollBody,
.dataTables_scrollHead,
.dataTables_scrollHeadInner,
.table {
  font-size: 14px;
}
.dataframe {
  width: 100% !important;
  font-size: 16px;
}
.big_number_total {
  text-align: center;
}

/*remove last column of pivot table*/
#chart-id-1010 .dataTables_scrollHead table tr th:last-child { display: none;}
#chart-id-1010 .dataTables_scrollBody table tr td:last-child { display: none;}
#chart-id-1010 .dataTables_scrollBody table tr th:last-child { display: none;}

/*.editable-title{
  font-size:3vw !important;
}

td, th {
  font-size:1vw !important;
}*/


div.ant-tabs-tab span span { font-size: xx-large !important;}
#chart-id-1054 {background:#FFFBCC;}
#chart-id-1055 {background:#FFFBCC;}
#chart-id-1056 {background:#FFFBCC;}

#chart-id-1008 table tbody tr:nth-last-child(9) { background:#FFFBCC; font-weight:bold;}
#chart-id-1008 table tbody tr:nth-last-child(2) { background:#FFFBCC;font-weight:bold; }

#chart-id-1092 table tbody tr:nth-last-child(9) { background:#FFFBCC; font-weight:bold;}
#chart-id-1092 table tbody tr:nth-last-child(2) { background:#FFFBCC;font-weight:bold; }

#chart-id-1095 table tbody tr:nth-last-child(9) { background:#FFFBCC; font-weight:bold;}
#chart-id-1095 table tbody tr:nth-last-child(2) { background:#FFFBCC;font-weight:bold; }

#chart-id-4392 table tbody tr:nth-last-child(9) { background:#FFFBCC; font-weight:bold;}
#chart-id-4392 table tbody tr:nth-last-child(2) { background:#FFFBCC;font-weight:bold; }

#chart-id-1010 table tbody tr:nth-last-child(9)  { background:#FFFBCC;font-weight:bold; }
#chart-id-1010 table tbody tr:nth-last-child(2) { background:#FFFBCC; font-weight:bold;}
  
#chart-id-1010 table tbody tr {
  overflow: hidden;
  white-space: nowrap;}

/* Subscription tables */
#chart-id-1017 table tbody tr:nth-last-child(9)  { background:#FFFBCC; font-weight:bold;}
#chart-id-1017 table tbody tr:nth-last-child(2) { background:#FFFBCC; font-weight:bold;}

#chart-id-1132 table tbody tr:nth-last-child(9)  { background:#FFFBCC; font-weight:bold;}
#chart-id-1132 table tbody tr:nth-last-child(2) { background:#FFFBCC; font-weight:bold;}
/* Subscription tables */


#chart-id-1009 table tbody tr:nth-last-child(9)  { background:#FFFBCC; font-weight:bold;}
#chart-id-1009 table tbody tr:nth-last-child(2) { background:#FFFBCC; font-weight:bold;}

#chart-id-1011 table tbody tr:nth-last-child(8)  { background:#FFFBCC; font-weight:bold;}
#chart-id-1011 table tbody tr:nth-last-child(1) { background:#FFFBCC; font-weight:bold;}

#chart-id-4086 table tbody tr:nth-last-child(9)  { background:#FFFBCC; font-weight:bold;}
#chart-id-4086 table tbody tr:nth-last-child(2) { background:#FFFBCC; font-weight:bold;}
#chart-id-4087 table tbody tr:nth-last-child(9)  { background:#FFFBCC; font-weight:bold;}
#chart-id-4087 table tbody tr:nth-last-child(2) { background:#FFFBCC; font-weight:bold;}
#chart-id-4088 table tbody tr:nth-last-child(9)  { background:#FFFBCC; font-weight:bold;}
#chart-id-4088 table tbody tr:nth-last-child(2) { background:#FFFBCC; font-weight:bold;}
#chart-id-3813 table tbody tr:nth-last-child(8)  { background:#FFFBCC; font-weight:bold;}
#chart-id-3813 table tbody tr:nth-last-child(1) { background:#FFFBCC; font-weight:bold;}
#chart-id-3814 table tbody tr:nth-last-child(8)  { background:#FFFBCC; font-weight:bold;}
#chart-id-3814 table tbody tr:nth-last-child(1) { background:#FFFBCC; font-weight:bold;}
#chart-id-3815 table tbody tr:nth-last-child(8)  { background:#FFFBCC; font-weight:bold;}
#chart-id-3815 table tbody tr:nth-last-child(1) { background:#FFFBCC; font-weight:bold;}