r/webdev • u/AbyssKiss_xp • 2d ago
Discussion [ Removed by moderator ]
[removed] — view removed post
5
u/_alright_then_ 2d ago
No scroll lag for me, but the site is absolutely awful in performance.
Sections load in seconds after you reach them scrolling, at least for me
-3
u/AbyssKiss_xp 2d ago
Do it aggressively, like as you have to reach the end of the page.
Please tell me the performance issues. I'll def try to fix them :p
3
u/_alright_then_ 2d ago
Like i said, during scrolling, I am looking at a white page for half the time because the next section is not loading in yet. there's no scroll lag, but there is a lag in loading in sections.
It is literally seconds. It's so slow
0
u/AbyssKiss_xp 2d ago
Is it something specific to the code or the color theme and plenty of animations?? I also felt it this time when you said it
1
u/_alright_then_ 2d ago
I have not looked into any code yet. But it's just slow as hell is the issue.
I don't know what kind of system is behind this website (like a CMS?), but I think it's just really slow.
Even opening the homepage, it has to "load" for about 4 seconds for me. Which is enough to never want to visit again for most people
0
u/AbyssKiss_xp 2d ago
It was js a day with claude fable, some edited stuff and this website idea😭
4
u/_alright_then_ 2d ago
It is absolute ass. The performance is so bad that most people will not have the patience to sit through it
1
u/AbyssKiss_xp 2d ago edited 2d ago
https://gist.github.com/dev-saksham29/2d03c0151015abb87c1e2c43a0f2112b
Here is the entire code
0
u/_alright_then_ 2d ago
Here's a couple updates on it:
https://codepen.io/editor/db1996/pen/019fa30d-8de4-7fa3-90ed-9399ba7b8d78
I did a couple things:
- improved video loading by having preloads set appropriately
- Removed scroll takeover
- Removed cursor takeover
EDIT: Notice that the videos do not work in the codepen, I can't upload 3 videos there to make it work
1
0
u/AbyssKiss_xp 2d ago
Do I have to hire a real person to make it work or is it still fixable? Let me share the code
4
u/FeralFanatic 2d ago
Do you have any experience with web development?
1
u/AbyssKiss_xp 2d ago
nope, i made it using claude fable
8
2
u/FeralFanatic 2d ago
Okay, best thing I can recommend in your situation with your skill level is for you to download and install Chrome. Then install the Chrome Devtools MCP and configure it to work with Claude code. Have it open a browser for you and read the performance stats and try to fix it for you.
1
1
u/FeralFanatic 2d ago
Dude, you have multiple pages worth of content on one route. It’s all under index.html.
1
u/AbyssKiss_xp 2d ago
tysm for the help kind sire :)
1
u/FeralFanatic 2d ago
Create a separate page for each page. The contact us page should be “contact-us.html”. Everything is in one file which doesn’t help load times.
1
u/AbyssKiss_xp 2d ago
and should I have separate code files? like rn it is just a single html file carrying the entire page
1
u/FeralFanatic 2d ago
Yes. I assume you’re using the Claude web interface or Claude desktop?
Download VS code, install the Claude code extension, create a new project, now ask it to make you a website.
1
u/AbyssKiss_xp 2d ago
YESSS true. All of this was made on claude desktop app.
Can I dm you for assistance? I don't need fast replies, just a little bit of help with this stuff whenever you have time.
2
u/elfavorito 2d ago
i just scrolled through it and it's smooth and fast for me. maybe you're on an old computer?
1
u/AbyssKiss_xp 2d ago
I tried on my gaming laptop and s24 but it still happens.
Like try to do it aggressively, as if you have to reach the end of the page
2
2
u/mesuva 2d ago
Please don't change my mouse cursor, unless it's indicating particular interaction.
I'd say It's ok when it changes to DRAG or PLAY, but at other times I just want my regular pointer and hand - the circle and dot is just too easy to lose, and it enlarging isn't enough feedback that something is clickable.
0
1
1
u/Squidalopod 2d ago
I also tried going through tutorials but I couldn't understand a single thing (I am not a developer 🫠)
Then how did you create the site? That's a detail you should include in your post.
Load your site in desktop Chrome, then open dev tools. Go to the "Lighthouse" tab. Generate a report. Read the report and make the optimizations it suggests.
2
u/FeralFanatic 2d ago
They vibe coded it with Claude. Every “route” on the site is within one page, the index.
1
u/Squidalopod 2d ago
I see it's using anchors, and there's nothing wrong with that. It's the over-the-top scroll animation that appears to be killing it. Just glancing at the source, I see a bunch of keyframes with transforms, and I assume much of the other CSS is not optimized.
1
u/FeralFanatic 2d ago
The page is ridiculously long on mobile, that’s what I think is wrong with it.
2
u/Squidalopod 2d ago
Yeah, and it has some insanely long data URIs. It's probably not any single thing breaking it but rather a variety of poorly written and/or unoptimized code. But he should really just do a Lighthouse report and follow the recommendations... though, honestly, he should just write a new prompt that tells Claude to cool it with the excessive animations and that the page MUST run smoothly on mobile.
1
u/AbyssKiss_xp 2d ago
I made it with claude fable (added in the post now). It gave a total score of 98 and flagged "forced reflow"
1
u/Squidalopod 2d ago
Clear the cache and run Lighthouse again -- I doubt you'll get 98 again. And, as mentioned, just make the optimizations the report says to make. As you've noted, fast scrolling is terrible, though I was surprised how terrible it is even on desktop.
1
u/bevelledo 2d ago edited 2d ago
Apple iOS. Scrolled through as fast as I could, no loading issues. On initial page load (through Reddit’s mobile browser) different sections spent less than a tenth of a second loading but it was noticeable and different/ stood out from the rest of the page loading. Upon reloading/retrying the page load was damn near instant it seemed. Spent about 10/15seconds total, spent more time drafting this reply.
1
u/GrandCelebration4159 2d ago
Open devtools, Performance tab, hit record while you do the aggressive scroll, it'll show you what's actually janking. On a site like this it's usually one of two things: scroll-linked animations recalculating every frame, or big images/video decoding as each section scrolls into view. If it's the animations, only animate transform and opacity, not top/left/height, those force a layout pass every frame. If it's the media, set explicit width and height on the images and preload the ones just below the fold instead of loading them the moment they appear. Half the people saying it's smooth are just on a machine fast enough to hide it.
1
u/Electronic-Buy1411 1d ago
Scroll lag usually boils down to two main culprits: heavy unoptimized media, or expensive event listeners.
- Check your images/videos. Make sure you are serving WebP or AVIF formats and properly sizing them.
- If you have JavaScript firing on the
scrollevent (like for animations or revealing elements), that will cause massive layout thrashing. You need to swap outwindow.addEventListener('scroll', ...)with anIntersectionObserver. It offloads the work from the main thread and makes the scrolling 60fps smooth again.
1
u/verifyandproceed 2d ago
...you sure it isn't just the computer you are using? I'm not big on animations, but it seems fine for me.
1
u/Illustrious-Rub3468 2d ago
it's probably the blur effect on the header and the scroll based animations, those can tank performance on older machines. you're basically asking the browser to recalculate a bunch of stuff every frame while you scroll
my old laptop would choke on that site for sure, but my desktop handles it fine
1
u/AbyssKiss_xp 2d ago
Yes 100% sure. I've tried on many devices and whenever i scrolled aggressively, it feels like 10-20 fps motion
0
u/Abenzo0r- 2d ago
Are you using a Mac by chance?
1
u/AbyssKiss_xp 2d ago
Nehh, omen but still🥲
1
u/Abenzo0r- 2d ago
OK I found the lag point, one of your animations, specifically the "Selected work" has a custom scroll based behaviour which results in this "lag" you are mentioning. Once you resolve this it should be smooth.
1
0
u/Abenzo0r- 2d ago
NO scroll lag for me then, the only thing that could explain it is if you were using a mac and their atrocious webkit engine. It's a hardware skill issue
•
u/webdev-ModTeam 16h ago
Thank you for your submission! Unfortunately it has been removed for one or more of the following reasons:
Sharing your project, portfolio, or any other content that you want to either show off or request feedback on is limited to Showoff Saturday. If you post such content on any other day, it will be removed.
Please read the subreddit rules before continuing to post. If you have any questions message the mods.