Chore: Improve initial page load time

[nelsonic]

At present, PageSpeed Insights tells us that the performance of the MVP is "100"
https://pagespeed.web.dev/report?url=https%3A%2F%2Fmvp.fly.dev%2F ... 💯 🤷‍♂️

1.9 s Time to Interactive 🐌

Apparently an App that takes 1.9 s Time to Interactive scores a 100 on PageSpeed.
Maybe compared to some ridiculously slow-to-load news site this is good.
But just to render a list of items? it seems incredibly slow to me.
What can we do to lower this to ~400ms on a 3G connection?
Can we pre-render and cache the page and differ connecting to the LiveView socket? 💭

Todo

• Investigate / understand (document!) what are the main causes for "slow" page load time in a LiveView App. 🔍 📝

• Explore optimising/indexing/caching the items_with_timers/1 SQL query.
  https://github.com/dwyl/app-mvp/blob/4e21db158e2d73f54c69cc7dbba6d0c649ffe830/lib/app/item.ex#L113-L119

  • First figure out how to benchmark the query with a decent amount of data e.g. 10k items x 10k items (100M records)

    If this feels like "way too much" for our little MVP, that's because it is! But it's a useful engineering exercise.

  • Study + write-up what we would need to do from a Postgres perspective to optimise the query / load time.

• Explore using Caching to speed up the initial page load for new people visiting the MVP,
  e.g: https://fullstackphoenix.com/quick_tips/liveview-caching <| https://github.com/whitfin/cachex

• What else can we do to speed up the initial Time to interactive? 💭

Remember the purpose of the MVP is Learning.
Both our own learning of how to build Apps using PETAL 👩‍💻
and testing our hypothesis that people want to use a UX-focussed tool to maximise their personal effectiveness. ❤️ ✅
In our quest to test that hypothesis, we need to minimise the page load time ⏳
So that the person viewing the MVP for the first time is pleasantly surprised 😍
and we know we've done everything we can to Never Waste Anyone's Time^TM 👌

[nelsonic]

@SimonLab want to pick this up and write-up a perf.md with your quest? 💭
If we could shave off any time from the "Time to Interactive" 🐌 it would be amaze! 🤞

[nelsonic]

Latest result: https://pagespeed.web.dev/report?url=https%3A%2F%2Fmvp.fly.dev%2F

The speed index has increased significantly. 🤷‍♂️
I think we need to re-think the rendering of the home page and cache it all for people who have never interacted with the app before. 💭

[SimonLab]

Current metrics on my side

[nelsonic]

Yeah, similar on my side:

this is "acceptable" for a web app. 💭
It would be awesome if we could integrate this check into our CI/CD pipeline.

[nelsonic]

Accessibility and "Best Practices" have both declined to 79 and 83 respectively:
https://pagespeed.web.dev/report?url=https%3A%2F%2Fmvp.fly.dev%2F

Looks like we can tidy up the markup:

Who wants to pick this up on Monday? 🙏