Caching on a custom website

hello there, so this is my website so far https://laughing-roentgen-45daca.netlify.app/

so this is a simple custom website without frameworks, and i dont know how to cache this website and i need help since im not using any frameworks, im wondering how to cache it so it performs better?
you guys have any idea, please let me know, thanks!

You might read through these topics @lenguaestudiocreativ

Also fixing the errors on your site will help

ohh hello there, well i already read these articles and ye, not very helpful to what i want, and those errors i tried to fixed them, and it seems impossible, its pretty much saying that cannot read classlist property so i change it to classname but it broke my javascript, so ye i dont understand, its calling them as errors while its working normally, any help would be appreciate it…

ohh and fogat to mention, not very much concernd with the desktop version, its more about the smartphone version performance…

It’s saying it cannot read classList property of null. That’s the keyword. Almost all of your getElemebtById() return null as the IDs don’t exist in DOM.

However, coming back to your original question, what you’re looking for is a service worker:

You could copy that above file. And in the cache.addAll() array, you could add your own files that you wish to cache.

Then, if you don’t wish to show a custom offline page when the user is offline, you need to modify the self.addEventListener('fetch', event => {}) call.

Do note that you’d have to edit it to tailor it for your needs or you would face more problems than you’d fix by using this.

hey hello, so this code i can add it to the js.file right? …so you know im not using any framework at all right?..
and about the classList property of null, well they do have an ID on it, so do you think i should remove the class of the element or change the name of the class element, so they dont conflict with each other?
or since its saying classlist and im putting an ID instead of a classname, maybe this is what trigger this error, but now how do i fix it?,
cause i remember when i came out with this code, this, it was the only way i found to make it work you know
so let me know if anything give me a hint haha, thanks!

The id in your JavaScript does not match the id in your HTML, meaning that in page.js you have

document.getElementById ("print2") .classList .remove ('print3');

but id="print2" does not exist in your HTML. The only place I can find print2 is in page.js. You have class="print1" but a class is different to an id.

Edit: There is an id="print2" on page2.html but not on your index.html. But this part of the script is running on index.html when it clearly should not.

what?, print2 as an ID it does exist in page2.html, the problem its that i have the same name for the classname, so i dont know if this generates a conflict with each other, the only ID that do not exist in the html is the print3, which is on the ,css file cause its java ID swap…i do think the issueits the fact that im using IDs with a classlist/classname java syntax
if you know how to fix it let me know

so now that i think about it, im going to use a classname SYNTAX after the classlist, and leave the ID with the get element by ID

As per the my previous post, id="print2" is different to class="print2".

As per the edit in my previous post, id="print2" exists on page2.html but it does not exist on index.html which is where the error messages as generated. You need to split your JavaScript so that it only runs on the appropriate page.

On page2.html the following error is logged

document.getElementById ("texm1") .classList.remove ('animated', 'slideInLeft', 'delay-1s');

because id="texm1" does not exist on that page.

OHHHH damn…so i didnt knew that, so two java files per page wooo…
thanks for the tip homie

I ain’t no homie

then what are you? you aint no homie