Optimizations [Long Term]

Kenny477 commented 2 weeks ago

I mentioned a while back that our Lighthouse score was low, and even running on local, the main site feels slow and laggy (maybe its just me?).

Anyways, we should start going in and seeing what we can change to make the website more lightweight, more so on cleaning up code, compressing images, etc., and not toolchain changes (those require too much work).

We should ideally be seeing how we can preload large resources and reduce the bundle size of the site.

Above it what we are roughly at right now. We hopefully should really be able to get performance up.

Kenny477 commented 1 week ago

As a note, the above is on our dev server. I will be trying to work on optimizations for both dev and build.

Current dev server Lighthouse

Current build Lighthouse

Kenny477 commented 1 week ago

Key improvements:

Manual chunking in vite to split large JS chunks
Removing blocking resources (i.e. font-awesome icons css file loading from the internet). We replaced this with local heroicons.
Placeholders and specifying image sizes to help with layout shifts and FCP/LCP
Huge optimizations in static file sizes for images by compressing/reducing size and converting to AVIF format

Kenny477 commented 1 week ago

Ideally we should figure out how to lazy load our large background images on the home page.

leofuturer / eDrops3

Optimizations [Long Term] #150