Как быстрее загружать файлы css и js и влияет ли хранение этих файлов в каталоге медиа на время загрузки?

У меня есть приложение django, и я размещаю его на heroku, все работает хорошо. Я храню изображения (пока что) в моем каталоге media То же самое касается js и css файлов, однако они будут там всегда, но я не знаю, хорошая ли это практика, должен ли я размещать их где-то в интернете.

А также как мне загрузить css и js быстрее (получить ресурсы).У меня есть функция, которая добавляет экран загрузки, так что сайт получает, чтобы загрузить все ресурсы, но всякий раз, когда файлы не загружаются, функция в основном бесполезна, так как она находится в js файле, и по какой-то причине эта проблема в основном возникает, когда я открываю сайт через мобильный браузер

Вот код для функции, хотя я не думаю, что она нужна:

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";    
        }
    });

Примечание: у меня есть базовый шаблон, который используется почти на всех страницах. Вот как мой шаблон django передает css и js файлы:

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>

Пожалуйста, помогите, я буду благодарен за любую помощь, которую смогу получить!

Вернуться на верх