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!

[randomtangent]

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!

[TheFrugalGamer]

If you're adding more things like your Art gallery, with large images and such, you might use an iframe or even link to an entirely new page just to keep load times down.

But otherwise I think you'll find you can add a lot more than you suspect...I've been throwing more and more onto this page for a while now, and it still loads up and works almost instantly (at least for me). Basic HTML/JS/CSS is way lighter than we're used to here on the modern web.

[maddy ੈ✩‧₊]

ooh thanks for sharing, this is super helpful!! i'll definitely try using js to clean up
and the site with iframes is really fun as a reference too!

thank u i'll keep that in mind! and oh my gosh, your page is so cool!! i absolutely love the style you're going for and all the apps you've created!

[TheFrugalGamer]

thank u i'll keep that in mind! and oh my gosh, your page is so cool!! i absolutely love the style you're going for and all the apps you've created!

Thank you! It's a long term passion project of mine, and I work on it in between my more public stuff.

You might eventually consider adding yours to this collection of "web desktops" that I've linked from mine: Awesome web desktops. It requires a github pull request, which is how I taught myself to do one finally.