I deployed my first Laravel/Vue website for the company I work at (not a software one) and I am trying to optimize the performance of a SPA built with Laravel 11, Vue 3 with Tailwind, Inertia.js, and Vite, hosted on a shared GoDaddy server, despite implementing base optimization techniques, my main public index page Lighthouse performance score varies between 65 and 85 but never goes above that, with critical FCP and LCP issues.
Here are the specific Lighthouse metrics on mobile:
First Contentful Paint (FCP): 4.5 s
Largest Contentful Paint (LCP): 5.1 s
Speed Index: 4.5 s
1. Minimize main-thread work (4.3 s total)
This is the most confusing part. The execution time is massively consumed by "Other":
Other: 3,861 ms
Script Evaluation: 295 ms
Style & Layout: 101 ms
Rendering: 26 ms
Parse HTML & CSS: 8 ms
2. Reduce unused JavaScript
Lighthouse flags my 'vendor-vue' chunk
- build/assets/vendor-vue-[hash].js: 234.0 KiB transfer -> 139.1 KiB unused.
3. Render-blocking requests
- build/assets/app-[hash].css: 22.2 KiB (0 ms duration, but still flagged).
What I have already tried:
Images: Replaced hero images with AVIF/WebP, implemented
<picture>tags with 'srcset' and 'sizes' for mobile devices.Fonts: Sub Google Fonts to only download specific weights used in the design.
Vite Code Splitting: Admin components are lazy-loaded and do not bleed into the public app.js.
How can i track and fix this? i donw know what typically causes 3.8 seconds of "Other" time in Lighthouse for a Vue/Inertia app or how can I profile this specific metric and since 'vendor-vue.js' contains the core of Vue and Inertia, how can I reduce the "139 KiB unused" warning? and Is there a Vite plugin for Laravel to inline critical CSS considering the CSS is already minified and small (22 KiB)?
Any guidance would be greatly appreciated.