so i made a script to change the css file linked depending on time of year. however the load time is too slow when changing page and refeshing, causing my page to load without css for a few seconds. Any thoughts on how to do this? i tried defer and async and changing the listed order of the linked files but it doesnt either, i have a feeling my js code is too slow and changing the href attribute may be an inefficient way for it to work. Any help would be most appreciated
aformentioned html file
<!DOCTYPE html>
<html>
<head>
<script type="module" src="localimports/scripts/script_for_site_themes.js" type="text/javascript" ></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Index</title>
<link rel="stylesheet" href="localimports/css/style.css">
<script src="localimports/navbars/header.js" type="text/javascript" defer></script>
<script src="localimports/navbars/footer.js" type="text/javascript" defer></script>
<link id="sitebirthday" rel="stylesheet" href="">
<link id="october" rel="stylesheet" href="">
<link id="christmas" rel="stylesheet" href="">
<link id="newyear" rel="stylesheet" href="">
<link id="normal" rel="stylesheet" href="">
</head>
<body>
<header-component>
</header-component>
<main>
below is the linked js file named script_for_site_themes.js that i call on to get my css file
setInterval(function () {
var date = new Date();
var isodate = new Date().toISOString()
if (date.getMonth() === 11 && date.getDate() === 12) {
document.getElementById("sitebirthday").href="https://www.google.co.uk";
}
if (date.getDate() === 9 ) {
document.getElementById("october").href="https://www.google.co.uk";
}
if (date.getMonth() === 11 ) {
document.getElementById("christmas").href="https://www.google.co.uk";
}
if (date.getMonth() === 0 ) {
document.getElementById("newyear").href="https://www.google.co.uk";
}
else {
document.getElementById("normal").href="../localimports/css/templateofcssthemes.css";
}
}, 1000)
</main> <br>
<footer-component></footer-component>