Small optimizations #1

2024-07-23T19:45:45+01:00

Rettend commented

2024-07-23 19:45:45 +01:00

(Migrated from github.com)

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

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 ![image](https://github.com/user-attachments/assets/ff6b5acc-63be-4363-b875-808f50ed1b85) ![image](https://github.com/user-attachments/assets/f7d3260c-f8e2-4372-b96c-1f807b5b297e) waterfall ![image](https://github.com/user-attachments/assets/9c8917e7-0813-430c-8682-bc957eaf5159) ![image](https://github.com/user-attachments/assets/0fe5ea25-0fc6-4085-847f-907c1350a92a) 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

kennethnym (Migrated from github.com) requested changes 2024-07-23 23:26:27 +01:00

kennethnym (Migrated from github.com) left a comment

thank you so much for your pr!!! the changes work well locally on my machine, but i just have questions about some of the changes.

web/style.css

kennethnym (Migrated from github.com) commented

2024-07-23 23:20:37 +01:00

i think 5rem is not wide enough, as right now the "pause" label is overflowing by a little bit:

as you can see, the label is not perfectly centered. i think a longer button should mitigate this issue.

i think `5rem` is not wide enough, as right now the "pause" label is overflowing by a little bit: <img width="494" alt="Screenshot 2024-07-23 at 23 20 04" src="https://github.com/user-attachments/assets/cd54bfa2-6b22-4736-b881-eaf4bbdc97d7"> as you can see, the label is not perfectly centered. i think a longer button should mitigate this issue.

kennethnym (Migrated from github.com) commented

2024-07-23 23:24:57 +01:00

also the screenshot above shows that the backdrop of the button is 1px off to the right. for comparison, this is how it looks like in prod:

also the screenshot above shows that the backdrop of the button is 1px off to the right. for comparison, this is how it looks like in prod: <img width="481" alt="Screenshot 2024-07-23 at 23 23 41" src="https://github.com/user-attachments/assets/1abe395c-b654-4083-8037-8e9a05af881d">

web/style.css

kennethnym (Migrated from github.com) commented

2024-07-23 23:22:06 +01:00

would u mind elaborating why this fixed width is needed? it's not immediately obvious to me, so i must have missed sth.

Rettend (Migrated from github.com) reviewed 2024-07-24 06:28:45 +01:00

web/style.css

Rettend (Migrated from github.com) commented

2024-07-24 06:28:45 +01:00

sorry, it's just that when the text changes from 4 chars (play) to 5 (pause), the button like "jumps" as the width is different, which imo defeats the physical button effect.

i don't really write css and just eyeballed it, but the fix is to explicitly define a width for the button

sorry, it's just that when the text changes from 4 chars (play) to 5 (pause), the button like "jumps" as the width is different, which imo defeats the physical button effect. i don't really write css and just eyeballed it, but the fix is to explicitly define a width for the button

Rettend commented

2024-07-24 10:15:56 +01:00

(Migrated from github.com)

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

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

kennethnym (Migrated from github.com) approved these changes 2024-07-24 15:26:39 +01:00

kennethnym (Migrated from github.com) left a comment

LGTM! i will make a slight modification on button:active translate, as now it doesn't move when i click it, i will revert the value back to 4px (the fact that the button moves 1px further is intentional - it makes the click more satisfying!)

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: kennethnym/infinifi#1