#100 page speed

1 messages · Page 1 of 1 (latest)

wild sleet
#

I am using Laravel Inertia + Vue + Tailwind.
I am struggling to figure out how to get a page speed using lighthouse of close to 100 for mobile
Recommendations are things like

  • Critical CSS
  • Deferring JS
  • Removing unused CSS
  • Splitting JS

So far haven't been able to figure out any of the above anyone found a way to do this ?

radiant tinsel
#

100 score ? Don't use SPA HibikiShrug

wild sleet
#

Missed some Info have it setup for SSR as well

radiant tinsel
#

What's your score now

wild sleet
#

67 / 100

vestal socket
#

Most of these you could easily fix, critical CSS is extremely difficult

lost saddle
#

What score do you get for desktop?
Have you looked at Code splitting? https://inertiajs.com/client-side-setup#code-splitting
I think as @radiant tinsel says - you are going to struggle to hit a high score using inertia. I was looking at building an app with Inertia for an ecommerce site, but I we are going to have to battle with inertia to get a good pagespeed so blade + simple js might be a better option.

vestal socket
cobalt storm
#

what does your network graph look like for a full page load? you say you’re using Tailwind, did you set up the build process so it removes unused css?

vestal socket
# cobalt storm what does your network graph look like for a full page load? you say you’re usin...

I don't have a highly optimised Inertia setup right now, planning on doing these things tho.
As for the things you've mentioned:

  • Tailwind / Removing unused CSS: https://tailwindcss.com/docs/content-configuration having a proper Tailwind setup already removes unused CSS. Obviously the CSS won't be on a per-page basis, but it won't include CSS that's not used by your site. If you'd need per-page CSS and want to include absolutely only CSS used by the current page then Tailwind probably isn't the right tool for you
  • Splitting JS: Inertia can easily be setup to leverage code-splitting (https://inertiajs.com/client-side-setup#code-splitting), if you have other large libraries you can also lazy load those. Laravel Mix even provides so-called vendor extraction. I believe Vite can do this too
  • Deferring JS: You can do this with Inertia as well, but I think the best option would be to use SSR then as well, so you'll provide the full HTML and the client can render the page before JS is loaded
cobalt storm
#

I'm not the poster, I think you meant to reply to @wild sleet :p

vestal socket
#

Ah, sorry 😅

cobalt storm
#

I can see now how what I said might be confusing, soz. but yeah he should make sure his code splitting & css removal is set up, those are very easy to do and should make a big difference

frail karma
#

I’m in the early days for a new project where I want to aim to get 100 or close where possible.

Is code splitting needed for that? I saw somewhere that having one file makes the site feel snappier, does this only apply when you aren’t using SSR?

#

I’m aiming to use SSR myself

vestal socket
frail karma
#

I’m just asking a question buddy, chill aha. Just looking to learn more 😅

vestal socket
#

I am chill? You're just asking weird questions imo

cobalt storm
#

How much code splitting helps depends on the website. If your website imports a lot of code on the home page you’ll still have a big main file

#

For example youtube might not import the player javascript code on the home page and so that code is only loaded once you start playing a video

frail karma
#

Ah yeah that makes sense. Thanks pal

vestal socket