is there a way to optimize a website without subpages?

[maddy ੈ✩‧₊]

hi! i wasn't sure if this should be in web crafting or i need help but i figured it could be applicable to multiple projects so wanted to start here

i have been working out of one index.html file for my personal website to make it feel as seamless as possible
rather than having one html file per page, i have everything on one page and use javascript to switch scale from 0 to 1 to simulate the different windows opening.

i was worried that as i keep adding content, the speed of the site would vastly slow down. i'm self-taught so i wasn't sure how to google if this would be an issue but i was wondering if there was a solution like splitting up the html into separate files and using js to insert it into the main index.html would be a solution while keeping the same sort of interactive experience? i wasn't sure if there was a way to have multiple html files without having multiple pages available on the site. right now everything is vanilla html/css/javascript.

sorry if this is a lot or it didn't make much sense! i can also share my code if that would be helpful!

[cynderthekitsune]

i suppose, maybe downsize the images, or at least make them SVGs? because high-res images can slow a lot of slower/older devices down, especially if not optimised properly :P
JPGs or very optimised PNGs are really good for this!

maybe 'prune' the code a bit too, i guess? make sure it's not spaghetti code, plus no dead-ends or janky bits in it :P

[maddy ੈ✩‧₊]

i suppose, maybe downsize the images, or at least make them SVGs? because high-res images can slow a lot of slower/older devices down, especially if not optimised properly :P
JPGs or very optimised PNGs are really good for this!

maybe 'prune' the code a bit too, i guess? make sure it's not spaghetti code, plus no dead-ends or janky bits in it :P

this is helpful thank u! i have optimized my pngs, but might make them all svgs just to be safe.
i'll start too with fixing up my code, it's definitely not the most optimized right now since i kept messing with it, i gotta clean it up a bit!

[Kie]

Oh that's such a cool idea!!    It makes the website feel so much more reactive/interactive! But yes, it totally will end up being an issue if you keep adding to the site.

Just to understand since you mentioned being self-taught, but do you know about iframes?
keysklubhouse is a popular indie website that hevily uses iframes, for example. However they are not quite as customizable as what you have right now.

Maybe you can have the main "pages" as they are right now, inside the idex.html. And then create a page called something like "extras" that brings up an iframe. And users can change what the iframe displays. This way all the secondary pages will be in separate html files and only be loaded on-demand!

EDIT: Scratch that. Now that I think about it I'm pretty confident you could make this work with exclusively Javascript. You could make a function that loads HTML inside of a div! And have the function activate when someone presses the button to bring up a page!
You could also have the deafult html inside the div be something like the gif of a loading screen. This way if the script takes a bit to work it will still look good to the user!! Check this out!