Defer scripts and prevent deferred stylesheets from being render blocking

This commit is contained in:
schlagmichdoch 2023-12-15 23:40:30 +01:00
parent c2ee459231
commit 6737dcacf7
2 changed files with 12 additions and 8 deletions

View file

@ -734,10 +734,10 @@
</symbol> </symbol>
</svg> </svg>
<!-- Scripts --> <!-- Scripts -->
<script src="scripts/localization.js"></script> <script src="scripts/localization.js" defer></script>
<script src="scripts/persistent-storage.js"></script> <script src="scripts/persistent-storage.js" defer></script>
<script src="scripts/ui-main.js"></script> <script src="scripts/ui-main.js" defer></script>
<script src="scripts/main.js"></script> <script src="scripts/main.js" defer></script>
<!-- Sounds --> <!-- Sounds -->
<audio id="blop" autobuffer="true"> <audio id="blop" autobuffer="true">
<source src="sounds/blop.mp3" type="audio/mpeg"> <source src="sounds/blop.mp3" type="audio/mpeg">

View file

@ -65,7 +65,7 @@ class PairDrop {
console.log("UI hydrated."); console.log("UI hydrated.");
// Evaluate url params as soon as ws is connected // Evaluate url params as soon as ws is connected
console.log("Evaluate URL params when websocket connection is established."); console.log("Evaluate URL params as soon as websocket connection is established.");
Events.on('ws-connected', _ => this.evaluateUrlParams(), {once: true}); Events.on('ws-connected', _ => this.evaluateUrlParams(), {once: true});
} }
@ -115,10 +115,14 @@ class PairDrop {
loadStyleSheet(url) { loadStyleSheet(url) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let stylesheet = document.createElement('link'); let stylesheet = document.createElement('link');
stylesheet.rel = 'stylesheet'; stylesheet.rel = 'preload';
stylesheet.as = 'style';
stylesheet.href = url; stylesheet.href = url;
stylesheet.type = 'text/css'; stylesheet.onload = _ => {
stylesheet.onload = resolve; stylesheet.onload = null;
stylesheet.rel = 'stylesheet';
resolve();
};
stylesheet.onerror = reject; stylesheet.onerror = reject;
document.head.appendChild(stylesheet); document.head.appendChild(stylesheet);