How can I load css and js files faster and does storing these files in your media directory affect load time?

So I have a django app and I'm hosting it on heroku, everything works fine.I am storing the images(for now) in my media directory Same for js and css file, however they're going to be there forever but i don't know if thats a good practise, should i host it somewhere online also.

Also how can i load css and js faster (get the resources).I have a function that add a load screen so the website gets to load all resources but whenever the files arent loaded it the function is basically useless since it's in the js file and for some reason this problem mostly occurs when i open the website through a mobile browser

Here is the code for the function, although i don't think its needed:

base.js

const loader = document.querySelector(".loader");
document.addEventListener('readystatechange', function checkResources(){
    let socials = document.getElementById("nav-socials");
    alert(`readystate: ${document.readyState}`);
    if(document.readyState == "complete"){
        //remove a social nav sinces it also has a z-index:100 and will still be seen
        socials.style.display = "block"
        alert("page ready, remve")
        return loader.classList.add("hidden")
    }else{
            loader.classList.remove("hidden")
            socials.style.display = "none";    
        }
    });

Note: i have a base template which is used in almost all the pages. Here is how my django template server the css and js files:

CSS:

 <link rel="stylesheet" href="{% static 'MFLS_main/styles/base.css' %}"> 
    {%block style%} {%endblock%}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />

JS:

    {%block script%}{%endblock%}
    <script src="{% static 'MFLS_main/js/base.js' %}"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

Please help, I will appreciate every little help I can get!

Back to Top