How to speed up Dash App by defer javascript?

Dash Python
1

Hi,

I would like to know if there is a possibility to speed up the loading process of my dash app by defer the javascripts used in the app.

I tried to check the loading speed of my dash app using Google Page Speed Insights and GTmetrix, but the result is only around 70-80% for desktop and lower for mobile. Or maybe some code in my app makes the page slower when it is loading? This is just a simple dash app and not yet contains any code related to plotting/graph of data.

testspeed
testspeed1014×691 79.5 KB

my app.py code:

# -*- coding: utf-8 -*-
import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
import page_layout as pl

# using dash-bootstrap-components for our external stylesheets
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])


# setup container for our page-content that will be called based on the url/pathname
dynamic_body_content = html.Div([
    dcc.Location(id='url', refresh=False),
    html.Div(id='page-content')
]) 

# initiate the app layout which consists of navbar and dinamically loaded body content
app.layout = html.Div([pl.navbar, dynamic_body_content])

# setup the callback for each page
@app.callback(dash.dependencies.Output('page-content', 'children'),
              [dash.dependencies.Input('url', 'pathname')])
def display_page(pathname):
    if pathname == '/kebijakan-privasi':
    	return pl.body_kebijakan_privasi, pl.body_footer
    elif pathname == '/tos':
    	return pl.body_tos, pl.body_footer
    elif pathname == '/disclaimer':
    	return pl.body_disclaimer, pl.body_footer
    elif pathname == '/dashboard':
        return pl.body_grafana, pl.body_footer
    elif pathname == '/about':
        return pl.body_about, pl.body_footer
    elif pathname == '/':
    	return pl.body_index, pl.body_footer
    else:
    	return pl.body_index, pl.body_footer

server = app.server

# Start the app server
if __name__ == '__main__':
    app.run_server(debug=False)
2

I was asking myself this too, is it possible?

3

This was a part of the Dash 1.5.x release: 📣 Dash 1.5.0 released

1 Like
4

📣 Dash 1.5.0 released defers loading three things: Plotly.js (~3MB JS / ~900kB gzipped), XLSX (table export, ~1MB / ~300kB gzipped), the DataTable itself (~300kB JS / ~90KB gzipped). It also ensures that component resources are cached correctly.

At the moment other steps that can be taken are to (1) minimize other assets, (2) not import component libraries that are not used by the app.

In the coming releases more work will be done to defer loading additional components / dependencies and to improve caching of files in /assets.

1 Like
5

@Marc-Andre This is already a significant improvement, it improved the upload time in 30%. Thanks a lot!!

2 Likes
6

Woww… that’s a good news! Thanks :slight_smile: Nice to hear that finally we have a faster loading dash app…

1 Like
7

Hi , I trying this ver .
But, I have an error: module ‘dash_core_components’ has no attribute ‘Download’
Could you help me?