Description
The initial page load is slowed down due to several JavaScript files being loaded too early in index.html. These scripts block rendering and delay the display of the UI, especially on mobile devices.
Current Behavior
In index.html, the following scripts are loaded in the <head> section without defer:
- jQuery (around line 80)
- jQuery UI (around line 81)
- Materialize (around line 82)
Because of this, the browser pauses rendering until these scripts are fully loaded and executed.
This results in:
- Slower initial page rendering
- Delayed First Contentful Paint (FCP)
- Lower Lighthouse performance scores (more noticeable on mobile)
Expected Behavior
The page should render its initial UI without being blocked by non-critical JavaScript.
- Only essential scripts should load immediately
- Non-critical scripts should be deferred or loaded after the initial render
- The first screen should appear quickly, especially on mobile devices
Audits / Screenshots
Proposed Solution
- Add
defer to non-critical scripts
- Move scripts from
<head> to the end of <body> where possible
- Lazy-load scripts that are only needed after user interaction
This should reduce render-blocking behavior and improve initial load performance.
Environment
- Device type: Mobile(major impact) , Desktop
- Operating System: Any
- Browser (if applicable): Chrome(Lighthouse testing)
- Version of Software/Project: Latest (master branch)
Checklist
Description
The initial page load is slowed down due to several JavaScript files being loaded too early in
index.html. These scripts block rendering and delay the display of the UI, especially on mobile devices.Current Behavior
In
index.html, the following scripts are loaded in the<head>section without defer:Because of this, the browser pauses rendering until these scripts are fully loaded and executed.
This results in:
Expected Behavior
The page should render its initial UI without being blocked by non-critical JavaScript.
Audits / Screenshots
Proposed Solution
deferto non-critical scripts<head>to the end of<body>where possibleThis should reduce render-blocking behavior and improve initial load performance.
Environment
Checklist