Small optimizations - Githubissues

kennethnym / infinifi

infinifi plays gentle lofi music in the background indefinitely

https://infinifi.cafe

Apache License 2.0

278 stars 14 forks source link

Small optimizations #1

Closed Rettend closed 4 months ago

Rettend commented 4 months ago

hi, you didn't use astro or even vite, so i eliminated the waterfalls manually, for it to load instantly (as it should) mostly just by preloading

perf:

preload js, css and images upfront
used <audio> tags for the audio files: new Audio() kept making random extra requests to the resources even if i preloaded them so it's gone

style:

i made all asset paths relative: i tested with github pages and it did not load anything without it so i hope it'll work with your server as well, or just remove the dots
fixate the width of the play button, so it does not jump when the text changes
hid the scrollbar as it was showing on smaller screens

before-after

stats

waterfall

tbh these are not that significant since the app is small. but note that:

blocking time reduced to 0, although it starts rendering 100ms later, might be just bad luck tho (edit: nvm largest contentful paint is only 19ms delayed)
Dom interactive went from 1.9s to 0.8s
Document complete went from 2.3s to 1.5s

also, you might want to use mp3 or webm for the audio files, wav is huge.

ty kenn cool project

Rettend commented 4 months ago

fixed my sht, now it's pixel perfect for me!

before:

https://github.com/user-attachments/assets/30b074aa-6069-43b2-9b6b-cfeea6f2f97d

after:

https://github.com/user-attachments/assets/4b656fb7-d744-42a4-83b2-c4eb253fcc6d