Large css dumped inline in listing pages
Large css dumped inline in listing pages
Why it is a problem
When CSS is written directly inside the Blade page, the browser has to download that CSS again and again on every page load.
The browser cannot cache it separately.
So every time user opens:
/bike-listing
/car-listing
/search-vehicle
/booking
the same CSS may be sent again with the HTML response.
This makes the page heavier and slower.
Meaning of “not cacheable”
If CSS is in a separate file like:
resources/css/bike-listing.css
then Vite can generate a versioned file like:
bike-listing-abc123.css
The browser can cache this file.
So next time user visits the page, browser does not need to download CSS again.
But if CSS is inside Blade:
...
then it is part of the HTML. Browser cannot reuse it separately.
Impact
The screenshot says:
+200–500ms LCP on slow connections
LCP means Largest Contentful Paint.
Simple meaning:
how much time the main visible content takes to load on screen.
If inline CSS is large, it can delay page rendering, especially on mobile or slow internet.
Recommended fix
Move the inline CSS from Blade files into a separate CSS file.
Example:
resources/css/bike-listing.css
Then load it using Vite:
@vite(['resources/css/bike-listing.css'])
Or if you already have one main CSS file:
@vite(['resources/css/app.css'])
Top comments (0)