openvibers/openvibe.network Commits

Defer shared scripts on public pages (#775)

OP OpenVibers committed 3 days ago · 4c748b6e17 · 7 files, +35 −16

Changes

ddiff --git a/public/admin.html b/public/admin.html
iindex 7c8c2d01..60df09cf 100644
---- a/public/admin.html
++++ b/public/admin.html
@@@ -672,10 +672,10 @@
<!-- Shared scripts -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
--<script src="/shared/navbar.js"></script>
++<script src="/shared/navbar.js" defer></script>
<script src="/js/account-safety.js" defer></script>
--<script src="/shared/notification-ui.js"></script>
--<script src="/shared/account-switcher.js"></script>
++<script src="/shared/notification-ui.js" defer></script>
++<script src="/shared/account-switcher.js" defer></script>
<script src="/shared/ov-forms.js" defer></script>
<script src="/js/admin/core.js" defer></script>
ddiff --git a/public/index.html b/public/index.html
iindex a29cc149..cff9120c 100644
---- a/public/index.html
++++ b/public/index.html
@@@ -226,7 +226,7 @@ footer{border-top:1px solid var(--border);background:var(--bg-secondary)}
.home-chips>li>a { min-height: 44px; }
}
</style>
--<script src="/shared/theme-loader.js"></script>
++<script src="/shared/theme-loader.js" defer></script>
</head>
<body>
@@@ -272,9 +272,9 @@ footer{border-top:1px solid var(--border);background:var(--bg-secondary)}
<!-- Footer (shared across the network) -->
<div id="ov-footer"></div>
--<script src="/shared/navbar.js"></script>
++<script src="/shared/navbar.js" defer></script>
<script src="/js/account-safety.js" defer></script>
--<script src="/shared/footer.js"></script>
++<script src="/shared/footer.js" defer></script>
<script src="/shared/shipped.js" defer></script>
<script src="/shared/boost.js" data-main="#main" defer></script>
<script>(function () { function shipped() { if (window.OpenVibeShipped && document.getElementById('ov-shipped')) OpenVibeShipped.mount('#ov-shipped', { limit: 8, title: 'Recently shipped across OpenVibe', more: '/updates' }); } document.addEventListener('DOMContentLoaded', shipped); document.addEventListener('ov:boost:load', shipped); })();</script>
ddiff --git a/public/my.html b/public/my.html
iindex 0435c845..16b93874 100644
---- a/public/my.html
++++ b/public/my.html
@@@ -631,11 +631,11 @@
</dialog>
<!-- Shared scripts -->
--<script src="/shared/theme-loader.js"></script>
--<script src="/shared/navbar.js"></script>
++<script src="/shared/theme-loader.js" defer></script>
++<script src="/shared/navbar.js" defer></script>
<script src="/js/account-safety.js" defer></script>
--<script src="/shared/notification-ui.js"></script>
--<script src="/shared/account-switcher.js"></script>
++<script src="/shared/notification-ui.js" defer></script>
++<script src="/shared/account-switcher.js" defer></script>
<!-- The kit's behaviour in the page: the copy button on the Account ID (data-ovk-copy). -->
<script src="/shared/kit-web.js" defer></script>
ddiff --git a/public/pay.html b/public/pay.html
iindex fe8a676e..94bfce64 100644
---- a/public/pay.html
++++ b/public/pay.html
@@@ -30,8 +30,8 @@
</div>
</main>
--<script src="/shared/theme-loader.js"></script>
--<script src="/shared/navbar.js"></script>
++<script src="/shared/theme-loader.js" defer></script>
++<script src="/shared/navbar.js" defer></script>
<script src="/js/account-safety.js" defer></script>
<script src="/shared/kit-web.js" defer></script>
<script src="/js/wallet/money.js" defer></script>
ddiff --git a/public/verify-email.html b/public/verify-email.html
iindex 471afb1f..eb1fbbe4 100644
---- a/public/verify-email.html
++++ b/public/verify-email.html
@@@ -28,7 +28,7 @@
} catch (_) { /* nothing kept: theme-loader.js paints shortly */ }
})();
</script>
--<script src="/shared/theme-loader.js"></script>
++<script src="/shared/theme-loader.js" defer></script>
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg-primary:#0a0f1c;--bg-secondary:#101828;--bg-card:#131c2e;--bg-hover:#1c2a44;--border:#1f2d47;--text-primary:#e8ecf5;--text-secondary:#a9b3c9;--text-muted:#6b7590;--accent:#3b82f6;--accent-light:#60a5fa;--accent-rgb:59,130,246;--on-accent:#fff;--success:#22c55e;--danger:#ef4444;--warning:#f59e0b}
@@@ -92,7 +92,7 @@ p{color:var(--text-secondary);font-size:14px;line-height:1.6}
</div>
</section>
</main>
--<script src="/shared/navbar.js"></script>
++<script src="/shared/navbar.js" defer></script>
<script src="/js/account-safety.js" defer></script>
<script>
(function () {
ddiff --git a/public/wallet.html b/public/wallet.html
iindex 35434e77..0c9f574e 100644
---- a/public/wallet.html
++++ b/public/wallet.html
@@@ -170,8 +170,8 @@
</div>
</dialog>
--<script src="/shared/theme-loader.js"></script>
--<script src="/shared/navbar.js"></script>
++<script src="/shared/theme-loader.js" defer></script>
++<script src="/shared/navbar.js" defer></script>
<script src="/js/account-safety.js" defer></script>
<script src="/shared/kit-web.js" defer></script>
<script src="/js/wallet/money.js" defer></script>
ddiff --git a/test/defer-shared.test.js b/test/defer-shared.test.js
nnew file mode 100644
iindex 00000000..7a7eaa11
---- /dev/null
++++ b/test/defer-shared.test.js
@@@ -0,0 +1,19 @@
++'use strict';
++// Every /shared script on a public page is deferred: the look renders from look-boot, and the
++// navbar/footer run after the document parses, not before the first paint.
++const assert = require('assert');
++const fs = require('fs');
++const path = require('path');
++
++for (const name of ['index.html', 'my.html', 'wallet.html', 'pay.html', 'verify-email.html']) {
++ const html = fs.readFileSync(path.join(__dirname, '..', 'public', name), 'utf8');
++ for (const m of html.matchAll(/<script\b[^>]*>/gi)) {
++ const tag = m[0];
++ if (!/\ssrc\s*=\s*"\/shared\//.test(tag)) continue;
++ const type = /type\s*=\s*"module"/.test(tag);
++ assert.ok(/\bdefer\b|\basync\b/.test(tag) || type, `${name}: ${tag.slice(0, 90)} is blocking`);
++ }
++ assert.ok(html.includes('<script src="/shared/navbar.js" defer></script>') || !html.includes('/shared/navbar.js'), `${name}: navbar deferred`);
++ assert.ok(html.includes('<script src="/shared/theme-loader.js" defer></script>') || !html.includes('/shared/theme-loader.js'), `${name}: theme-loader deferred`);
++}
++console.log('defer shared: no blocking /shared script on public pages');